js -- 事件練習(xí)

1、實(shí)現(xiàn)點(diǎn)擊按鈕，滾動(dòng)條走動(dòng)和百分比走動(dòng)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .kuang{
                width: 300px;
                height: 30px;
                border: 3px solid #000;
            }
            #jindutiao{
                background-color: red;
                float: left;
                height: 100%;
                text-align: center;
                line-height: 150%;
            }
        </style>
        
    </head>
    <body>
        <button id="begin" onclick="run()">begin</button>
        <div class="kuang">
        <div id="jindutiao" style="width: 0%;" ></div></div>
        <p id="jindu">0%</p>
        
    </body>
</html>
<script type="text/javascript">
//  var obtnb = document.getElementById('begin')
    var odivj = document.getElementById('jindutiao')
    var opj = document.getElementById('jindu')
    function run(){
        odivj.style.width = parseInt(odivj.style.width) + 1 + '%';
        opj.innerHTML = odivj.style.width;
        if(odivj.style.width == "100%"){
            window.clearTimeout(timeout);
            return;
        }
        var timeout=window.setTimeout("run()",666);
    }
</script>
進(jìn)度條.gif
<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滾動(dòng)條效果</title>
    <style>
    div {
        width: 500px;
        height: 100px;
        border: 1px dashed black;
    }
    #nei {
        background-color: pink;
        width: 0px;
        border: none;
    }
    </style>
</head>
<body>
    <h1>滾動(dòng)條</h1>
    <button id="btn">點(diǎn)擊我</button>
    <br><br><br>
    <div>
        <div id="nei" style="width: 500px;"></div>
    </div>
    <span id="per">100%</span>


<script>
var obtn = document.getElementById('btn')
obtn.onclick = function () {
    this.disabled = true
    var onei = document.getElementById('nei')
    var oper = document.getElementById('per')
    i = 0
    // 將#nei這個(gè)div的寬度從0慢慢的變成500即可
    var timer = setInterval(function () {
        i += 2
        // 將i設(shè)置為nei div的寬度
        onei.style.width = i + 'px'
        // 時(shí)刻修改span里面的內(nèi)容
        oper.innerHTML = (i / 5) + '%'
        // 判斷i有沒有達(dá)到div寬度
        if (i == 500) {
            // 銷毀定時(shí)器
            clearInterval(timer)
            obtn.disabled = false
        }
    }, 10)
}
</script></body></html>

2、實(shí)現(xiàn)秒表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .xianshiqi{
                height: 200px;
                background-color: aquamarine;
                font-size: 150px;
                text-align: center;
                
            }
            .caozuo{
                height: 200px;
                text-align: center;
            }
            button{
                height: 100px;
                width: 30%;
                margin: 10px;
                font-size: 33px;
            }
        </style>
    </head>
    <body>
        <div class="xianshiqi">
            <p id="second_watch">00:00:00</p>
        </div>
        <div class="caozuo">
            <button id="begin" onclick="begin()">開始</button>
            <button id="pause" onclick="pause()">暫停</button>
            <button id="reset" onclick="reseta()">重置</button>
        </div>
    </body>
</html>
<script>
    var i1 = 0; //分鐘第一位
    var i2 = 0; //分鐘第二位
    var s1 = 0; //秒第一位
    var s2 = 0; //秒第二位
    var ms1 = 0; //百分秒第一位
    var ms2 = 0; //百分秒第二位
    var t;　　//計(jì)時(shí)函數(shù)保存
    function begin(){
        document.getElementById("begin").disabled = "true";  //開始后使開始按鈕失效，防止多次點(diǎn)擊計(jì)時(shí)加快的bug
        ms2++; //只需百分秒最后一位自加，前面依次進(jìn)位
        if(ms2>9){
            ms2 = 0;
            ms1++;
        }
        if(ms1>9){
            ms1 = 0;
            s2++;
        }
        if(s2>9){
            s2 = 0;
            s1++;
        }
        if(s1>5){
            s1 = 0;
            i2++;
        }
        if(i2>9){
            i2 = 0;
            i1++;
        }
        if(i1>5){
            //超出秒表計(jì)數(shù)范圍
            clearTimeout(t);
            return false;
        }
        document.getElementById("second_watch").innerHTML = ""+i1+i2+":"+s1+s2+":"+ms1+ms2+"";
        document.getElementById("second_watch").style.color = "black";
        t = setTimeout("begin()",10);　　//百分秒百分之一秒執(zhí)行一次
    }

    function pause(){
        clearTimeout(t);
        document.getElementById("second_watch").style.color = "red";
        document.getElementById("begin").disabled = ""; //停止時(shí)恢復(fù)按鈕功能
    }

    function reseta(){
        clearTimeout(t);
        i1 = 0;
        i2 = 0;
        s1 = 0;
        s2 = 0;
        ms1 = 0;
        ms2 = 0;
        document.getElementById("second_watch").innerHTML = ""+i1+i2+":"+s1+s2+":"+ms1+ms2+"";
        document.getElementById("second_watch").style.color = "black";
        document.getElementById("begin").disabled = "";
    }

