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 代码的方法小结
Jul 16 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
浅谈node.js中间件有哪些类型
Apr 29 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
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
Python构造函数及解构函数介绍
2015/02/26 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
python构造IP报文实例
2020/05/05 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
园林设计师自荐信
2013/11/18 职场文书
单位创先争优活动方案
2014/01/26 职场文书
优秀民警事迹材料
2014/01/29 职场文书
小学校园活动策划
2014/01/30 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
班级团队活动方案
2014/08/14 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL