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获取iframe中的dom对象(两种方法)
Jul 02 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 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
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
php 一元分词算法
2009/11/30 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
jQuery数组处理方法汇总
2011/06/20 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
python实现代码行数统计示例分享
2014/02/10 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
对pandas中Series的map函数详解
2018/07/25 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
英文版银行求职信
2013/10/09 职场文书
毕业生怎样写好自荐信
2013/11/11 职场文书
公司承诺书格式
2014/05/21 职场文书