商品抢购倒计时（天，时，分，秒）

在这里案例中需要用到JS方法：Date()，parseInt()，getTime()。先对这三个方法做些介绍。

Date()方法：可返回当天的日期和时间。用法：

var newTime = new Date();

也可用来定义一个时刻，写法如下：

var outTime = new Date("2018/08/12 12:00:00");//年月日之间可以用“/”，也可以用“-”

parseInt()方法：可解析一个字符串，并返回一个整数。它有两个参数：parseInt(string, radix)。第一个参数必填，为被解析的字符串。第二个选填，表示要解析的数字的基数（二进制，十进制，十六进制）。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。如果该参数小于 2 或者大于 36，则 parseInt()将返回 NaN。

getTime()方法：可返回距1970年1月1日之间的毫秒数。它方法总是结合一个 Date 对象来使用。用法举例：

var d = new Date();//获取当前日期
var n = d.getTime();//计算距离1997.01.01  00.00.00的时间
alert(n);//弹出的就是此时距离1970年1月1日之间的毫秒数。

下面开始介绍抢购倒计时：

HTML部分：

<div id="time">
<span id="day">天</span>：
<span id="hour">时</span>：
<span id="min">分</span>：
<span id="sec">秒</span>
</div>
<!--用来显示时间，通过JS计算后，将结果展示在此处-->

JS部分：

window.onload = timeOver;
function timeOver() {var day = $("#day").text();//获取到当前<span>中的值，便于后续更改。var hour = $("#hour").text();//同上var min = $("#min").text();//同上var sec = $("#sec").text();//同上var newTime = new Date();//当前日期var outTime = new Date("2018-08-12 12:00:00");//抢购开始时间var time = parseInt((outTime.getTime() - newTime.getTime()) / 1000);// 抢购开始时间-当前日期。因为getTime()返回的是毫秒数，1000毫秒=1秒。所以time得到的时间差是以秒为单位的。if(time >= 0) {day = parseInt((time/3600)/24);//计算天数hour = parseInt(time/3600%24); //计算小时数min =parseInt(time/60%60); //计算分钟数sec =parseInt(time%60); //计算秒数if(day <= 9) day = '0' + day;//如果为个位数，就在前面加个0if(hour <= 9) hour = '0' + hour;//同上if(min <= 9) min = '0' + min; //同上if(sec <= 9) sec = '0' + sec; //同上}$("#sec").text(sec);//用计算结果替换掉原来的字$("#min").text(min);//同上$("#hour").text(hour);//同上$("#day").text(day);//同上setTimeout(timeOver, 1000);//每个一秒钟执行一次，
}

在此案例中，我省略了CSS代码，CSS主要是对显示的倒计时样式做了一些美化。下面是页面截图：

本人为JS实习生一枚，不断学习，不断进步。欢迎各位前辈批评指教。

商品抢购倒计时（天，时，分，秒）相关推荐

html天时分秒倒计时,倒计时(天时分秒)(原创)
//格式化时间 Date.prototype.format = function(format) { /* * 使用例子:format="yyyy-MM-dd hh:mm:ss"; ...
JS实现倒计时精确到天数,时,分,秒或者精确到时、分、秒（小时数累加）
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>JS ...
shell高级脚本：“秒”转换为“时-分-秒”；ping
"秒"转换为"时-分-秒" swap_seconds () {SEC=$1(( SEC < 60 )) && echo -e " ...
[转载] 用python 获取当前时间(年-月-日时:分:秒)，并且返回当前时间的下一秒
参考链接: Python获取当前时间获取当前时间,并且返回当前时间的下一秒因为存在年-月-日时:分:秒考虑到用split的方法做的话非常麻烦所以引入time和datetime模块当然也可 ...
Excel计算将时间字符串转换为时间格式年-月-日时:分:秒且计算时间差得到时分秒格式
Excel计算时间差时分秒今天数据导出处理的时候碰见一个时间格式问题如下: 这个日期数据从数据库里导出来就是字符串了,由于取出来的还有一些很长的编码形式的字段怕被隐没,所以将数据粘贴之前我将exce ...
java秒转换为年月日_SimpleDateFormat将月/日/年时分秒转换为年-月-日时:分:秒
String expirTime = "12 / 27 / 2018 12: 00: 00 AM"; SimpleDateFormat in = new SimpleDateFor ...
js将当前时间格式化为年-月-日时:分:秒
利用js的Date()对象,将系统当前时间格式化为年-月-日时:分:秒.也可以自己定义格式.(做项目时遇到这个问题.本来想百度一个用,哎,网上的结果太乱了,于是自己写一个) 代码如下: <!D ...
汇编语言：以“年/月/日时:分:秒”的格式，显示当前的日期、时间。
题目:访问cmos ram,用汇编语言编程,以"年/月/日时:分:秒"的格式,显示当前的日期.时间. 我编写的程序是用直接写显存的方式,在屏幕中间显示系统的当前时间. 但是,有两 ...
用python 获取当前时间(年-月-日时:分:秒)，并且返回当前时间的下一秒
获取当前时间,并且返回当前时间的下一秒因为存在年-月-日时:分:秒考虑到用split的方法做的话非常麻烦所以引入time和datetime模块当然也可以改写成输入一个时间代码实现 imp ...
Python 获取当前时间年-月-日-时-分-秒
Python Version (使用版本): Python 3.7.0 (v3.7.0:1bf9cc5093, Jun 27 2018, 04:06:47) [MSC v.1914 32 bit (I ...

商品抢购倒计时（天，时，分，秒）

商品抢购倒计时（天，时，分，秒）相关推荐

最新文章

热门文章