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表单验证 - Parsley.js使用和配置
Jan 25 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
javascript数据类型示例分享
Jan 19 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
js装饰设计模式学习心得
Feb 17 Javascript
小程序实现单选多选功能
Nov 04 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 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代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
小文件php+SQLite存储方案
2010/09/04 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
Python实现图片滑动式验证识别方法
2017/11/09 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
经济管理专业毕业生推荐信
2013/11/11 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL