• 使用html+css+js实现倒计时,开启你痛苦的倒计时吧


     使用html+css+js实现倒计时,开启你痛苦的倒计时吧

      效果图:

     

     这是我痛苦的倒计时,呜呜呜

     好啦,再痛苦还是要分享代码,代码如下,复制即可使用:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>倒计时</title>
            <style>
                #time {
                    width: 350px;
                    height: 200px;
                    margin: 100px auto;
                }
                
                #time input {
                    margin: 20px auto;
                    text-align: center;
                    border-radius: 10px;
                }
                
                input::-webkit-outer-spin-button,
                input::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                }
                
                button {
                    margin: 0 0 0 35px;
                    border-radius: 10px;
                }
                
                #start {
                    font-size: 1.55em;
                }
            </style>
            <script>
                function $(el) {
                    if(typeof(el) == 'string') {
                        return(document.getElementById(el));
                    }
                    return(el);
                }
    
                function fillZero(num, digit) {
                    var str = '' + num;
                    if(str.length < digit) {
                        str = '0' + str;
                    }
                    return str;
                }
                window.onload = function() {
                    var oDiv1 = $('time');
                    var aInput = oDiv1.getElementsByTagName('input');
                    var oYear = aInput[0]; //
                    var oMonth = aInput[1]; //
                    var oDay = aInput[2] //
                    var oDiv2 = $('start');
                    var aSpan = oDiv2.getElementsByTagName('span');
                    var sTxtDay = aSpan[0]; //
                    var sTxtHour = aSpan[1] //小时
                    var sTxtMin = aSpan[2] //
                    var sTxtSec = aSpan[3] //
                    var oTxtTarget = document.getElementsByTagName('b')[0];
                    var timer = null;
                    $('btn1').onclick = function() {
                        timer = setInterval(updateTime, 1000);
                        updateTime();
                    }
                    $('btn2').onclick = function() {
                        clearInterval(timer);
                    }
    
                    function updateTime() {
                        
                        var sYear = Math.abs(oYear.value);
                        var sMonth = Math.abs(oMonth.value);
                        var sDay = Math.abs(oDay.value);
                        if(sMonth > 12 || sDay > 31){
                            clearInterval(timer);
                            alert('你又调皮了');
                            return;
                        }
                        oTxtTarget.innerHTML = sYear + '' + sMonth + '' + sDay + '';
                        var oEndDate = new Date(sYear, (sMonth - 1), sDay);
                        var oNowDate = new Date();
                        var iRemain = 0;
                        iRemain = parseInt((oEndDate.getTime() - oNowDate.getTime()) / 1000);
                        if(iRemain <= 0) { //判断开始时间是否小于或等于今天
                            clearInterval(timer);
                            iRemain = 0;
                            alert('请输入大于今天的时间');
                        }
                        var iDay = parseInt(iRemain / 86400); //剩余天数
    
                        iRemain %= 86400;
                        var iHour = parseInt(iRemain / 3600); //剩余小时
    
                        iRemain %= 3600;
                        var iMin = parseInt(iRemain / 60); //剩余分钟
    
                        iRemain %= 60;
                        var iSec = iRemain; //剩余秒
    
                        sTxtDay.innerHTML = fillZero(iDay, 2);
                        sTxtHour.innerHTML = fillZero(iHour, 2);
                        sTxtMin.innerHTML = fillZero(iMin, 2);
                        sTxtSec.innerHTML = fillZero(iSec, 2);
                    }
                    
    
                }
            </script>
        </head>
    
        <body>
            <div id="time">
                年: <input type="number" min="2017" max="2017" value="2017" /> 
                月: <input type="number" min="1" max="12" value="1" /> 
                日: <input type="number" min="1" max="31" value="27" />
                <p><button id="btn1">开始倒计时</button><button id="btn2">停止倒计时</button></p>
                <p>现在距离:<b>2017 年 1 月 27 日</b> 还剩 </p>
                <div id="start">
                    <span>00</span><span>00</span>小时
                    <span>00</span><span>00</span></div>
            </div>
        </body>
    
    </html>

     如果您有更好的方法或更多的功能,可以和大家一起分享哦,如有错误,欢迎联系我改正,非常感谢!!!

  • 相关阅读:
    Jmeter之八大可执行元件及执行顺序
    Windows系统下查看某一进程下所有线程的dos命令
    (转)WebSocket的原理
    DVWA的安装
    BurpSuite+SQLmap的一种另类扫描
    (转)sqlmap用户手册
    HTTP缓存&代理
    使用python实现两个文件夹里文件的对比(包含内容的对比)
    mapreduce-实现多表关联
    mapreduce-实现单表关联
  • 原文地址:https://www.cnblogs.com/yidaixiaohui/p/8447058.html
Copyright © 2020-2023  润新知