当前位置: 首页 > 编程笔记 >

js倒计时抢购实例

唐默
2023-03-14
本文向大家介绍js倒计时抢购实例,包括了js倒计时抢购实例的使用技巧和注意事项,需要的朋友参考一下

本文实例为大家分享了JavaScript实现限时抢购,供大家参考,具体代码如下

运行效果图:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>限时抢购倒计时</title>
<style type="text/css">
 body{
 text-align: center;
 }
 #first{
 color:#ff7300;
 font-size:30px;
 margin-left:10px;
 }
</style>
<script type="text/javascript">
window.onload=function(){
setInterval(changTime, 500);
function changTime(){
document.getElementById("time").innerHTML=getTime();
changeStyle();
}
function gR()
{
 return Math.floor(Math.random()*16);
}
function changeStyle(){
var ele=document.getElementById("time");
var size=Math.random()*40;
ele.style.fontSize=((size+10)+"px");
var mc=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
ele.style.color="#"+mc[gR()]+mc[gR()]+mc[gR()]+mc[gR()]+mc[gR()]+mc[gR()];
 
}
function getTime(){
 var now=new Date().getTime();
 var end=new Date("2015/12/20").getTime();
 var temp=end-now;
 if(temp<=0)
 {
 document.getElementById("first").innerHTML="抢购活动已结束!!!!!";
 return "";
 }else
 {
 var temp2=new Date();
 temp2.setTime(temp);
 var sec=Math.floor((temp)/1000%60);
 var min=Math.floor(temp/(60*1000)%60);
 var hou=Math.floor(temp/(60*60*1000)%24);
 var day=Math.floor(temp/(24*60*60*1000));
 
 return day+"天 "+hou+"小时 "+min+"分钟 "+sec+"秒";
 }
}
};
</script>
</head>
<body>
 <br/><br/><br/><br/><br/>
 <span id="first">距离限时抢购还有&nbsp;</span>
 <span id="time"></span>
</body>
</html>

更多关于倒计时的文章请查看专题:《倒计时功能》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍基于JS实现限时抢购倒计时间表代码,包括了基于JS实现限时抢购倒计时间表代码的使用技巧和注意事项,需要的朋友参考一下 废话不多说了,直接给大家贴代码了,具体代码如下所示: 以上所述是小编给大家介绍的基于JS实现限时抢购倒计时间表代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!

  • 本文向大家介绍Android计时与倒计时实现限时抢购的5种方法,包括了Android计时与倒计时实现限时抢购的5种方法的使用技巧和注意事项,需要的朋友参考一下 在购物网站的促销活动中一般都有倒计时限制购物时间或者折扣的时间,这些都是如何实现的呢? 在一个安卓客户端项目中恰好遇到了类似的问题,一开始使用的是Timer与 TimerTask, 虽然此方法通用,但后来考虑在安卓中是否有更佳的方案,于是乎

  • 本文向大家介绍Andorid实现精确到天时分秒的抢购倒计时,包括了Andorid实现精确到天时分秒的抢购倒计时的使用技巧和注意事项,需要的朋友参考一下 今天项目用到了抢购时倒计时的功能 ,今天找了好多哥们,也百度了好多,但是没有自己喜欢并且能消化的。好不容易找到了一个能容易看懂的,然而又不符合我想要的需求,所以自己搞一下。不知道是否简单,但是最起码是项目的功能可以实现。(一下午,没白费。开心) 直

  • 本文向大家介绍基于javascript实现精确到毫秒的倒计时限时抢购,包括了基于javascript实现精确到毫秒的倒计时限时抢购的使用技巧和注意事项,需要的朋友参考一下 这篇文章为大家分享了javascript实现倒计时限时抢购,精确到毫秒的倒计时,供大家参考,具体内容如下 一、效果图 下面的图片就是聚划算上面的限时抢的效果 二、实现限时抢的效果需要用到的知识 :Javascript Date(

  • 本文向大家介绍JQuery仿小米手机抢购页面倒计时效果,包括了JQuery仿小米手机抢购页面倒计时效果的使用技巧和注意事项,需要的朋友参考一下 1、效果及功能说明 通过对时间的控制来告诉用户一个活动还剩多少时间,精确到秒。 2、实现原理 首先定义活动的截至的时间,要重年份精确到毫秒,在获得当前的年份到秒钟,在用截至时间,减去现在的时间,剩下的还有多少的时间就把还剩下的时间给显示出来就得出了离截止日

  • 本文向大家介绍js倒计时显示实例,包括了js倒计时显示实例的使用技巧和注意事项,需要的朋友参考一下 话不多说,请看实例代码 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!