JavaScript仿京东实现秒杀倒计时案例详解
功能介绍：
1、这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）
2、三个黑色的盒子，分别存放时、分秒
3、三个盒子利用innerHTML存入倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
background-color: black;
width: 50px;
height: 50px;
margin-left: 20px;
float: left;
color: white;
font-size: 20px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class='h1'></div>
<div class='m'></div>
<div class='s1'></div>
<script>
//把时间放到div中去
var div = document.querySelectorAll('div')
var timer1 = setInterval(function() {
var date1 = new Date(2022, 3, 2, 18, 40, 0); //获得到点截至时间距离标准时间的毫秒数
var date2 = new Date(); //获得目前时间距离准时间的毫秒数
var date = (date1 - date2) / 1000; //用到点时间的毫秒数减去现在时间的毫秒数，必须先化为秒单位，之后再进行转换
var h = parseInt((date / 60 / 60) % 24); //小时
var m = parseInt((date / 60) % 60); //分钟
var s = parseInt(date % 60); //秒 一定要包含在这个函数中，因为是间隔1秒就要重新算一遍,需要提高准确率的话，把秒数减少（刷新间隔）
div[2].innerHTML = s
div[1].innerHTML = m
div[0].innerHTML = h
}, [1])
</script>
</body>
</html>
改进：
<script>
//把时间放到div中去
var div = document.querySelectorAll('div')
var timer1 = setInterval(fn, [1000])
var date1 = new Date(2022, 3, 2, 18, 40, 0);
var date2 = new Date();
var date = (date1 - date2) / 1000;
var h = parseInt((date / 60 / 60) % 24);
var m = parseInt((date / 60) % 60);
var s = parseInt(date % 60);
div[2].innerHTML = s
div[1].innerHTML = m
div[0].innerHTML = h
//解决刚刷新，数字不显示的问题
function fn() {
var date1 = new Date(2022, 3, 2, 18, 40, 0); //获得到点截至时间距离标准时间的毫秒数
var date2 = new Date(); //获得目前时间距离准时间的毫秒数
var date = (date1 - date2) / 1000; //用到点时间的毫秒数减去现在时间的毫秒数，必须先化为秒单位，之后再进行转换
var h = parseInt((date / 60 / 60) % 24); //小时
var m = parseInt((date / 60) % 60); //分钟
var s = parseInt(date % 60); //秒 一定要包含在这个函数中（最好是封装一个函数），因为是间隔1秒就要重新算一遍,需要提高准确率的话，把秒数减少（刷新间隔）.如果间隔比较大的话，一刷新页面，会产生空白。解决方法就是，在未调用这个函数前，先把时间放入到div盒子中
div[2].innerHTML = s
div[1].innerHTML = m
div[0].innerHTML = h
}
</script>
添加停止倒计时按钮：
<button>停止倒计时</button>
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
clearInterval(timer1)
})
到此这篇关于JavaScript仿京东实现秒杀倒计时案例详解的文章就介绍到这了,更多相关JavaScript秒杀倒计时内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
javascript 实现 秒杀,团购 倒计时展示的记录 分享
最近做了一个房产的秒杀,团购的电子商务网站(房子也有秒杀,出手不小啊),其中里面有一个秒杀的倒计时展示,主要是判断当前时间距离秒杀开始还有多少时间,还有秒杀开始和秒杀结束的各种展示.其中最主要的一点就是所谓的当前时间不能使用浏览器通过new Date()获取的客户端时间,这样只要用户修改了自己的机器时间那么倒计时就会乱透了,所以这个当前时间必须使用的是服务器时间,所以采用的是静态缓存页面所以这个当前时间使用ajax方式进行获取 复制代码 代码如下: <!DOCTYPE html PUBLIC &qu
-
js实现倒计时秒杀效果
实际项目中,需求一个倒计时秒杀功能,每天下午6点后,计算距离第二天上午10点的小时.分钟.秒数,计时到第二天上午10点后开启抢购功能:代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.11.1.min.js"></script&g
-
JavaScript实现秒杀时钟倒计时
本文实例为大家分享了JavaScript实现秒杀时钟倒计时的具体代码,供大家参考,具体内容如下 功能介绍: 1.时/分/秒倒计时直至为零 所有代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>倒计时</title> <style type="text/css"> *{ margin:0; padding:
-
JavaScript仿京东秒杀倒计时
本文实例为大家分享了JavaScript仿京东秒杀倒计时的具体代码,供大家参考,具体内容如下 仿京东秒杀倒计时 html代码 <div id="box"> <div class="txt">秒杀倒计时</div> <div class="hour"></div> <!-- 小时与分钟之间的冒号 --> <span class="h_m">:&l
-
js实现京东秒杀倒计时功能
本文实例为大家分享了js实现京东秒杀倒计时功能的具体代码,供大家参考,具体内容如下 首先给大家看看效果图,因为是做的移动端的,所以放大给大家看看局部就行: 关于实现京东秒杀,之前用过其他的方法,今天给大家分享一个原生的方法吧,不会很难. 1.倒计时页面结构: <div class="secondkill"> <div class="top"> <span class="red fl">掌上秒杀</span
-
JS实现秒杀倒计时特效
本文实例为大家分享了JS实现秒杀倒计时特效的具体代码,供大家参考,具体内容如下 知识点 添加一个定时器,对时间标签不断进行更新设置即可. 引入工具库工具库 运行效果 代码 引入MyTool.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div
-
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
一年一度的双十二如期而至,今天的你买买买了吗,下面小编给大家分享一个动态秒杀倒计时功能. 效果图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="noStart">活动未开始</div> <div clas
-
JavaScript仿京东实现秒杀倒计时案例详解
功能介绍: 1.这个倒计时是不断变化的,因此需要定时器来自动变化(setInterval) 2.三个黑色的盒子,分别存放时.分秒 3.三个盒子利用innerHTML存入倒计时 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=&quo
-
Android仿京东首页秒杀倒计时
本文实例为大家分享了Android仿京东首页秒杀倒计时的具体代码,供大家参考,具体内容如下 xml配置 <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#FFFFFF" android:orientation="vertical"> <Linea
-
PHP精确到毫秒秒杀倒计时实例详解
精确到毫秒秒杀倒计时PHP源码实例,前台js活动展示倒计时,后台计算倒计时时间.每0.1秒定时刷新活动倒计时时间. PHP: // 注意:php的时间是以秒算.js的时间以毫秒算 // 设置时区 date_default_timezone_set('PRC'); //配置每天的活动时间段 $starttimestr = date('Y-m-d H:i:s', strtotime(date('Y-m-d'))); $endtimestr = date('Y-m-d H:i:s', strtotim
-
JavaScript 上传文件限制参数案例详解
项目场景: 1,上传文件限制 功能作用: 1,防止前端操作上传异常文件 2,限制符合的规则,优化展示模型 功能实现: 1,获取file实例 2,执行校验规则方法 代码如下: //大小限制 checkFileSize(file, rules) { return new Promise((resolve, reject) => { file.size / 1024 / 1024 > rules ? reject() : resolve() }).then( () => { return tr
-
JavaScript 解决ajax中parsererror错误案例详解
解决ajax的parsererror错误的终极办法(后台传给前台的数据json问题) 出现这个问题的原因是因为后台传给前台的数据出现了问题,ajax对于json的格式特别的严格 下面是会出现这个问题的ajax请求 $.ajax({ type:'get', url:"{php echo $this->createWebUrl('ajax',array('ac'=>'cunByXiangId'))}", data:{id:id}, dataType:'json',//这个地方是
-
JavaScript style对象与CurrentStyle对象案例详解
1.Style对象 style对象代表一个单独的样式声明,可以从应用样式的文档元素访问Style对象.style对象获取的是内联样式,即元素标签中style属性的值. 例子: <style type="text/css">#div{color:gray;}</div>//内部样式 <div id="div" style="color:red;"></div>//内联样式 document.getEl
-
JavaScript定时器设置、使用与倒计时案例详解
本文实例讲述了JavaScript定时器设置.使用与倒计时案例.分享给大家供大家参考,具体如下: 1.设置定时器 定时器,适用于定时执行的任务中.在BOM的window对象中,有这样的两个函数是用于设置定时器 setTimeout(function,delay);//设置延时多少毫秒执行该函数,只执行一次,返回值是一个id setInterval(function,delay);//设置间隔多少毫米一直执行该函数,执行多次,返回值是一个id 两者的区别就在于setTimeout方式只执行一次,而
-
vue设计一个倒计时秒杀的组件详解
简介: 倒计时秒杀组件在电商网站中层出不穷 不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的 核心思路: 1.时间不能是本地客户端的时间 必须是服务器的时间这里用一个settimeout代替 以为时间必须统一 2.开始时间,结束时间通过父组件传入,当服务器时间在这个开始时间和结束时间的范围内 参加活动按钮可以点击,并且参加过活动以后不能再参加, 3.在组件创建的时候 同步得到现在时间服务时间差,并且在这里边设置定时器,每秒都做判断看秒杀是否开始和结束, 4.在更新时间的函数中是
-
Javascript 模拟mvc实现点餐程序案例详解
MVC模式是一个比较成熟的开发模式.M是指业务模型,V是指用户界面,C则是控制器,使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式.其中,View的定义比较清晰,就是用户界面.今天就来模拟使用MVC模式开发一个点餐程序,当然,只是就此案例来说明MVC在前端的实现参考,并没有完整的实现.程序很简单,与传统的MVC三层架构不谋而合. 首先,先介绍一下场景:顾客进到餐馆,拿着菜单点餐,服务员记录并发到后端厨房,厨师接到订单,按照订单的菜品去制作,制作完毕通知服务员取餐,