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 select(列表)的操作(取值/赋值)
Aug 06 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
js实现select跳转功能代码
Oct 22 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
javascript断点调试心得分享
Apr 23 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 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 cookie的操作实现代码(登录)
2010/12/29 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
初识php MVC
2014/09/10 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
javascript hashtable实现代码
2009/10/13 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现逆波兰计算表达式实例详解
2015/05/06 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
Python常用小技巧总结
2015/06/01 Python
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
对python中的高效迭代器函数详解
2018/10/18 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
《尊严》教学反思
2014/02/11 职场文书
高级工程师英文求职信
2014/03/19 职场文书
投资意向书范本
2014/04/01 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
会计稽核岗位职责
2015/04/13 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技