js 时间倒计时_前端开发者

杭州前端开发需要数据交互前端开发需要逻辑 web前端开发进阶需要美工

用设置好的时间减去现在的时间，就刚好形成时间倒计时
html 代码片段

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

距xxx还有<span id=”span” style=”font-size:30px;”></span>

var oSpan = document.getElementById(‘span’);

function myTime() {

var Time1 = new Date(); //当前时间

var Time2 = new Date(2016, 1, 7, 24, 0, 0); //倒计时时间

var t = Math.floor((Time2 – Time1) / 1000);

// 天：Math.floor(t/86400)

// 时：Math.floor(t%86400/3600)

// 分：Math.floor(t%86400%3600/60)

// 秒：t%60

var str = Math.floor(t / 86400) + ‘天’ + toTwo(Math.floor(t % 86400 / 3600)) + ‘时’ + toTwo(Math.floor(t % 86400 % 3600 / 60)) + ‘分’ + toTwo(t % 60) + ‘秒’;

oSpan.innerHTML = str;

}

myTime();

function toTwo(n) { //判断当’时分秒’为个位数时，需要前面加0，如01

return n < 10 ? ‘0’ + n : ” + n;

}

setInterval(function () {

myTime();

}, 1000);

</script>

</body>

</html>

商城倒计时抢购活动
html 代码片段

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#box{ padding:10px;}

#boximg{ width: 120px; height: 120px; display: block; margin-bottom: 10px;}

#boxspan{padding:3px8px; background:#dbdbdb; color: #929292;}

#box.on{ padding:3px8px; background:#ff8400; color: #fff; cursor:pointer;}

</style>

</head>

<body>

请设置活动结束时间：<input type=”text” value=”January 28,2016 17:30:00″><input type=”button” value=”活动开始”><br />

至活动结束还有：<span id=”span2″></span>

<div id=”box”><span id=”span”>活动未开始</span></div>

var Inp = document.getElementsByTagName(‘input’);

var oSpan = document.getElementById(‘span’);

var oSpan2 = document.getElementById(‘span2’);

var oBox = document.getElementById(‘box’);

var str = ”;

var Timer = null;

Inp[1].onclick = function () {

Timer = setInterval(function () {

myTime();

}, 1000);

}

function myTime() {

Time1 = new Date();

Time2 = new Date(Inp[0].value);

t = Math.floor((Time2 – Time1) / 1000);

oSpan.className = ‘on’;

oSpan.innerHTML = ‘立即购买’;

if (t > -1) {

str = Math.floor(t / 86400) + ‘天’ + toTwo(Math.floor(t % 86400 / 3600)) + ‘时’ + toTwo(Math.floor(t % 86400 % 3600 / 60)) + ‘分’ + toTwo(t % 60) + ‘秒’;

oSpan2.innerHTML = str;

} else {

clearInterval(Timer);

oSpan.className = ”;

oSpan.innerHTML = ‘已结束’;

}

function toTwo(n) { //判断当’时分秒’为个位数时，需要前面加0，如01

return n < 10 ? ‘0’ + n : ” + n;

}

</script>

<!–

一月：January

二月：February

三月：March

四月：April

五月：May

六月：June

七月：July

八月：August

九月：September

十月：October

十一月：November

十二月：December –>

</body>

</html>

前端开发需要掌握的技术有哪些 web前端开发需要哪些技术前端开发所需要的环境

» 本文来自：前端开发者 » 《js 时间倒计时》

» 本文链接地址：https://www.rokub.com/5886.html

» 您也可以订阅本站：https://www.rokub.com

js 时间倒计时

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

回顶部

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

回顶部

评论抢沙发