js实现倒计时秒杀效果

2024-09-29 14:12:51

实际项目中，需求一个倒计时秒杀功能，每天下午6点后，计算距离第二天上午10点的小时、分钟、秒数，计时到第二天上午10点后开启抢购功能；代码如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="js/jquery-1.11.1.min.js"></script>
 </head>
 <body οnlοad="leftTimer();">
 <p class="tit_right" style="">
  <span id="h" style="">00</span>
  <span id="m" style="">00</span>
  <span id="s" style="">00</span>
 </p>
 <p style="" id="juli"></p>
<script>
 function leftTimer(year,month,day,hour,minute,second){
 var newDate = new Date();
 var newDate1 = new Date(year,month-1,day,hour,minute,second);
 var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数
 var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数
 var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时
 var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
 var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
 if (seconds<0) {
   $(".tit_right").css('display', 'none');
   $("#juli").text("开始抢购");
 }
 else{
   days = fix(days,2);
   hours = fix(hours,2);
   minutes = fix(minutes,2);
   seconds = fix(seconds,2);
  setTimeout("leftTimer(2017,2,21,11,0,0)",1000);
  document.getElementById("h").innerHTML=hours;
  document.getElementB

  yId("m").innerHTML=minutes;
  document.getElementById("s").innerHTML=seconds;
 }
 }
 //fix函数：将1~9的1位数转换成01~09的格式
 function fix(num, length) {
   return ('' + num).length < length ? ((new Array(length + 1)).join('0') + num).slice(-length) : '' + num;
 }
</script>
</body>
</html>

以上，在leftTimer() 函数里传参，参数为指定的日期和时间，计时就开启了！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

PHP+JS实现的商品秒杀倒计时用法示例

本文实例讲述了PHP+JS实现的商品秒杀倒计时用法.分享给大家供大家参考,具体如下: <?php //php的时间是以秒算.js的时间以毫秒算 date_default_timezone_set('PRC'); //date_default_timezone_set("Asia/Hong_Kong");//地区 //配置每天的活动时间段 $starttimestr = "2016-3-29 8:10:00"; $endtimestr = "2016-
javascript 实现秒杀,团购倒计时展示的记录分享

最近做了一个房产的秒杀,团购的电子商务网站(房子也有秒杀,出手不小啊),其中里面有一个秒杀的倒计时展示,主要是判断当前时间距离秒杀开始还有多少时间,还有秒杀开始和秒杀结束的各种展示.其中最主要的一点就是所谓的当前时间不能使用浏览器通过new Date()获取的客户端时间,这样只要用户修改了自己的机器时间那么倒计时就会乱透了,所以这个当前时间必须使用的是服务器时间,所以采用的是静态缓存页面所以这个当前时间使用ajax方式进行获取复制代码代码如下: <!DOCTYPE html PUBLIC &qu
Javascript实现商品秒杀倒计时（时间与服务器时间同步）

