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 相关文章推荐
JQuery从头学起第一讲
Jul 04 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
js判断字符长度以及中英文数字等
Dec 31 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 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 str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
JQuery1.6 使用方法三
2011/11/23 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
分析python请求数据
2018/08/19 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
python实现登录与注册系统
2020/11/30 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
员工评语范文
2014/12/31 职场文书
杜甫草堂导游词
2015/02/03 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
地道战观后感400字
2015/06/04 职场文书
领导离职感言
2015/08/03 职场文书
导游词之介休绵山
2019/12/31 职场文书
MySQL 开窗函数
2022/02/15 MySQL