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 div 弹出可拖动窗口
Feb 26 Javascript
JQuery开发的数独游戏代码
Oct 29 Javascript
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 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和ACCESS写聊天室(五)
2006/10/09 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
php获取系统变量方法小结
2015/05/29 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
浅谈js中的闭包
2015/03/16 Javascript
cookie的secure属性详解
2015/04/08 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
python实现在windows服务中新建进程的方法
2015/06/30 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
Django ModelForm操作及验证方式
2020/03/30 Python
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
什么是属性访问器
2015/10/26 面试题
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
2015年度内部审计工作总结
2015/05/20 职场文书
十二生肖观后感
2015/06/12 职场文书
python flask框架快速入门
2021/05/14 Python
React中的Context应用场景分析
2021/06/11 Javascript
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS