zoukankan      html  css  js  c++  java
  • js 简单的倒计时

    js 简单的倒计时

    <html>
    <head>
    <meta charset="UTF-8">
    <title>简单倒计时</title>
    <style>
        #box{
             100px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
            font-size: 20px;
            line-height: 100px;
            margin-bottom: 10px;
        }
    </style>
    </head>
    <body>
        <div id="box">23</div>
        <input type="button" value="开始" id="start">
        <input type="button" value="暂停" id="end">
    </body>
    <script>
        var obox=document.getElementById("box");
        var oS=document.getElementById("start");
        var oE=document.getElementById("end")
        var t;  // 把计数器的输出定义为全局变量
        //绑定开始的点击事件
         oS.onclick=function(){
             //先清除计时器(清除的是上一个(历史计时器))
             clearInterval(t)
             //开启计时器
             t=setInterval(function(){
                 //判断小于0时,计时器停止
                 if(obox.innerHTML<=0){
                     clearInterval(t)
                 }else{
                     //否则计时器一秒减1
                     obox.innerHTML--;
                 }
             },1000)
         }
         //绑定暂停的点击事件
         oE.onclick=function(){
             clearInterval(t)
         }
    </script>
    </html>
    请用今天的努力,让明天没有遗憾。
  • 相关阅读:
    HashMap深度解析(二)(转)
    HashMap深度解析(一)(转)
    GeoHash核心原理解析(转)
    spring boot 策略模式实践
    Java中CAS详解(转)
    springMVC请求流程详解(转)
    7 vi 编辑器
    Linux 命令行快捷键
    Java
    3 Eclipse 查看不了源码
  • 原文地址:https://www.cnblogs.com/cupid10/p/15617779.html
Copyright © 2011-2022 走看看