js -- 事件练习

作者: GHope | 来源:发表于2018-08-21 20:48 被阅读49次

js -- 事件练习
【原生js练习笔记】控制div属性
js(事件)
js操作页面三步骤
事件
JS作用域的练习
20、jQuery 事件机制
javascript 中的事件机制
JavaScript的事件机制详解
JS的事件绑定和事件流模型

1、实现点击按钮，滚动条走动和百分比走动

<!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>

进度条.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>滚动条效果</title>
    <style>
    div {
        width: 500px;
        height: 100px;
        border: 1px dashed black;
    }
    #nei {
        background-color: pink;
        width: 0px;
        border: none;
    }
    </style>
</head>
<body>
    <h1>滚动条</h1>
    <button id="btn">点击我</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这个div的宽度从0慢慢的变成500即可
    var timer = setInterval(function () {
        i += 2
        // 将i设置为nei div的宽度
        onei.style.width = i + 'px'
        // 时刻修改span里面的内容
        oper.innerHTML = (i / 5) + '%'
        // 判断i有没有达到div宽度
        if (i == 500) {
            // 销毁定时器
            clearInterval(timer)
            obtn.disabled = false
        }
    }, 10)
}
</script></body></html>

2、实现秒表

<!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;　　//计时函数保存
    function begin(){
        document.getElementById("begin").disabled = "true";  //开始后使开始按钮失效，防止多次点击计时加快的bug
        ms2++; //只需百分秒最后一位自加，前面依次进位
        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){
            //超出秒表计数范围
            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);　　//百分秒百分之一秒执行一次
    }

    function pause(){
        clearTimeout(t);
        document.getElementById("second_watch").style.color = "red";
        document.getElementById("begin").disabled = ""; //停止时恢复按钮功能
    }

    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、实现秒表-->
        <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
// 开始函数
ostart.onclick = function () {
    // 周期性定时器一直在修改div的值
    timer = setInterval(function () {
        i++
        // 根据i计算前面的值和后面的值  228  02:28
        first = parseInt(i / 100)
        second = i % 100
        // 将i设置为div后面的值
        odiv.innerHTML = buling(first) + ':' + buling(second)
    }, 10)
}

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

// 重置函数
oreset.onclick = function () {
    // 清掉定时器
    clearInterval(timer)
    // 计数器清零
    i = 0
    // 显示也清零
    odiv.innerHTML = '00:00'
}

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

3、实现文字时钟

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文字时钟</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>当前日期是："+year+"年"+month+"月"+day+"日 &nbsp;&nbsp;"+weekday+"&nbsp;&nbsp;<br>现在时间是："+hour+"时"+minute+"分"+second+"秒</h1>";
     
    }
      var t = setInterval("timer()",1000);
      clearInterval("t");
</script>

文字时钟.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>文字时钟</title>
</head>
<body>
    <h1 id="lala">当前时间为:2018年8月22号 星期三 16:42:10</h1>


<script>
    var oh = document.getElementById('lala')
    setInterval(function () {
        // 一直修改oh的内容
        var od = new Date()
        // 获取年份
        var year = od.getFullYear()
        // 获取月份
        var month = od.getMonth() + 1
        // 获取日期
        var day = od.getDate()
        // 获取星期几
        var weekday = change_weekday(od.getDay())
        // 获取小时
        var hour = od.getHours()
        // 获取分钟
        var minute = od.getMinutes()
        // 获取秒数
        var second = od.getSeconds()

        oh.innerHTML = '当前时间为:' + 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兼容，自己实现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) {
    // 首先找到所有的标签
    var abiaos = obj.getElementsByTagName('*')
    // 定义一个数组，用来保存符合要求的节点对象
    var arr = []
    // 遍历每一个标签，将标签的内容得到
    for(var i = 0; i < abiaos.length; i++) {
        // 得到当前对象的class
        var leiming = abiaos[i].className
        // 将leiming这个字符串按照空格切割
        var arr1 = leiming.split(' ')
        // 遍历所有的类名，判断有没有classname, 有的话就要这个节点，没有就不要这个节点
        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、短信倒计时

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>发送短信</title>
    </head>
    <script type="text/javascript">
        var countdown = 60;

        function settime(obj) {
            if(countdown == 0) {
                obj.removeAttribute("disabled");
                obj.value = "免费获取验证码";
                countdown = 60;
                return;
            } else {
                obj.setAttribute("disabled", true);
                obj.value = "重新发送(" + countdown + ")";
                countdown--;
            }
            setTimeout(function() {
                settime(obj)
            }, 1000)
        }
    </script>

    <body>
        <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />
    </body>

</html>

倒计时.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>短信倒计时</title>
</head>
<body>
    <button id="btn" style="width:400px; height:100px; font-size:50px;">点击发送短信</button>


<script>
var obtn = document.getElementById('btn')
obtn.onclick = function () {
    this.disabled = true
    var i = 5
    var timer = setInterval(function () {
        obtn.innerHTML = i + 's之后重新发送'
        // 判断定时器何时销毁
        if (i == 0) {
            clearInterval(timer)
            obtn.innerHTML = '点击发送短信'
            obtn.disabled = false
        }
        i--
    }, 1000)
}
</script></body></html>

js -- 事件练习
1、实现点击按钮，滚动条走动和百分比走动 2、实现秒表 3、实现文字时钟 4、处理className兼容，自己实现...
【原生js练习笔记】控制div属性
原生js练习，前辈的js原生练习，开始跟着做，收货很多。题目：控制div属性解题思路：每个按钮进行事件监听。 ...
js(事件)
js 事件js事件.png
js操作页面三步骤
js操作页面三步骤 js事件鼠标事件文档事件键盘事件表单事件事件对象 js操作内容 js操作样式页面转...
事件
1、鼠标的移入移除js部分 2、鼠标事件js部分 3、事件对象js部分 4、键盘事件js部分 5、输入框事件js部...
JS作用域的练习
Js作用域练习demo1 Js作用域练习demo2 JS作用域练习demo3 JS作用域练习demo4 JS作用域...
20、jQuery 事件机制
20、jQuery 事件机制原生js事件与jQuery事件：（1）用原生的js给div注册事件原生js注册相...
javascript 中的事件机制
js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件：JavaScript是基于事件驱动...
JavaScript的事件机制详解
【js事件详解】js事件封装函数，js跨浏览器事件处理机制一、事件流事件流描述的是从页面中接受事件的顺序。IE...
JS的事件绑定和事件流模型
一、JS事件（一）JS事件分类 1.鼠标事件： click/dbclick/mouseover/mouseout...

js -- 事件练习

相关文章

js -- 事件练习

【原生js练习笔记】控制div属性

js(事件)

js操作页面三步骤

事件

JS作用域的练习

20、jQuery 事件机制

javascript 中的事件机制

JavaScript的事件机制详解

JS的事件绑定和事件流模型

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Python

HTML