杨老师课堂之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）咨询。
杨老师课堂之JavaScript定时器_农夫山泉限时秒杀案例的更多相关文章
- 杨老师课堂_Java核心技术下之控制台模拟微博用户注册案例
案例设计背景介绍: 编写一个新浪微博用户注册的程序,要求使用HashSet集合实现. 假设当用户输入用户名.密码.确认密码.生日(输入格式yyyy-mm-dd为正确).手机号码(手机长度为11位,并 ...
- 杨校老师课堂之JavaScript右下角广告弹框教程
案例制作思路: 1.先制作界面 添加一个盒子包含一个按钮,使盒子绝对定位在右上角 添加一个大盒子,同理,将盒子居于左下角:其中内部包含一个顶端盒子和底部盒子 顶端盒子因为是属于大盒子内部的存在,所以宽 ...
- 杨老师课堂_Java核心技术下之控制台模拟记事本案例
预览效果图: 背景介绍: 编写一个模拟记事本的程序通过在控制台输入指令,实现在本地新建文件打开文件和修改文件等功能. 要求在程序中: 用户输入指令1代表"新建文件",此时可以从控制 ...
- 杨老师课堂_VBA学习教程之根据部门列创建工作表
课件下载 : 方式1:本节课件下载地址:链接: https://pan.baidu.com/s/1rf5pRmZ95fjVbz70KYi6Aw 密码: q9yk 方式2:或点击此处下载 效果预览图: ...
- Final互评------《弹球学成语》---- 杨老师粉丝群
一.基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论作品的选题; N(Need,需求):本产品面相青少年及小学生,基于这些用户数量再加上一些休闲玩家,需求量还是比较大的. A ...
- 互评Alpha版本——杨老师粉丝群——Pinball
一．基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论作品的选题 (1)N(Need,需求) 成语学习对除汉语言专业外的大学生的需求并不是很高,初中生和高中生因为在升学时需要参加语文 ...
- Javascript定时器(三)——setTimeout(func, 0)
setTimeout(func, 0)可以使用在很多地方,拆分循环.模拟事件捕获.页面渲染等 一.setTimeout中的delay参数为0,并不是指马上执行 <script type=&quo ...
- Javascript定时器(二)——setTimeout与setInterval
一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...
- COJ 0500 杨老师的路径规划（MST）最小生成树
杨老师的路径规划(MST) 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 为满足同学们需求,杨老师在实验楼4层新建了好多个计算 ...
随机推荐
- U盘无法安装win10提示Your PC/Device needs to be repaired
前一阵子把笔记本自带的win8升级到8.1,又升级到win10. 差不多有一个月没有开机,前几天开机后进不了系统,出现如下图的提示.买电脑自带的win8是正版的,但升级到win10后就过期了,也真是坑 ...
- HBASE表设计
1. 表的设计 1.1 Pre-Creating Regions 默认情况下,在创建HBase表的时候会自动创建一个region分区,当导入数据的时候,所有的HBase客户端都向这一个region写数 ...
- CentOS 6.X启动流程
CentOS 6.X启动流程 /boot分区 启动引导程序是默认可以识别boot分区的.因此在系统还无法加载硬盘的时候,boot分区是可以识别的! initramfs内存文件系统 CentOS 6.x ...
- C#数据库连接操作大全
一:数据库连接代码: SqlConnection objSqlConnection = new SqlConnection ("server = 127.0.0.1;uid = sa; pw ...
- Linux下C语言的调试 - gdb
调试是每个程序员都会面临的问题. 如何提高程序员的调试效率, 更好更快地定位程序中的问题从而加快程序开发的进度, 是大家共同面对的问题. 可能Windows用户顺口就会说出:用VC呗 :-) , 它提 ...
- Hadoop家族
现在Hadoop家族产品,已经达到20个了之多. 有必要对自己的知识做一个整理了,把产品和技术都串起来.不仅能加深印象,更可以对以后的技术方向,技术选型做好基础准备. 本文为"Hadoop家 ...
- 安卓打开File Explorer里面不显示内容
其实这不算是开发问题,是自己对这个文件的内容不了解罢了.这个文件的内容与手机是直接相关系的.只有打开模拟器才可以查看里面的内容. 打开模拟器,里面的文件一览无余.因为自己遇到了问题,还有些惊慌,但真实 ...
- 集群增量会话管理器——DeltaManager
DeltaManager会话管理器是tomcat默认的集群会话管理器,它主要用于集群中各个节点之间会话状态的同步维护,由于相关内容涉及到集群,可能会需要一些集群通信相关知识,如果有疑问可结合集群相关章 ...
- LeetCode之“动态规划”：Maximum Product Subarray
题目链接 题目要求: Find the contiguous subarray within an array (containing at least one number) which has t ...
- 【Qt编程】3D迷宫游戏
说起迷宫想必大家都很熟悉,个人感觉迷宫对人的方向感是很大的考验,至少我的方向感是不好的,尤其是在三维空间中.由于这段时间帮导师做项目用到了三维作图,便心血来潮想做个三维迷宫玩玩.要想画出三维的迷宫游戏 ...