全国咨询热线:18720358503

微信小程序分销_js完成通过开始完毕控制的计时

类别:企业动态 发布时间:2021-01-07 浏览人次:

js实现通过开始结束控制的计时器       这篇文章主要为大家详细介绍了js实现通过开始结束控制的计时器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js通过开始结束控制计时器的具体实现代码,供大家参考,具体内容如下

时间戳的使用的可以取消对多次点击事件产生效果的累加,譬如下文,运用时间戳,保证了在多次点击事件后不会对setInterval()中的时间进行叠加。

开始结束运用addEventlistener()来控制开始结束,

实时显示在你要显示的文本内容放置在setInterval()中,可实现实时显示的效果。
不足setInterval()方法所设置的时间并不能保证一直是1秒的,有误差,但是可通过前后Date()的不同控制在一定范围内才可执行,不过这里暂时没有设置这个,有空再补。

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1.0" 
 meta http-equiv="X-UA-Compatible" content="ie=edge" 
 title 简单计时器 /title 
 style type="text/css" 
 input{
 border: 1px solid black;
 text-align: right;
 font-size:20px;
 /style 
 /head 
 body 
 input type="text" id="text" value="0" 秒
 input type="button" value="开始计时" id="btn1" 
 input type="button" value="停止计时" id="btn2" 
 script type="text/javascript" 
 var time = 0;
 var seconde=0;
 var btn1 = document.getElementById("btn1");
 var btn2 = document.getElementById("btn2");
 var text = document.getElementById("text");
 function getStyle(elem, prop) {
 if (window.getComputedStyle) {
 return window.getComputedStyle(elem, null)[prop];
 } else {
 return elem.currentStyle[prop];
 var count = 1;//设置时间戳
 btn1.addEventListener("click",showTime)
 function showTime(e) {
 if(count){
 time = setInterval(function () {
 seconde++;
 text.value = seconde;
 }, 1000)
 count =0;
 btn2.addEventListener("click",stopTime)
 function stopTime(){
 clearInterval(time);
 count =1;
 /script 
 /body 
 /html 

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


推荐阅读

微信小程序分销_js完成通过开始完毕控制的计时

js完成根据刚开始完毕操纵的记时器 本文关键为大伙儿详尽详细介绍了js完成根据刚开始完毕操纵的记时器,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下文中案...

2021-01-07
【东莞网站建设】对于网站用户体验度如何提高

企业网站建设起來以后,得做提升和营销推广,为此来提升客户感受度。让它更受客户和搜索引擎蜘蛛的热烈欢迎。如今北京市seo优化权威专家来详细介绍下,网站客户感受度该如何提...

2021-01-07
同程艺龙酒店机票火车小程序:凭什么屡创新高

做为手机微信绿色生态的辛勤耕耘者和资金投入者,大伙儿都了解手机微信钱夹究竟有多强劲。假如某一微信小程序能在手机微信钱夹里占有一席的地方,在「特惠营销推广」或「第三...

2021-01-07
图片取字小程序_Vue.js + Nuxt.js 项目中使用 Vee

Vue.js + Nuxt.js 新项目中应用 Vee-validate 表格校检 vee-validate 是为 Vue.js 量身定做打造出的表格校检架构,容许您校检键入的內容并显示信息相匹配的不正确提醒信息内容。本文给大伙...

2021-01-07
婚车租赁微信小程序_详解Vue demo完成商品列表的

详细说明Vue demo完成产品目录的展现 本文关键详细介绍了Vue demo完成产品目录的展现,原文中根据实例编码详细介绍的十分详尽,对大伙儿的学习培训或是工作中具备一定的参照学...

2021-01-07
网站建设呈现泛滥趋势 打造好网站需做好三步

潜心于为公司、组织出示互连网基本的处理计划方案和移动互联网营销推广融合服务。为公司出示高质量企业网站建设服务,打造出高档企业网站建设,同价位比最大的企业网站建设企业...

2021-01-07
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信