杨老师课堂之JavaScript定时器限时抢购秒杀商品案例
预览效果图:
使用到的知识点:
定时器 setInterval(函数,毫秒):在指定的毫秒数后调用函数或执行一段代码
取消定时器 clearInterval:取消由setInterval设置的定时器
函数(日期函数、parseInt函数)
parseInt()函数 :可解析一个字符串,并返回一个整数
示例代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 需求: 电子商务网站中,商家为了促销商品而策划一些活动,刺激消费者进行盲目消费 限时秒杀就是其中一种手段。 本次我们模拟的商品是 农夫山泉限时秒杀抢购 --> <title>农夫山泉限时秒杀</title> <!--CSS代码:--> <style type="text/css"> .box{ /*外围的大盒子样式*/ width: 702px;/*宽度702像素*/ height: 378px;/*高度378像素*/ background: url(../img/flash_sale.png);/*背景图片*/ margin: 0 auto;/*上下为0 水平居中*/ } .box div{ /*外围的大盒子内部的小盒子样式*/ width: 50px; /*宽度50像素*/ height: 50px;/*高度50像素*/ border: 1px solid darkgray;/*边界线1像素 实线 浅灰色*/ position: relative; /*使用相对定位*/ top: 260px; /*相对定位顶部距离260像素*/ float: left; /*使小盒子左浮动*/ left:305px ; /*相对定位左侧距离305像素*/ margin-left: 5px; /*两个小盒子之间空出5px*/ color: red; /*字体颜色为红色*/ text-align: center; /*字体居中显示*/ line-height: 50px; /*字体行高50像素*/ } </style> </head> <body> <!--外围的大盒子--> <div class="box"> <!--剩余的天数--> <div id="d"></div> <!--剩余的小时--> <div id="h"></div> <!--剩余的分钟--> <div id="m"></div> <!--剩余的秒数--> <div id="s"></div> </div> </body> </html> <!--JavaScript代码:--> <script type="text/javascript"> //设置秒杀结束时间 var endTime = new Date("2018-05-18 09:29:00"); //把年月日时分秒的时间转换成为毫秒数 endSeconds = endTime.getTime();//结束时间的毫秒数 //定义变量 天数 小时 分钟 秒数 var d = h = m = s = 0; //设置定时器 实现一个秒杀效果 var timer = setInterval(qiang,1000); function qiang(){ // 获取当前系统时间 var nowTime = new Date(); // 获取当前时间差---nowTime.getTime()现在时间的毫秒数 var remain = parseInt((endSeconds-nowTime.getTime())/1000); //判断秒杀是否过期 if(remain>0){ //1.计算剩余天数 (除以60*60*24 取整数 获取剩余天数) d = parseInt(remain/86400) //2.计算剩余小时(除以60*60 转换成为小时了 与24进行取模 获取剩余小时) h = parseInt((remain/3600) % 24); //3.计算剩余分钟(除以60 转换成为分钟了 与60进行取模 获取剩余分钟) m = parseInt((remain/60) % 60); //4.计算剩余秒数(与60进行取模 获取剩余秒数) s = parseInt((remain) % 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(timer); 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>
图片素材
作者: 杨校
出处: https://blog.csdn.net/kese7952
分享是快乐的,也见证了个人成长历程,文章大多都是工作经验总结以及平时学习积累,基于自身认知不足之处在所难免,也请大家指正,共同进步。
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出, 如有问题, 可邮件(397583050@qq.com)咨询。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
杨老师课堂之JavaScript定时器_农夫山泉限时秒杀案例
预览效果图: 使用到的知识点: 定时器 setInterval(函数,毫秒):在指定的毫秒数后调用函数或执行一段代码 取消定时器 clearInterval:取消由setInterval设置的定时器 函数(日期函数、parseInt函数) parseInt()函数 :可解析一个字符串,并返回一个整数 示例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 需求: 电子商务网站中,商家为了促销商品而策划一些活动,刺激消费者进行盲目消费 限时秒杀就是其中一种手段。 本次我们模拟的商品是 农夫山泉限时秒杀抢购 --> <title>农夫山泉限时秒杀</title> <!--CSS代码:--> <style type="text/css"> .box{ /*外围的大盒子样式*/ width: 702px;/*宽度702像素*/ height: 378px;/*高度378像素*/ background: url(.....
- 下一篇
C# 插入、删除Excel分页符
引言 对Excel表格设置分页对我们预览、打印文档时是很方便的,特别是一些包含很多复杂数据的、不规则的表格,为保证打印时每一页的排版美观性或者数据的前后连接的完整性,此时的分页符就发挥了极大的作用。因此,本文将介绍C#设置Excel分页的方法。当然,对于Excel表格中已有的分页符,如果我们也可以根据需要自行删除分页。 示例要点梳理 1. 插入分页 1.1 插入横向分页 1.2 插入纵向分页 2. 删除分页 2.1 删除全部分页 2.2 删除指定分页 代码操作及效果 1.插入Excel分页 C# using Spire.Xls; namespace ExcelPageBreak_XLS { class Program { static void Main(string[] args) { //实例化一个Wordbook类对象,并加载需要设置分页的Excel文档 Workbook workbook = new Workbook(); workbook.LoadFromFile("Sample.xlsx"); //获取第一个工作表 Worksheet sheet = workboo...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- CentOS关闭SELinux安全模块
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS7,8上快速安装Gitea,搭建Git服务器
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Red5直播服务器,属于Java语言的直播服务器
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16