</script>
秒表.gif
<html><head>
        <meta charset="UTF-8">
        <title>NO.2</title>
        <style type="text/css">
            #d1{
                height: 300px;
                width: 100%;
                font-size: 300px;
                color: #FF0000;
                line-height: 300px;
                text-align: center;
                background-color: rgb(100,100,100);
            }
            #d2{
                height: 200px;
                width: 100%;
                background-color: rgb(200,200,200);
            }
            button{
                font-size: 50px;
                border-radius: 10px;
                color: purple;
                width: 150px;
                position: relative;
                margin-left: 130px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!--2、實(shí)現(xiàn)秒表-->
        <div id="d1">00:00</div>
        <div id="d2">
            <button id="btn1">開始</button>
            <button id="btn2">暫停</button>
            <button id="btn3">重置</button>
        </div>
    

<script>
// 前面是秒   后面是10ms
var ostart = document.getElementById('btn1')
var ostop = document.getElementById('btn2')
var oreset = document.getElementById('btn3')
var odiv = document.getElementById('d1')
var timer = null
var i = 0
// 開始函數(shù)
ostart.onclick = function () {
    // 周期性定時(shí)器一直在修改div的值
    timer = setInterval(function () {
        i++
        // 根據(jù)i計(jì)算前面的值和后面的值  228  02:28
        first = parseInt(i / 100)
        second = i % 100
        // 將i設(shè)置為div后面的值
        odiv.innerHTML = buling(first) + ':' + buling(second)
    }, 10)
}

// 暫停
ostop.onclick = function () {
    clearInterval(timer)
}

// 重置函數(shù)
oreset.onclick = function () {
    // 清掉定時(shí)器
    clearInterval(timer)
    // 計(jì)數(shù)器清零
    i = 0
    // 顯示也清零
    odiv.innerHTML = '00:00'
}

function buling(number) {
    if (number < 10) {
        return '0' + number
    }
    return number
}
</script></body></html>

3、實(shí)現(xiàn)文字時(shí)鐘

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文字時(shí)鐘</title>
    </head>
    <body>
        <div id="showTime"></div>
    </body>
</html>
<script language="javascript">
    function timer(){
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth()+1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      var weekday = date.getDay();
      if(weekday==0){
          weekday="星期日";
      }
      if(weekday==1){
          weekday="星期一";
      }
      if(weekday==2){
          weekday="星期二";
      }
      if(weekday==3){
          weekday="星期三";
      }
      if(weekday==4){
          weekday="星期四";
      }
      if(weekday==5){
          weekday="星期五";
      }
      if(weekday==6){
          weekday="星期六";
      }
      document.getElementById("showTime").innerHTML = "<h1>當(dāng)前日期是："+year+"年"+month+"月"+day+"日 &nbsp;&nbsp;"+weekday+"&nbsp;&nbsp;<br>現(xiàn)在時(shí)間是："+hour+"時(shí)"+minute+"分"+second+"秒</h1>";
     
    }
      var t = setInterval("timer()",1000);
      clearInterval("t");
</script>
文字時(shí)鐘.gif
<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字時(shí)鐘</title>
</head>
<body>
    <h1 id="lala">當(dāng)前時(shí)間為:2018年8月22號 星期三 16:42:10</h1>


<script>
    var oh = document.getElementById('lala')
    setInterval(function () {
        // 一直修改oh的內(nèi)容
        var od = new Date()
        // 獲取年份
        var year = od.getFullYear()
        // 獲取月份
        var month = od.getMonth() + 1
        // 獲取日期
        var day = od.getDate()
        // 獲取星期幾
        var weekday = change_weekday(od.getDay())
        // 獲取小時(shí)
        var hour = od.getHours()
        // 獲取分鐘
        var minute = od.getMinutes()
        // 獲取秒數(shù)
        var second = od.getSeconds()

        oh.innerHTML = '當(dāng)前時(shí)間為:' + year + '年' + month + '月' + day + '號 ' + weekday + ' ' + hour + ':' + minute + ':' + second
    }, 1000)

    function change_weekday(number) {
        switch (number) {
            case 0:
                return '星期天'
                break;
            case 1:
                return '星期一'
                break;
            case 2:
                return '星期二'
                break;
            case 3:
                return '星期三'
                break;
            case 4:
                return '星期四'
                break;
            case 5:
                return '星期五'
                break;
            case 6:
                return '星期六'
                break;
        }
    }
</script></body></html>

4、處理className兼容，自己實(shí)現(xiàn)getByClassName

function getByClassName(ClassName){     
    if(document.getElementsByClassName){
       return document.getElementsByClassName(ClassName);
    }else{
      var aEle=document.getElementsByTagName('*'); 
      var arr=[];  
      for(var i=0;i<aEle.length;i++){
        if(aEle[i].className==ClassName){
          arr.push(aEle[i])
        }
       }
      return arr; 
     }
}

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>處理classname兼容</title>
</head>
<body>
    <div id="tang">
        <div class="song yuan qing"></div>
        <div class="song"></div>
        <div class="ming"></div>
    </div>
    <div class="song"></div>
    <div class="song"></div>


<script>
    // var adivs = document.getElementsByClassName('song')
    var odiv = document.getElementById('tang')
    // var adivs = odiv.getElementsByClassName('song')

    // console.log(adivs)

    

//*
function getByClassName(obj, classname) {
    // 首先找到所有的標(biāo)簽
    var abiaos = obj.getElementsByTagName('*')
    // 定義一個(gè)數(shù)組，用來保存符合要求的節(jié)點(diǎn)對象
    var arr = []
    // 遍歷每一個(gè)標(biāo)簽，將標(biāo)簽的內(nèi)容得到
    for(var i = 0; i < abiaos.length; i++) {
        // 得到當(dāng)前對象的class
        var leiming = abiaos[i].className
        // 將leiming這個(gè)字符串按照空格切割
        var arr1 = leiming.split(' ')
        // 遍歷所有的類名，判斷有沒有classname, 有的話就要這個(gè)節(jié)點(diǎn)，沒有就不要這個(gè)節(jié)點(diǎn)
        for (var j = 0; j < arr1.length; j++) {
            if (arr1[j] == classname) {
                arr.push(abiaos[i])
            }
        }
    }
    return arr
} //*/

console.log(getByClassName(odiv, 'song'))

// console.log('song'.split(' '))
</script></body></html>

5、短信倒計(jì)時(shí)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>發(fā)送短信</title>
    </head>
    <script type="text/javascript">
        var countdown = 60;

        function settime(obj) {
            if(countdown == 0) {
                obj.removeAttribute("disabled");
                obj.value = "免費(fèi)獲取驗(yàn)證碼";
                countdown = 60;
                return;
            } else {
                obj.setAttribute("disabled", true);
                obj.value = "重新發(fā)送(" + countdown + ")";
                countdown--;
            }
            setTimeout(function() {
                settime(obj)
            }, 1000)
        }
    </script>

    <body>
        <input type="button" id="btn" value="免費(fèi)獲取驗(yàn)證碼" onclick="settime(this)" />
    </body>

</html>
倒計(jì)時(shí).gif
<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>短信倒計(jì)時(shí)</title>
</head>
<body>
    <button id="btn" style="width:400px; height:100px; font-size:50px;">點(diǎn)擊發(fā)送短信</button>


<script>
var obtn = document.getElementById('btn')
obtn.onclick = function () {
    this.disabled = true
    var i = 5
    var timer = setInterval(function () {
        obtn.innerHTML = i + 's之后重新發(fā)送'
        // 判斷定時(shí)器何時(shí)銷毀
        if (i == 0) {
            clearInterval(timer)
            obtn.innerHTML = '點(diǎn)擊發(fā)送短信'
            obtn.disabled = false
        }
        i--
    }, 1000)
}
</script></body></html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,355評論 25贊 708
  • 1、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地?cái)?shù)據(jù)庫組件 SD...
    陽明AI閱讀 16,237評論 3贊 119
  • 最近發(fā)生了太多事，搞得自己心神不寧，偶爾翻翻照片，看到幾張自己無意間拍的照片，景色怡人，環(huán)境優(yōu)雅，適合隱居！ 一朵...
    你的小屋閱讀 217評論 0贊 0
  • 上大學(xué)以后，在家的時(shí)間屈指可數(shù)，難得回家，有時(shí)候吃完飯便會準(zhǔn)備洗碗，媽媽看到就會趕緊阻止我，說我洗不干凈，...
    薛施文閱讀 934評論 0贊 0

友情鏈接更多精彩內(nèi)容