前端开发者杭州前端开发需要数据交互 前端开发需要逻辑 web前端开发进阶需要美工
用设置好的时间减去现在的时间，就刚好形成时间倒计时
html 代码片段
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
</head>
<body>
距xxx还有<span id=”span” style=”font-size:30px;”></span>
<script>
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>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<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>
<script>
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
评论前必须登录！
注册