首页 > 其他 > 详细

计时器练习

时间:2019-02-15 23:13:48      阅读:176      评论:0      收藏:0      [点我收藏+]

1.获取当前时间的代码,时间显示在input窗口里边.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<input type="text" id="i1">
<script>
    var i1Ele=document.getElementById(i1);
    var now=new Date();
    i1Ele.value=now.toLocaleString();
</script>
<!--获取当前时间的代码-->
</body>
</html>

 结果显示:

技术分享图片

 

2.获取时间动起来的代码

一下代码实现了功能,但是存在bug:主要是点击两次开始,就不能停止时间了,思考是为什么?

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<input type="text" id="i1">
<button id="b1">开始</button>
<!--点击开始,就在input窗口里跑起时间,这里需要给按钮绑定一个事件-->
<button id="b2">停止</button>

<script>
    var i1Ele=document.getElementById(i1);
    var t;//定义一个t
    function f() {
        var now = new Date();
        i1Ele.value = now.toLocaleString();
    }
    // 升级,将上边两句话写在一个函数里边
    f();//默认需要先执行一遍,才会在input窗口里显示

    var b1Ele=document.getElementById(b1);
    b1Ele.onclick=function (ev) {
        t=setInterval(f,1000)
    };
    //找到按钮
    // 编写事件出发
    //定时,设置时间间隙.为1s

    var b2Ele=document.getElementById(b2);
    b2Ele.onclick=function (ev) {
        clearInterval(t)
    }
</script>
<!--获取当前时间的代码-->
</body>
</html>

 

计时器练习

原文:https://www.cnblogs.com/studybrother/p/10386195.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!