JavaScript限时秒杀

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></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('2021-10-22 18:51:59'),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){//判断秒杀是否过期//计算剩余天数（除以60*60*24取整，获取剩余的天数）d=parseInt(remaining / 86400);//计算剩余小时（除以60*60转换为小时，与24小时取模，获取剩余的小时）h=parseInt((remaining / 3600) % 24);//计算剩余分钟（除以60转为分钟，与60取模，获取剩余的分钟）m=parseInt((remaining / 60) % 60);//计算剩余秒（与60取模，获取剩余的秒数）s=parseInt(remaining % 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:限时秒杀
限时秒杀包含天.时.分.秒. <body><div>距离本场秒杀结束还剩:<input id = 'd'><input id = 'h'><inp ...
盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小
前言今天来给大家盘点三个JavaScript案例,分别是实现限时秒杀.定时跳转.改变盒子大小案例,一起来看看吧! 一.实现限时秒杀案例 1.在淘宝网中,商家为了促销经常搞一些活动,例如限时秒杀是常见 ...
JavaScript网页特效-限时秒杀
限时秒杀是网络商家在某一预定的时间里,大幅度降低活动商品的价格,买家只要在这个时间里成功拍得此商品,便可以用超低的价格买到原本很昂贵的物品的一种营销活动.限时秒杀短时效的限定会给予用户更强烈的紧迫感, ...
杨老师课堂之JavaScript定时器_农夫山泉限时秒杀案例
预览效果图: 使用到的知识点: 定时器 setInterval(函数,毫秒):在指定的毫秒数后调用函数或执行一段代码取消定时器 clearInterval:取消由setInterval设置的定时器 ...
【JavaScript实训】-- 限时秒杀
这道题是我在上js课程的时候,老师临时给我们出的一道题,虽然说这种小练习之前也要写过相关代码,但好像把它综合到一起,我就蒙圈了,哎~ 实现页面: 目录一.实现步骤详解: 1.设置秒杀结束时间 2.声 ...
web综合限时秒杀效果的制作
第1关:限时秒杀效果图片渲染 TOC] 图1如下链接为https://www.educoder.net/api/attachments/2089667 图2如下链接为https://www.edu ...
Web综合应用案例-限时秒杀效果的制作
第1关:限时秒杀效果图片渲染图1如下链接为https://data.educoder.net/api/attachments/2089667 图2如下链接为https://data.educod ...
Js 限时秒杀【倒计时】【案例】
限时秒杀限时秒杀(时间倒计时的操作)我们在生活中经常能见到,比如超市抽奖活动,比如某宝商城中某商品限时出售倒计时,再比如电影情节中定时炸弹,是不是来画面感了,铁铁- 那么这种定时炸弹,(⊙o⊙)-不 ...
educoder头歌Web实训 web课——综合应用案例：限时秒杀效果的制作
educoder头歌Web实训太原理工web课--综合应用案例:动态焦点图页面的制作[全网更新最快]_玛卡巴卡的博客-CSDN博客第1关:限时秒杀效果图片渲染 [TOC] 图1如下链接为htt ...

JavaScript限时秒杀

JavaScript限时秒杀相关推荐

最新文章

热门文章