杨老师课堂之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）咨询。

杨老师课堂之JavaScript定时器限时抢购秒杀商品案例相关推荐

杨老师课堂之JavaScript定时器_农夫山泉限时秒杀案例
预览效果图: 使用到的知识点: 定时器 setInterval(函数,毫秒):在指定的毫秒数后调用函数或执行一段代码取消定时器 clearInterval:取消由setInterval设置的定时器 ...
杨老师课堂之JavaScript定时器案例的红绿灯设计
效果图: 代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><titl ...
杨老师课堂之JavaScript悬浮事件（鼠标移入移出事件）
今天给大家分享一个简单的JavaScript事件案例: 该事件属于悬浮事件改代码逻辑非常简单,主要是当鼠标移动到按钮上显示一个盒子,移开之后盒子隐藏 JavaScript事件中 onmouseov ...
杨老师课堂_Java核心技术下之控制台模拟记事本案例...
预览效果图: 背景介绍: 编写一个模拟记事本的程序通过在控制台输入指令,实现在本地新建文件打开文件和修改文件等功能. 要求在程序中: 用户输入指令1代表"新建文件",此时可以从控制 ...
杨老师课堂之网页制作HTML的学习入门-含有案例
网页制作入门 - Html的学习本篇所授任务网站信息页面案例网站图片信息页面案例网站友情链接页面案例网站首页案例网站注册页面案例网站后台页面案例教学导航教学目标了解什么是标记语言 ...
台州杨老师课堂 UI设计培训班
课程内容一.图形界面设计基础 1.Photoshop 应用通过各种不同风格网页整体GUI设计,掌握photoshop相关软件操作基础,熟练使用更重要是学会直接应用软件,通过项目实训直接设计. 2. ...
杨老师课堂之JavaWeb网站技术架构总结
题记有很多学生及一线的开发人员经常会问我到底是什么技术架构,是不是就是目前在学校的SSH.SSM技术,为了让更多的同行对架构这个词汇有更深刻的理解,我分享一下自己的个人见解.从编程开发到IT教学也有 ...
限时抢购秒杀系统架构分析与实战
1 秒杀业务分析正常电子商务流程 (1)查询商品:(2)创建订单:(3)扣减库存:(4)更新订单:(5)付款:(6)卖家发货秒杀业务的特性 (1)低廉价格:(2)大幅推广:(3)瞬时售空:(4)一 ...
杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播
JavaScript案例之跑马灯左右无缝连接效果图: 思路: 1.先做界面 1.1 制作一个大盒子,进行存放整个图片及按钮区域 1.2 制作两个按钮和中间区域盒子 1.3 中间区域盒子中使用无序列表 ...

杨老师课堂之JavaScript定时器限时抢购秒杀商品案例

杨老师课堂之JavaScript定时器限时抢购秒杀商品案例相关推荐

最新文章

热门文章