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>
    
    请用今天的努力,让明天没有遗憾。
  • 相关阅读:
    webstorm打开项目找不到git
    Redis 下载与安装(Windows版)
    element-UI el-table样式(去边框和滚动条样式)
    MVVM
    HTTP
    TCP/IP
    vue双向绑定
    Vue组件化原理
    JavaScript
    css中可继承与不可继承属性
  • 原文地址:https://www.cnblogs.com/cupid10/p/12874707.html
Copyright © 2011-2022 走看看