这道题是我在上js课程的时候，老师临时给我们出的一道题，虽然说这种小练习之前也要写过相关代码，但好像把它综合到一起，我就蒙圈了，哎~
实现页面：
目录
一、实现步骤详解：
1、设置秒杀结束时间
var endtime = new Date('2022-11-10 18:51:00' ), endseconds = endtime.getTime();或者：
// 设置据当前时间开始，秒杀的结束时间
//var endtime = new Date(), endseconds = endtime.getTime() + 60* 1000;2、声明变量保存剩余的时间
var d = h = m = s = 0;3、 设置定时器，实现限时秒杀效果
var id = setInterval(seckill, 1000);
function seckill() {
var nowtime = new Date(); // 获取当前时间4、 获取时间差，单位秒
var remaining = parseInt((endseconds - nowtime.getTime()) / 1000);5、判断秒杀是否过期
if (remaining > 0) {
d = parseInt(remaining / 86400); // 计算剩余天数（除以60*60*24取整，获取剩余的天数）
h = parseInt((remaining / 3600) % 24); // 计算剩余小时（除以60*60转换为小时，与24取模，获取剩余的小时）
m = parseInt((remaining / 60) % 60); // 计算剩余分钟（除以60转为分钟，与60取模，获取剩余的分钟）
s = parseInt(remaining % 60); // 计算剩余秒（与60取模，获取剩余的秒数）6、取消定时器
clearInterval(id); 7、将剩余的天、小时、分钟和秒显示到指定的网页中
document.getElementById('d').innerHTML = d + '天';
document.getElementById('h').innerHTML = h + '时';
document.getElementById('m').innerHTML = m + '分';
document.getElementById('s').innerHTML = s + '秒';二、完整代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>限时秒杀</title>
<style>
.box{margin:0 auto;position:relative;background:url(images/flash_sale.png);width:702px;height:378px;}
.box div{float:left;width:50px;height:50px;border:1px solid #ccc;margin-left:5px;line-height:50px;text-align: center;color:red;position:relative;top:260px;left:305px;}
</style>
</head>
<body>
<div class="box">
<div id="d"></div> <!-- 剩余的天数 -->
<div id="h"></div> <!-- 剩余的小时 -->
<div id="m"></div> <!-- 剩余的分钟 -->
<div id="s"></div> <!-- 剩余的秒数 -->
</div>
<script>
//设置秒杀结束时间
var endtime = new Date('2022-11-10 18:51:00' ), endseconds = endtime.getTime();
// 声明变量保存剩余的时间
var d = h = m = s = 0;
// 设置定时器，实现限时秒杀效果
var id = setInterval(seckill, 1000);
function seckill() {
var nowtime = new Date(); // 获取当前时间
// 获取时间差，单位秒
var remaining = parseInt((endseconds - nowtime.getTime()) / 1000);
// 判断秒杀是否过期
if (remaining > 0) {
d = parseInt(remaining / 86400); // 计算剩余天数（除以60*60*24取整，获取剩余的天数）
h = parseInt((remaining / 3600) % 24); // 计算剩余小时（除以60*60转换为小时，与24取模，获取剩余的小时）
m = parseInt((remaining / 60) % 60); // 计算剩余分钟（除以60转为分钟，与60取模，获取剩余的分钟）
s = parseInt(remaining % 60); // 计算剩余秒（与60取模，获取剩余的秒数）
// 统一利用两位数表示剩余的天、小时、分钟、秒
d = d < 10 ? '0' + d : d;
h = h < 10 ? '0' + h : h;
m = m < 10 ? '0' + m : m;
s = s < 10 ? '0' + s : s;
} else {
clearInterval(id); // 秒杀过期，取消定时器
d = h = m = s = '00';
}
// 将剩余的天、小时、分钟和秒显示到指定的网页中
document.getElementById('d').innerHTML = d + '天';
document.getElementById('h').innerHTML = h + '时';
document.getElementById('m').innerHTML = m + '分';
document.getElementById('s').innerHTML = s + '秒';
}
</script>
</body>
</html>还是要好好思考啊！！
2193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
