zoukankan      html  css  js  c++  java
  • js实现100秒倒计时和简易时钟

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>100s倒计时</title>

    <style>

    body,div{margin:0;padding:0;}

    body{color:#fff;font:16px/1.5 5fae8f6f96c59ed1;}

    #countdown{300px;text-align:center;background:#000;margin:10px auto;padding:20px 0;}

    input{border:0;283px;height:50px;cursor:pointer;margin-top:20px;background:url(
    ) no-repeat;}

    input.cancel{background-position:0 -50px;}

    span{color:#000;80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}

        </style>

        <script>

        window.onload = function(){

        var oCount = document.getElementById('countdown'),

           oInput = oCount.getElementsByTagName('input')[0],

           aSpan = oCount.getElementsByTagName('span'),

           timer = null;

        oInput.addEventListener('click',function(){

        this.className == ''?(timer = setInterval(updateTime,1000)):clearInterval(timer);

        this.className = this.className === 'cancel'?'':'cancel';

        },false);

        function format(a){

        return a.toString().replace(/^(d)$/,'0$1');

        }

        function updateTime(){

        //console.log(aSpan[0].innerHTML);

        var remain = parseInt(aSpan[0].innerHTML.replace(/^0/,''))*60+parseInt(aSpan[1].innerHTML.replace(/^0/,''));

        if (remain <= 0) {

        clearInterval(timer);

        return;

        }

        remain--;

        aSpan[0].innerHTML = format(parseInt(remain/60));

        aSpan[1].innerHTML = format(remain%60);

        }

        }

        </script>

    </head>

    <body>

    <div id="countdown">

    <span>01</span>分钟<span>40</span>秒

    <input type="button" value="" />

    </div>

    </body>

    </html>

     欢迎加入618237474,找群主私聊,送海量学习资料免费送

  • 相关阅读:
    Python Django 之 Template 模板语言简介
    Prometheus
    MySQL 存储过程中执行DDL
    Mysql 存储过程-转载
    Mysql 时间类型整理
    MySQL 5.7 分区表性能下降的案例分析
    Mysql 分区表-分区操作
    Mysql 中Left/Right join on后面and和where条件查询的差异-Mysql SQL运算符是有优先级
    MySQL出现Waiting for table metadata lock的原因以及解决方法
    Python 字符串转换为字典(String to Dict)
  • 原文地址:https://www.cnblogs.com/xsns/p/6681049.html
Copyright © 2011-2022 走看看