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

倒计时

}#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;

}

function$(el) {if(typeof(el)== 'string') {return(document.getElementById(el));

}return(el);

}functionfillZero(num, digit) {varstr= '' +num;if(str.length

str= '0' +str;

}returnstr;

}

window.οnlοad= function() {varoDiv1=$('time');varaInput=oDiv1.getElementsByTagName('input');varoYear=aInput[0];//年

varoMonth=aInput[1];//月

varoDay=aInput[2]//日

varoDiv2=$('start');varaSpan=oDiv2.getElementsByTagName('span');varsTxtDay=aSpan[0];//天

varsTxtHour=aSpan[1]//小时

varsTxtMin=aSpan[2]//分

varsTxtSec=aSpan[3]//秒

varoTxtTarget=document.getElementsByTagName('b')[0];vartimer= null;

$('btn1').οnclick= function() {

timer=setInterval(updateTime,1000);

updateTime();

}

$('btn2').οnclick= function() {

clearInterval(timer);

}functionupdateTime() {varsYear=Math.abs(oYear.value);varsMonth=Math.abs(oMonth.value);varsDay=Math.abs(oDay.value);if(sMonth> 12 ||sDay> 31){

clearInterval(timer);

alert('你又调皮了');return;

}

oTxtTarget.innerHTML=sYear+ '年' +sMonth+ '月' +sDay+ '日';varoEndDate= newDate(sYear, (sMonth- 1), sDay);varoNowDate= newDate();variRemain= 0;

iRemain=parseInt((oEndDate.getTime()-oNowDate.getTime())/ 1000);if(iRemain<= 0) {//判断开始时间是否小于或等于今天

clearInterval(timer);

iRemain= 0;

alert('请输入大于今天的时间');

}variDay=parseInt(iRemain/ 86400);//剩余天数

iRemain%= 86400;variHour=parseInt(iRemain/ 3600);//剩余小时

iRemain%= 3600;variMin=parseInt(iRemain/ 60);//剩余分钟

iRemain%= 60;variSec=iRemain;//剩余秒

sTxtDay.innerHTML=fillZero(iDay,2);

sTxtHour.innerHTML=fillZero(iHour,2);

sTxtMin.innerHTML=fillZero(iMin,2);

sTxtSec.innerHTML=fillZero(iSec,2);

}

}

年:月:日:

开始倒计时中止倒计时

如今距离:2017 年 1 月 27 日 还剩

00天00小时00分00秒

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值