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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
js charAt的使用示例
Feb 18 Javascript
js查找节点的方法小结
Jan 13 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
js创建数组的简单方法
Jul 27 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 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出错界面
2006/10/09 PHP
PHP的开发框架的现状和展望
2007/03/16 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python原始套接字编程示例分享
2014/02/21 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
Python Requests库基本用法示例
2018/08/20 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
matplotlib实现区域颜色填充
2019/03/18 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
pandas分批读取大数据集教程
2020/06/06 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
应届生求职自荐信范文
2015/03/04 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
JS数组去重详情
2021/11/07 Javascript