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 相关文章推荐
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
浅说js变量
May 25 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
Javascript 解构赋值详情
Nov 17 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
php中实现简单的ACL 完结篇
2011/09/07 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中datetime模块参考手册
2017/01/13 Python
TensorFlow实现创建分类器
2018/02/06 Python
python人民币小写转大写辅助工具
2018/06/20 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
python中wx模块的具体使用方法
2020/05/15 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
介绍一下Make? 为什么使用make
2013/12/08 面试题
勤俭节约倡议书
2014/04/14 职场文书
项目申请汇报材料
2014/08/16 职场文书
装修公司管理制度
2015/08/05 职场文书
任命书格式范文
2015/09/22 职场文书