js实现倒计时器自定义时间和暂停


Posted in Javascript onFebruary 25, 2019

js倒计时器可自定义时间和暂停,效果如下,点击start 开始计时,end结束计时

js实现倒计时器自定义时间和暂停

分别复制 H5 css js 代码即可实现,具体的算法在js控制函数中(都写了注释)

css

html,body{
width:100%;height:100%;
}
.content{
height:100%;width:100%; 
}
.row-center{
display:flex;flex-direction:row;justify-content:center;
align-items:center;
}
.tc-input-style{
outline:none;border:none;width:20%;height:80%;border-radius:10px;
}
.tc-span-style{
width:30%;height:100%;font-weight:bold;
}
.tc-font-style{
font-size:15px;font-weight:bold;
}
.tc-div-style1{
height:33%;width:100%
}
.tc-div-style0{
height:30%;width:100%
}
.tc-div-style2{
height:10%;width:100%; 
}
.tc-div-style3{
height:100%;width:30%
}
.column-center{
display:flex;flex-direction:column;justify-content:center;
align-items:center;
}
.column-start-center{
display:flex;flex-direction:column;justify-content:flex-start;
align-items:center;
}
#timecount{
height:50%;width:20%;
}
.button-style-0{
border-radius:10px;
}
.row-space-around{
display:flex;flex-direction:row;justify-content:space-around;
align-items:center;
}

h5

<body>
<div class="content row-center"> 

  <div id="timecount" class="column-center tc-font-style" >
  <div class="column-start-center tc-div-style0" >
  <div class="row-center tc-div-style1" ><span class="tc-span-style row-center">小时:</span><input class=tc-input-style id="hour_count" value="0"> </div>
  <div class="row-center tc-div-style1" ><span class="tc-span-style row-center">分钟:</span><input class=tc-input-style id="minute_count" value="0"> </div>
  <div class="row-center tc-div-style1" ><span class="tc-span-style row-center">秒:</span><input class=tc-input-style id="second_count" value="0"> </div>
  </div>

  <div class="row-center tc-div-style2">
  <div class="row-center tc-div-style3" id="hour_show" ></div>
  <div class="row-center tc-div-style3" id="minute_show"></div>
  <div class="row-center tc-div-style3" id="second_show"></div>
  </div>

  <div class="row-space-around tc-div-style2">
  <button class="button-style-0" onclick="timecounts()">start</button>
  <button class="button-style-0" onclick="timestop()">stop</button>
  </div>

  </div>


</div>
</body>

记得引入jq

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

JS

<script type="text/javascript">
var timecount;//定义一个全局变量
function timer(intDiff){
 //定义一个循环函数每一秒定时执行
 timecount=setInterval(function(){
 var hour=0,
 minute=0,
 second=0;//初始化时间默认值 
 //算法控制
 if(intDiff > 0){
 hour = Math.floor(intDiff / (60 * 60)) ;
 minute = Math.floor(intDiff / 60) - (hour * 60);
 second = Math.floor(intDiff) - (hour * 60 * 60) - (minute * 60);
 }
 if (minute <= 9) minute = '0' + minute;
 if (second <= 9) second = '0' + second;
 //打印到dom
 $('#hour_show').html('<s id="h"></s>'+hour+'时');
 $('#minute_show').html('<s></s>'+minute+'分');
 $('#second_show').html('<s></s>'+second+'秒');
 intDiff--;
 }, 1000);
 console.log(intDiff); 
}

function timecounts(){
 console.log($("#hour_count").val())
 count=parseInt($("#hour_count").val()*3600)+parseInt($("#minute_count").val()*60)+parseInt($("#second_count").val())
 timer(count);//调用计时器函数
 console.log(count);
}
function timestop(){
 var hour= $("#hour_show").text();
 var minute= $("#minute_show").text();
 var second= $("#second_show").text();
 var time=parseInt($("#hour_show").text())*3600+parseInt($("#minute_show").text())*60+parseInt($("#second_show").text())
 console.log(time);
 timecount=window.clearInterval(timecount);//停止计时器
}
</script>

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

Javascript 相关文章推荐
判断控件是否已加载完成的代码
Feb 24 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
JS module的导出和导入的实现代码
Feb 25 #Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 #Javascript
js实现网页同时进行多个倒计时功能
Feb 25 #Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 #Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 #Javascript
写一个Vue Popup组件
Feb 25 #Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 #Javascript
You might like
php curl模拟post提交数据示例
2013/12/31 PHP
php向js函数传参的几种方法
2014/08/10 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
python计算一个序列的平均值的方法
2015/07/11 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
python绘制多个曲线的折线图
2020/03/23 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
numpy.where() 用法详解
2019/05/27 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
纠纷协议书
2014/04/16 职场文书
欢迎领导标语
2014/06/27 职场文书
毕业生个人自荐书
2015/03/05 职场文书
电台广播稿范文
2015/08/19 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
golang中的并发和并行
2021/05/08 Golang
Vue和Flask通信的实现
2021/05/19 Vue.js
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python