MediaWiki:Timer.js

/*--倒计时--*/
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() {
	$('.timer').html('<div class="container"><div class="row clearfix"><div class="col-md-12 column"><h1>倒计时计算器</h1><br><div class="time">年: <input type="number" min="2020" max="2099" value="2020" />月： <input type="number" min="1" max="12" value="8" />日：<input type="number" min="1" max="31" value="18" /><br>时： <input type="number" min="0" max="24" value="0" />分: <input type="number" min="0" max="60" value="0" />秒: <input type="number" min="0" max="60" value="0" /> <p>此次活动为：<input type="text" placeholder= "我是活动名称" onfocus="cls()" onblur="res()" style="color:gray; font-size: 12px;" onkeyprese="pre(this)"/> </p><p>结束时间为:<b>2020 年 8月 18 日 0 时 0 分</b> </p><div class="start" style="color:red;"><p>距离活动结束时间还有:</p><span>00</span>天<span>00</span>小时<br><span>00</span>分<br><span>00</span>秒<br></div><p><button type="button" class="btn" onclick="call()">计算</button></p></div>');
    var oDiv1 = $('time');
    var sInput = oDiv1.getElementsByTagName('input');
    var oYear = sInput[0]; 
    var oMonth = sInput[1]; 
    var oDay = sInput[2] 
    var oHour = sInput[3]; 
    var oMinute = sInput[4]; 
    var oSecond = sInput[5] 
    var oDiv2 = $('start');
    var pSpan = oDiv2.getElementsByTagName('span');
    var sTxtDay = pSpan[0]; 
    var sTxtHour = pSpan[1] 
    var sTxtMin = pSpan[2] 
    var sTxtSec = pSpan[3] 
    var oTxtTarget = document.getElementsByTagName('b')[0];
    var timer = null;
    $('btn').onclick = function() {
        timer = setInterval(updateTime, 1000);
        updateTime();
    }

    function updateTime() {
    //var oDiv2 = $('start');
        var sYear = Math.abs(oYear.value);
        var sMonth = Math.abs(oMonth.value);
        var sDay = Math.abs(oDay.value);
        var sHour = Math.abs(oHour.value);
        var sMinute = Math.abs(oMinute.value);
        var sSecond = Math.abs(oSecond.value);
        if(sMonth > 12 || sDay > 31 || sHour > 24 || sMinute > 60 || sSecond > 60){
            clearInterval(timer);
            alert('输入错误');
            return;
        }
        oTxtTarget.innerHTML = sYear + ' 年 ' + sMonth + ' 月 ' + sDay + ' 日 ' + sHour + '时' + sMinute+ '分' +sSecond + '秒';
        var oEndDate = new Date(sYear, (sMonth - 1), sDay, sHour, sMinute, sSecond);
        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; 

        if(iDay<3) { document.getElementById('start').style.color = "red";}
        else{
            if(iDay<7) { document.getElementById('start').style.color= "orange";}
            else{document.getElementById('start').style.color= "green"}
        }

        sTxtDay.innerHTML = fillZero(iDay, 2);
        sTxtHour.innerHTML = fillZero(iHour, 2);
        sTxtMin.innerHTML = fillZero(iMin, 2);
        sTxtSec.innerHTML = fillZero(iSec, 2);
    }