zoukankan      html  css  js  c++  java
  • js基础练习-倒计时

    设计一个倒计时,点击"开始",开始倒计时,按钮变成“暂停”,点击“暂停”之后,按钮变成“继续”,当倒计时结束后,按钮为“复位”,点击可再次实现倒计时

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    #box{
    200px;
    height: 200px;
    border: 1px solid palegreen;
    font-size: 35px;
    line-height: 200px;
    text-align: center;
    margin: 20px auto;
    }
    #btn{
    display: block;
    200px;
    height: 35px;
    margin: 0 auto;
    }
    </style>
    </head>
    <body>
    <div id="box">
    60
    </div>
    <input type="button" value="开始" id="btn">
    </body>
    <script>
    var obox = document.getElementById("box");
    var obtn = document.getElementById("btn");
    //将页面的数据传给star和num;num用来计算,star用来保存初始值
    var star = obox.innerHTML;
    var num = obox.innerHTML;
    var t;
    //设置一个开关onoff,每次点击的时候,所做的事件不一样
    var onoff = 0;
    //鼠标点击事件
    obtn.onclick = function() {
    clearInterval(t);
    //判断,当onoff=0时,执行开始倒计时
    if (onoff == 0) {
    t = setInterval(function() {
    //计时器每次执行都要判断是否结束
    if (num == 1) {
    //当num为1时,表示倒计时结束,更改页面显示内容,更改按钮以及状态,清除计时器
    num = "倒计时结束";
    obtn.value = "复位";
    onoff = 1;
    clearInterval(t);
    } else {
    num--;
    }
    obox.innerHTML=num;
    }, 1000)
    obtn.value="暂停";
    onoff=2
    //当倒计时结束之后,对其进行复位,恢复到初始状态
    }else if(onoff==1){
    obox.innerHTML=star;
    num=star;
    obtn.value="开始";
    onoff=0;
    //暂停事件,当onoff=2时,暂停事件
    }else if(onoff==2){
    clearInterval(t);
    obtn.value="继续"
    onoff=0;
    }
    }
    </script>
    </html>

  • 相关阅读:
    你做的页面有哪些浏览器测试过?这些浏览器的内核分别是什么?
    响应式布局
    Promise(二)
    Promise(一)
    同步和异步的自我理解
    null 与 undefined 区别
    python pandas 数据处理
    【python】list、tuple、dict、set、dataframe、narray、series之间的区别
    时间序列常用模型
    Linux系统学习笔记
  • 原文地址:https://www.cnblogs.com/hupeng1996/p/11403514.html
Copyright © 2011-2022 走看看