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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
js网页右下角提示框实例
Oct 14 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 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
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
Python新手实现2048小游戏
2015/03/31 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
"序列点" 是什么
2016/07/29 面试题
学期自我鉴定范文
2013/10/01 职场文书
数控专业大学生的自我鉴定
2013/11/13 职场文书
初中生期末考试的自我评价
2013/12/17 职场文书
小学四年级作文之写景
2019/08/23 职场文书
Java使用HttpClient实现文件下载
2022/08/14 Java/Android