html+css+js如何实现倒计时效果?(附代码)

html+css+js如何实现倒计时效果?下面本篇文章通过示例来介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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

效果图:

1.gif

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

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

<!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="2020" max="2020" value="2020" /> 
月: <input type="number" min="1" max="12" value="4" /> 
日: <input type="number" min="1" max="31" value="1" />
<p><button id="btn1">开始倒计时</button><button id="btn2">停止倒计时</button></p>
<p>现在距离:<b>2020 年 4 月 1 日</b> 还剩 </p>
<div id="start">
<span>00</span>天
<span>00</span>小时
<span>00</span>分
<span>00</span>秒
</div>
</div>
</body>

</html>

更多web前端知识,请查阅 HTML中文网 !!

以上就是html+css+js如何实现倒计时效果?(附代码)的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