js倒计时抢购实例


Posted in Javascript onDecember 20, 2015

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

运行效果图:

js倒计时抢购实例

js倒计时抢购实例

具体代码如下:

<!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">距离限时抢购还有 </span>
 <span id="time"></span>
</body>
</html>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 延迟执行实例介绍
Aug 20 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 Javascript
Javascript 解构赋值详情
Nov 17 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 #Javascript
js实现无缝滚动特效
Dec 20 #Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 #Javascript
原生js页面滚动延迟加载图片
Dec 20 #Javascript
javascript实现的网站访问量统计代码
Dec 20 #Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 #Javascript
图解js图片轮播效果
Dec 20 #Javascript
You might like
中篇:安装及配置PHP
2006/12/13 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
实现PHP搜索加分页
2016/10/12 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
JavaScript 模拟用户单击事件
2009/12/31 Javascript
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
Node.js实现数据推送
2016/04/14 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
python 图片验证码代码分享
2012/07/04 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
办公室主任职责范本
2014/03/07 职场文书
一分钟演讲稿
2014/04/30 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
房产证明范本
2015/06/19 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
python实现简单区块链结构
2021/04/25 Python
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js