JavaScript实现秒杀时钟倒计时


Posted in Javascript onSeptember 29, 2019

本文实例为大家分享了JavaScript实现秒杀时钟倒计时的具体代码,供大家参考,具体内容如下

功能介绍:

1.时/分/秒倒计时直至为零

JavaScript实现秒杀时钟倒计时

所有代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>倒计时</title>
 <style type="text/css">
 *{
 margin:0; 
 padding:0;
 }
 span{
 display: inline-block;
 width: 60px;
 height: 60px;
 border-radius: 50%;
 background: black;
 color: white;
 font-size: 30px;
 text-align: center;
 line-height: 60px;
 }
 i{
 font-style: normal;
 font-size: 20px;
 }
 </style>
 </head>
 <body>
 <span id="hs">1</span>
 <i>:</i>
 <span id="ms">59</span>
 <i>:</i>
 <span id="ss">47</span>
 </body>
</html>
<script type="text/javascript">
//倒计时
var count = 1;
var Counter;
function countDown(){ //调用
 Counter = setInterval(f,1000);
} 
countDown(); //自运行
//倒计时
function f(){
 var hs = Number(document.getElementById("hs").innerHTML);
 var ms = Number(document.getElementById("ms").innerHTML);
 var ss = Number(document.getElementById("ss").innerHTML);
 if(hs==0&&ms==0&&ss==0||ss>60||ms>60||hs>24){
 var hs = document.getElementById("hs").innerHTML = "00";
 var ms = document.getElementById("ms").innerHTML = "00";
 var ss = document.getElementById("ss").innerHTML = "00";
 clearInterval(Counter);
 console.log(count);
 return;
}
 if(ss>0){
 ss--;
 document.getElementById("ss").innerHTML = ss;
 count++;
 }
 if(ss==0){
 if(ms>0){
 ms--;
 document.getElementById("ms").innerHTML = ms;
 document.getElementById("ss").innerHTML = 59;
 }
 
 }
 if(ms==0){
 if(hs>0){
 hs--;
 document.getElementById("hs").innerHTML = hs;
 document.getElementById("ms").innerHTML = 59;
 }
 
 }
}
 
</script>

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript iframe的相互操作浅析
Oct 14 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
js实现照片墙功能实例
Feb 05 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 #Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 #jQuery
JavaScript获取页面元素的常用方法详解
Sep 28 #Javascript
解决Layui数据表格的宽高问题
Sep 28 #Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 #Javascript
layui table 列宽百分比显示的实现方法
Sep 28 #Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 #Javascript
You might like
php生成xml简单实例代码
2009/12/16 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
Yii2中datetime类的使用
2016/12/17 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
原生js实现trigger方法示例代码
2019/05/22 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
python常规方法实现数组的全排列
2015/03/17 Python
python动态性强类型用法实例
2015/05/09 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
django页面跳转问题及注意事项
2019/07/18 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
高中三年学习生活的自我评价
2013/10/10 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
《母鸡》教学反思
2014/02/25 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
婚前保证书范文
2015/02/28 职场文书
倡议书格式及范文
2015/04/29 职场文书
队列队形口号
2015/12/25 职场文书