• 时分秒倒计时的js实现


    示例:

    剩余天数:08天02事02分02秒

    html代码:

    <div id="timer" data-timer="20160628140203" style="font-size:20px">  
        剩余天数:  
        <span id="timer_d">0</span><span id="timer_h">0</span><span id="timer_m">0</span><span id="timer_s">0</span></div> 

    js代码:

    timer('timer');//调用方法  
              
    //时分秒倒计时方法  
    function timer(eleId){  
        var element=document.getElementById(eleId);  
        if(element){  
            endTimer=element.getAttribute('data-timer');  
            var endTime=new Date(parseInt(endTimer.substr(0,4), 10),parseInt(endTimer.substr(4,2), 10),parseInt(endTimer.substr(6,2), 10),parseInt(endTimer.substr(8,2), 10),parseInt(endTimer.substr(10,2), 10),parseInt(endTimer.substr(12,2), 10));  
            var endTimeMonth=endTime.getMonth()-1;  
            endTime.setMonth(endTimeMonth);  
            var ts = endTime - new Date();  
            if(ts>0){  
                var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);  
                var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);  
                var mm = parseInt(ts / 1000 / 60 % 60, 10);  
                var ss = parseInt(ts / 1000 % 60, 10);  
                dd = dd<10?("0" + dd):dd;   //
                hh = hh<10?("0" + hh):hh;   //
                mm = mm<10?("0" + mm):mm;   //
                ss = ss<10?("0" + ss):ss;   //
                document.getElementById("timer_d").innerHTML=dd;  
                document.getElementById("timer_h").innerHTML=hh;  
                document.getElementById("timer_m").innerHTML=mm;  
                document.getElementById("timer_s").innerHTML=ss;  
                setTimeout(function(){timer(eleId);},1000);  
            }else{  
                document.getElementById("timer_d").innerHTML=0;  
                document.getElementById("timer_h").innerHTML=0;  
                document.getElementById("timer_m").innerHTML=0;  
                document.getElementById("timer_s").innerHTML=0;  
            }  
        }  
    }

    原文地址:http://blog.csdn.net/xw505501936/article/details/51554835

  • 相关阅读:
    【C++模版之旅】静态多态的讨论
    UBI(unsorted block image )块管理
    CSS多级数字序号的目录列表(类似3.3.1.这样的列表序号)
    MyBatis映射文件的resultMap如何做表关联
    爱上演讲的程序猿
    PHP中文汉字验证码
    设计模式之(二)Adapter模式
    sphinx全文检索之PHP使用教程
    [置顶] 【cocos2d-x入门实战】微信飞机大战之十三:游戏场景过渡
    计算机的族谱
  • 原文地址:https://www.cnblogs.com/laq627/p/8472677.html
Copyright © 2020-2023  润新知