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>

  • 相关阅读:
    js判断undefined类型
    【转】 C#操作FTP
    FTP
    Failed to execute request because the App-Domain could not be created. Error: 0x80070002 系统找不到指定的文件。
    [转]C# 安装与部署
    ASP.NET 实现重启系统或关机
    ORA-00257: archiver error. Connect internal only, until freed 错误的处理方法
    C#取整函数Math.Round、Math.Ceiling和Math.Floor
    Oracle 更改字符集 更改后之前的中文全成乱码了
    oracle
  • 原文地址:https://www.cnblogs.com/hupeng1996/p/11403514.html
Copyright © 2011-2022 走看看