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 相关文章推荐
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
js调试工具Console命令详解
Oct 21 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
JS实现的字符串数组去重功能小结
Jun 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函数 serialize()和unserialize()
2012/02/04 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
python 换位密码算法的实例详解
2017/07/19 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
python实现两个文件合并功能
2018/04/01 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
python语言基本语句用法总结
2019/06/11 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
最新大学职业规划书范文
2013/12/30 职场文书
护士演讲稿范文
2014/01/05 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
优秀员工演讲稿
2014/05/19 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
流动人口婚育证明
2014/10/19 职场文书
公务员检讨书
2014/11/01 职场文书
2015年试用期工作总结
2014/12/12 职场文书
校本课程教学计划
2015/01/19 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书