杨老师课堂之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://www.cnblogs.com/xiaoxiao5016/

分享是快乐的，也见证了个人成长历程，文章大多都是工作经验总结以及平时学习积累，基于自身认知不足之处在所难免，也请大家指正，共同进步。

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出, 如有问题，可邮件（397583050@qq.com）咨询。

转载于:https://www.cnblogs.com/xiaoxiao5016/p/9049424.html

杨老师课堂之JavaScript定时器_农夫山泉限时秒杀案例相关推荐

杨老师课堂之JavaScript定时器限时抢购秒杀商品案例
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/kese7952/article/details/80346509 预览效果图: 使用到的知识点: 定 ...
杨老师课堂之JavaScript定时器案例的红绿灯设计
效果图: 代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><titl ...
杨老师课堂之网页制作HTML的学习入门-含有案例
网页制作入门 - Html的学习本篇所授任务网站信息页面案例网站图片信息页面案例网站友情链接页面案例网站首页案例网站注册页面案例网站后台页面案例教学导航教学目标了解什么是标记语言 ...
杨老师课堂之JavaScript悬浮事件（鼠标移入移出事件）
今天给大家分享一个简单的JavaScript事件案例: 该事件属于悬浮事件改代码逻辑非常简单,主要是当鼠标移动到按钮上显示一个盒子,移开之后盒子隐藏 JavaScript事件中 onmouseov ...
java模仿微博代码_杨老师课堂_Java核心技术下之控制台模拟微博用户注册案例
案例设计背景介绍: 编写一个新浪微博用户注册的程序,要求使用HashSet集合实现. 假设当用户输入用户名.密码.确认密码.生日(输入格式yyyy-mm-dd为正确).手机号码(手机长度为11位,并且 ...
杨老师课堂_Java核心技术下之控制台模拟文件管理器案例
背景需求介绍: 编写一个模拟文件管理器的程序,实现控制台对文件和文件夹的管理操作. 要求在此程序中: 当用户输入指令 1 时,代表"指定关键字检索文件",此时需要用户输入检索的目录 ...
台州杨老师课堂 UI设计培训班
课程内容一.图形界面设计基础 1.Photoshop 应用通过各种不同风格网页整体GUI设计,掌握photoshop相关软件操作基础,熟练使用更重要是学会直接应用软件,通过项目实训直接设计. 2. ...
html倒计时timer,JavaScript定时器设置、使用与倒计时案例详解
本文实例讲述了JavaScript定时器设置.使用与倒计时案例.分享给大家供大家参考,具体如下: 1.设置定时器定时器,适用于定时执行的任务中.在BOM的window对象中,有这样的两个函数是用于设 ...
杨老师课堂之JavaWeb网站技术架构总结
题记有很多学生及一线的开发人员经常会问我到底是什么技术架构,是不是就是目前在学校的SSH.SSM技术,为了让更多的同行对架构这个词汇有更深刻的理解,我分享一下自己的个人见解.从编程开发到IT教学也有 ...

杨老师课堂之JavaScript定时器_农夫山泉限时秒杀案例

杨老师课堂之JavaScript定时器_农夫山泉限时秒杀案例相关推荐

最新文章

热门文章