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 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
JS获取父节点方法
Aug 20 Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
微信小程序时间轴实现方法示例
Jan 14 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
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/03/27 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
Python匹配中文的正则表达式
2016/05/11 Python
Python面向对象之继承代码详解
2018/01/29 Python
详解django三种文件下载方式
2018/04/06 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
python实现ID3决策树算法
2018/08/29 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
沂蒙六姐妹观后感
2015/06/08 职场文书
中学教师读书笔记
2015/07/01 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
商业计划书范文
2019/04/24 职场文书