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 相关文章推荐
ext 同步和异步示例代码
Sep 18 Javascript
Javascript 判断客户端浏览器类型代码
Mar 01 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
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读取目录下所有文件的代码
2008/01/07 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
jQuery的一些注意
2006/12/06 Javascript
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
深入理解Python 代码优化详解
2014/10/27 Python
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python多线程同步实例教程
2019/08/11 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
python删除某个目录文件夹的方法
2020/05/26 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
大学生怎样写好自荐信
2014/02/25 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
增值税发票丢失证明
2015/06/19 职场文书
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL