这道题是我在上js课程的时候，老师临时给我们出的一道题，虽然说这种小练习之前也要写过相关代码，但好像把它综合到一起，我就蒙圈了，哎~

实现页面：

一、实现步骤详解：

1、设置秒杀结束时间

2、声明变量保存剩余的时间

3、设置定时器，实现限时秒杀效果

4、获取时间差，单位秒

5、判断秒杀是否过期

6、取消定时器

7、将剩余的天、小时、分钟和秒显示到指定的网页中

二、完整代码实现：

一、实现步骤详解：

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>

还是要好好思考啊！！

【JavaScript实训】-- 限时秒杀相关推荐

JavaScript网页特效-限时秒杀
限时秒杀是网络商家在某一预定的时间里,大幅度降低活动商品的价格,买家只要在这个时间里成功拍得此商品,便可以用超低的价格买到原本很昂贵的物品的一种营销活动.限时秒杀短时效的限定会给予用户更强烈的紧迫感, ...
盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小
前言今天来给大家盘点三个JavaScript案例,分别是实现限时秒杀.定时跳转.改变盒子大小案例,一起来看看吧! 一.实现限时秒杀案例 1.在淘宝网中,商家为了促销经常搞一些活动,例如限时秒杀是常见 ...
【JavaScript实训】调试程序--根据时间问好
目录一.题目要求: 二.实训要点: 三.实现思路和关键代码: 具体解释步骤: 四.完整代码与解释: 一.题目要求: (1).当输入当前时间值为6~12时,页面显示"上午好!欢迎来到一只傻猪 ...
[JavaScript实训] -- 制作简易的购物车页面
目录一.训练要点: 二.题目需求说明: 三.实现思路及关键代码: 四.完整代码实现: 一.训练要点: 1.使用close()方法关闭窗口: 2.使用confirm()方法进行信息确认: 3.使用al ...
大二学生JavaScript实训大作业——动漫秦时明月7页期末网页制作 HTML+CSS+JavaScript 网页设计实例企业网站制作
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
大二学生JavaScript实训大作业——动漫秦时明月7页期末网页制作 html css javascript 网页设计实例企业网站制作
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
java script实训心得_javascript实训报告总结.docx
javascript实训报告总结 Javascript实训报告专业名称:计算机应用技术班级名称: 学员姓名: 指导教师:_______________ 完成日期: 一.简介: Web标准并不是一个 ...
educoder头歌Web实训 web课——综合应用案例：限时秒杀效果的制作
educoder头歌Web实训太原理工web课--综合应用案例:动态焦点图页面的制作[全网更新最快]_玛卡巴卡的博客-CSDN博客第1关:限时秒杀效果图片渲染 [TOC] 图1如下链接为htt ...
web前端实训作业 html+css+javascript 水果网页设计实例企业网站制作
web前端实训作业 html+css+javascript 仿果然新鲜水果(6页面)网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无 ...

【JavaScript实训】-- 限时秒杀

一、实现步骤详解：

1、设置秒杀结束时间

2、声明变量保存剩余的时间

3、设置定时器，实现限时秒杀效果

4、获取时间差，单位秒

5、判断秒杀是否过期

6、取消定时器

7、将剩余的天、小时、分钟和秒显示到指定的网页中

二、完整代码实现：

【JavaScript实训】-- 限时秒杀相关推荐

最新文章

热门文章

【JavaScript实训】-- 限时秒杀

一、实现步骤详解：

1、设置秒杀结束时间

2、声明变量保存剩余的时间

3、 设置定时器，实现限时秒杀效果

4、 获取时间差，单位秒

5、判断秒杀是否过期

6、取消定时器

7、将剩余的天、小时、分钟和秒显示到指定的网页中

二、完整代码实现：

【JavaScript实训】-- 限时秒杀相关推荐

最新文章

热门文章

3、设置定时器，实现限时秒杀效果

4、获取时间差，单位秒