现在有很多网站都在做秒杀商品,而这其中有一个很重要的环节就是倒计时. 关于倒计时,有下面几点需要注意: 1.应该使用服务器时间而不是本地时间(本地时间存在时区不同.用户自行设置等问题). 2.要考虑网络传输的耗时. 3.获取时间时可直接从AJAX的响应头中读取(通过getResponseHeader('Date')来获得),服务器端不需要专门写时间生成脚本. 过程分析: 1.从服务器读到一个时间戳之后便开始计时,不考虑网络传输的耗时: 图中的各项标注分别是(上面的时间线采用标准时间,与服务器和页
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】

本文实例讲述了JS秒杀倒计时功能.分享给大家供大家参考,具体如下: 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body onload="miaosha();"> <p class="tit_right" style="
js实现京东秒杀倒计时功能

本文实例为大家分享了js实现京东秒杀倒计时功能的具体代码,供大家参考,具体内容如下首先给大家看看效果图,因为是做的移动端的,所以放大给大家看看局部就行: 关于实现京东秒杀,之前用过其他的方法,今天给大家分享一个原生的方法吧,不会很难. 1.倒计时页面结构: <div class="secondkill"> <div class="top"> <span class="red fl">掌上秒杀</span
javascript时间排序算法实现活动秒杀倒计时效果

制做一个活动页面秒杀列表页需要一个时间的算法排序自己琢磨了半天想了各种算法也没搞出来,后来问了下一个后台的php同学他写了个算法给我看了下 ,刚开始看的时候觉得这就是个纯算法,不能转化成页面的dom效果,可是再看了两遍发现可以, 于是我就改了改,实现了,先分享给大家. 页面需求是:从11点到20点每隔一个小时一场秒杀如果是当前时间就显示正在秒杀之前的商品就往最后排以此类推类似最开始的11点顺序是 11,12,13,14,15,16,17,18,19,20(点): 到12点的顺序
JavaScript实现秒杀时钟倒计时

本文实例为大家分享了JavaScript实现秒杀时钟倒计时的具体代码,供大家参考,具体内容如下功能介绍: 1.时/分/秒倒计时直至为零所有代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>倒计时</title> <style type="text/css"> *{ margin:0; padding:
C#结合JavaScript实现秒杀倒计时的方法

本文实例讲述了C#结合JavaScript实现秒杀倒计时的方法.分享给大家供大家参考.具体如下: 最近做个秒杀活动,要用到倒计时.要求每周三上午10:00开始倒计时 private string Dtime() { byte tempB = (byte)DateTime.Now.DayOfWeek; byte dayByte = (byte)DayOfWeek.Wednesday; DateTime wednesdayNow = DateTime.Now.AddDays(dayByte - te
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
JS实现倒计时图文效果

本文实例为大家分享了JS实现倒计时图文效果的具体代码,供大家参考,具体内容如下 <body> <img src="images/0.png" alt="" id="h1"> <img src="images/0.png" alt="" id="h2"> <img src="images/second1.png" alt=&qu
基于jQuery倒计时插件实现团购秒杀效果

倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的朋友一起学习吧! 1.1 帮助文档关键字倒计时秒杀 timer 1.2. 使用场景这样的倒计时在购物网站中会经常使用到,比如秒杀,限时抢购,确认收货倒计时. 这个功能并不难实现,就是利用js的定时执行,搜了一下网上的代码,五花八门,都是一个方法,没有做到封装,方便使用,所以写了一个插件,方便项
实例讲解多个js毫秒倒计时同时进行效果

本文实例讲解js毫秒倒计时同时进行效果的代码,分享给大家供大家参考,具体内容如下效果图: 实现功能:调用一个函数,传入html元素的id,和一个截止时间(unix时间戳),在该html元素中打印出到当前到截止时间为止的倒计时,精确到毫秒: 效果图如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" conte
JS 实现倒计时数字时钟效果【附实例代码】

这篇文章主要介绍了JS实现的网页倒计时数字时钟效果,是一款非常实用的javascript倒计时特效,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&
JS实现倒计时和文字滚动的效果实例

本文实例讲述了JS实现倒计时和文字滚动效果的方法.分享给大家供大家参考.具体实现方法如下: 说明:一般我们在一些淘宝类店铺中会看到一些像搞竞拍之类的活动,从中我们时而会发现一些倒计时的效果,在一些年会等场合我们也会发现一些抽奖活动,从中我们也可以看到一些随即滚动的效果.这里给大家分享一种实现倒计时和文字滚动的方法,希望可以对大家有所帮助.这里主要是通过js实现的. 一.倒计时效果的实现前台部分的完整代码如下: 复制代码代码如下: <html xmlns="http://www.w3.o
js实现的奥运倒计时时钟效果代码

本文实例讲述了js实现的奥运倒计时时钟效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title>js倒计时</title> <SCRIPT language=JavaScript1.2> function setcountdown(theyear,themonth,theday){ yr=theyear;mo=themonth;da=theday } setcountdown(201
JS实现商城秒杀倒计时功能(动态设置秒杀时间)

一年一度的双十二如期而至,今天的你买买买了吗,下面小编给大家分享一个动态秒杀倒计时功能. 效果图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="noStart">活动未开始</div> <div clas
JS动态显示倒计时效果

1.页面布局 <h1 id="show">距离2020年元旦还有:<span></span>天<span></span>小时<span></span>分<span></span>秒</h1> 2.js动态显示 getTime()获得设定的时期与1970年1月1日时间相差的毫秒数 1)获得插入数字的位置 var show=document.getElementById(

js实现倒计时秒杀效果

相关推荐

随机推荐