您正在使用IPV4(3.236.253.192)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情       【腾讯云】云产品限时秒杀,爆款1核2G云服务      
虚位以待
2021年 冬至节 56
2021年 圣诞节 60
2022年 元 旦 67
2022年 春 节 98
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    使用JS显示倒计时数字时钟效果
    内容摘要: !DOCTYPEhtmlPUBLIC'-//W3C//DTDXHTML1.0Transitional//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'htmlxmlns='http://www.w3.org/1999/xhtml'headmetahttp-equiv='Content-......
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <htmlxmlns="http://www.w3.org/1999/xhtml">

    <head>

    <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

    <title>javascript实现的倒计时时钟</title>

    <style>

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

    body{color:#fff;font:16px/1.5\5fae\8f6f\96c5\9ed1;}

    #countdown{width:300px;text-align:center;background:#1a1a1a;margin:10pxauto;padding:20px0;}

    input{border:0;width:283px;height:50px;cursor:pointer;margin-top:20px;background:url(https://www.jb51.net/jscss/demoimg/201210/btn-1.png)no-repeat;}

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

    span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2pxsolid#b4b4b4;margin:010px;padding:010px;}

    </style>

    <script>

    window.onload=function()

    {

    varoCountDown=document.getElementById("countdown");

    varaInput=oCountDown.getElementsByTagName("input")[0];

    vartimer=null;

    aInput.onclick=function()

    {

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

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

    };

    functionformat(a)

    {

    returna.toString().replace(/^(\d)$/,'0$1')

    }

    functionupdateTime()

    {

    varaSpan=oCountDown.getElementsByTagName("span");

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

    if(oRemain<=0)

    {

    clearInterval(timer);

    return

    }

    oRemain--;

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

    oRemain%=60;

    aSpan[1].innerHTML=format(parseInt(oRemain));

    }

    }

    </script>

    </head>

    <body>

    <divid="countdown">

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

    <inputtype="button"value=""/>

    </div>

    </body>

    </html>

    版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
    上一篇:JavaScript实现下拉列表选择框 下一篇:JS实现简单计数器
    发布日期:2021/10/11
    手机扫二维码直达本页
    发布时间:15:14:34
    点击:207
    录入:壹家怡园
    相关文章
    Baidu
    YiJiaCMS 6.0.6.10688 Build 21.10.13(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    ©2000-2021