JavaScript实现“双11”秒杀，你也可以 |
您所在的位置：网站首页 › 双十一文字设计 › JavaScript实现“双11”秒杀，你也可以 |
JavaScript实现“双11”秒杀，你也可以
|
📜个人简介 ⭐️个人主页：微风洋洋🙋♂️ 🍑博客领域：编程基础,后端 🍅写作风格：干货,干货,还是tmd的干货 🌸精选专栏：【JavaScript】 🚀支持洋锅：点赞👍、收藏⭐、留言💬 好久不见，甚是想念！ 大家好！我是微风洋洋 每年的“双11”啊，都是大家的剁手节。大家都在晚上12点，捧着手机看着倒计时，在他倒数到0的时候疯狂点击下单。可是你有没想过限时秒杀是怎么实现的呢？简单点倒计时是怎么实现的呢？ 今天，洋锅就给你揭秘，看了今天这篇文章，你也可以给自己来个“限时秒杀” 文章目录 【案例】限时秒杀一、全局作用域二、弹出对话框和窗口🌴prompt()方法🌴confirm()方法🌴open()方法 三、窗口位置和大小四、框架操作五、定时器 【案例】限时秒杀
代码实现思路： ① 设计限时秒杀页面。 ② 指定限时秒杀的结束时间，及其对应的毫秒数。 ③ 获取当前时间的毫秒数。 ④ 计算当前与秒杀结束的时间差，大于0，计算剩余的天时分秒；否则结束秒杀。 ⑤ 利用定时器完成秒杀的倒计时功能。 ⑥ 利用两位数字显示秒杀的时间。 代码实现👇 限时秒杀 .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;} // 设置秒杀结束时间 // var endtime = new Date('2017-11-10 18:51:00'), endseconds = endtime.getTime(); // 设置据当前时间开始，秒杀的结束时间 var endtime = new Date(), endseconds = endtime.getTime() + 60 * 1000; // 声明变量保存剩余的时间 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 |
【本文地址】