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中的循环语句for语句深入理解
Apr 04 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 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微框架Dispatch简介
2014/06/12 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
Laravel实现表单提交
2017/05/07 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
php实现登录页面的简单实例
2019/09/29 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
Python中关于字符串对象的一些基础知识
2015/04/08 Python
python创建和删除目录的方法
2015/04/29 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
Python中如何引入第三方模块
2020/05/27 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
大学应届生求职简历的自我评价
2013/10/08 职场文书
应届毕业生求职信范文分享
2013/12/26 职场文书
学生个人自我鉴定
2014/03/26 职场文书
银行贷款承诺书
2014/03/29 职场文书
超市创意活动方案
2014/08/15 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书