js实现内置计时器


Posted in Javascript onDecember 16, 2019

计时器对于图片轮播和倒计时之类的与时间相关的项目有着很大的联系,它是实现这些的核心语法,如何一次深刻理解js计时器?往下看你就知道,有惊喜哦!

js计时器有两种,一种为延时后单次的执行,另一种为延时多次执行。通过函数的递归,前者也可以打破壁垒,拥有循环执行的功能。

setTimeout(  javascript语句  , 毫秒);
(其中第一个值可以是一个函数  需要加" ",也可以是代码)

//延迟一段时间 执行 执行一次

 setInterval("javascript语句"  , 毫秒);
(其中第一个值可以是一个函数  需要加" ",也可以是代码)

 //循环执行

具体实例 (一些细节和具体的用法还是在案例代码中便于理解)

<!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>
  </head>
 
<body>
  <button id="none">停止计时器</button>
  <button id="start">开始计时器</button>
  <script>
    // 有两个计时器
    // setTimeout();
    // 延迟一段时间 执行 执行一次
    // setInterval();
    // 循环执行
    var stoptime=document.getElementById('none');//默认从零开始自加 获取开始按钮
    var starttime=document.getElementById('start');//获取停止按钮
    var count=0;
    var timecount;
    // 第一种
    /*showtime();
    function showtime(){
      count++;
      console.log(count);
      timecount=setTimeout('showtime()',1000);//延时一秒
    }//利用递归来实现循环时间
    stoptime.onclick=function(){//停止计时器
      clearTimeout(timecount);//将计时器清除,即停止自加
    }
    starttime.onclick=function(){//开始计时器
      timecount=setTimeout('showtime()',1000);//继续开始自加
    }*/
//优点:重启计时器简单,由于是原本是单次执行,只需将之前的递归函数重新复制即可 缺点:需要递归调用
    // 第二种
    showtime();
    function showtime(){//封装函数
      timecount=setInterval(function(){
        count++;
        console.log(count);
      },1000)
    }
    stoptime.onclick=function(){
      clearInterval(timecount);
    }
    starttime.onclick=function(){
      showtime();
    }
//优点:不需要递归调用,直接实现循环。缺点:重启较复杂,需要调用所有函数,建议封装函数。
  </script>
</body>
 
</html>

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

Javascript 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
对比分析json及XML
Nov 28 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
初识Javascript小结
Jul 16 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 Javascript
js实现秒表计时器
Dec 16 #Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 #Javascript
js实现计时器秒表功能
Dec 16 #Javascript
原生Vue 实现右键菜单组件功能
Dec 16 #Javascript
axios如何取消重复无用的请求详解
Dec 15 #Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 #Javascript
Angular6项目打包优化的实现方法
Dec 15 #Javascript
You might like
一个多文件上传的例子(原创)
2006/10/09 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
php图片上传类 附调用方法
2016/05/15 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
IE6 fixed的完美解决方案
2011/03/31 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
微信小程序中setInterval的使用方法
2017/09/29 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
原生js实现公告滚动效果
2021/01/10 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
提升python处理速度原理及方法实例
2019/12/25 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
中国最大的团购网站:聚划算
2016/09/21 全球购物
函授大专自我鉴定
2013/11/01 职场文书
公司合作协议书范本
2014/04/18 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
九寨沟导游词
2015/02/02 职场文书
公司规章制度范本
2015/08/03 职场文书
预备党员入党感想
2015/08/10 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS