系列文章目录

例如：第一章 Python 机器学习入门之pandas的使用

文章目录

系列文章目录
前言
一、JavaScript中的两种常用计时函数
二、详细代码
- 1.一次性计时器setTimeout
- 2.周期性计数器
- 3.闪烁的电子时钟
- 4.停止计数器clearInterval
总结

前言

JavaScript 一个设定的时间间隔之后来执行代码，我们称之为计时事件

一、JavaScript中的两种常用计时函数

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。

注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法

二、详细代码

1.一次性计时器setTimeout

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>你所看的内容九秒之后消失</h1><script>function bian(){document.body.style.backgroundColor="black";}//九秒以后调用，相当于延迟效果setTimeout(bian,9000);</script>
</body>
</html>

2.周期性计数器

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!--用JS实现变化的字体，哈哈哈，一秒一变色，也就是周期触发代码的效果核心是setInterval(1,2)，周期性计时器1：执行语句2：时间周期，单位为毫秒--></div><h1 id="title">速度考研，极速入职</h1><script>var colors = ["red","blue","yelllow","pink","orange","black"];var i=0;function bian(){document.getElementById("title").style.color=colors[i++];if(i==colors.length){i=0;}}setInterval(bian,2000);//每隔0.1秒，执行一次bian函数</script>
</body>
</html>

用JS实现变化的字体，哈哈哈，一秒一变色，也就是周期触发代码的效果
核心是setInterval(1,2)，周期性计时器
1：执行语句
2：时间周期，单位为毫秒

3.闪烁的电子时钟

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1 id="title"></h1><script>//函数名称var colors=["red","blue","yellow","black","orange","black"];var i=0;//函数体function bian(){document.getElementById("title").style.color=colors[i++];if(i==colors.length){i=0;}}//注意时间函数中的顺序，与时分秒的基本命名规范function time(){var d=new Date();var str=d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"号"+d.getHours()+"点"+d.getMinutes()+"分"+d.getSeconds()+"秒";document.getElementById("title").innerHTML=str;}//调用函数setInterval(bian,100);setInterval(time,1000);</script>
</body>
</html>

构造了速度不同的两个setInterval函数

4.停止计数器clearInterval

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img id="tu" src="img/1.jpg" width="50%" /><br><button onclick="begin()">开始</button><button onclick="stop()">停止</button><script>var arr =["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];function begin(){timer = setInterval(bian,100);}function stop(){clearInterval(timer);}function bian(){var i =Math.floor(Math.random()*arr.length);document.getElementById("tu").src="img/"+arr[i];}</script></body>
</html>

构造了三个不同的函数完成图片的切换，运行的时候，创一个img文件夹，然后把文件放进去就行

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了计数器，而且还运行确认上面的代码没有问题

JavaScript中的几种计时操作相关推荐

JavaScript中的几种继承方式及优缺点,你知道多少呢？
原文连接:JavaScript中的几种继承方式及优缺点,你知道多少呢? 继承也是前端里面的重要的一个知识点,在实际工作中或者面试中也会经常的遇到,那么通过这篇文章我们详细的了解一下继承的几种方式以及各 ...
sql中的几种删除操作
sql中的几种删除操作用法与区别 1.delete语句 Delete删除表数据,保留表结构,且可以加where,删除一行或多行. 执行删除的过程是每次从表中删除一行,并且同时将该行的删除操作作为事务记 ...
JavaScript中的9种控制流语句
JavaScript中的9种控制流语句 ECMA-262规定了一组语句(也成为流控制语句).这些语句定义了 ECMAScript 中的重要语法,有 if 语句.do-while 语句.while ...
必看干货：如何在 JavaScript 中实现 8 种基本图形算法
在本文中,我将实现8 种图算法,探索 JavaScript 中图的搜索和组合问题(图遍历.最短路径和匹配). 这些问题是从<Java编程面试要素>一书中借来的.本书中的解决方案是用 Jav ...
html dom节点类型,浅谈Javascript中的12种DOM节点类型
前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...
Javascript中的8种常见数据结构（建议收藏）
1.Stack(栈) 堆栈遵循LIFO(后进先出)的原则.如果你把书堆叠起来,上面的书会比下面的书先拿.或者当你在网上浏览时,后退按钮会引导你到最近浏览的页面. Stack具有以下常见方法: push ...
JavaScript中的几种继承方式及优缺点分析
众所周知,继承是面向对象编程思想中的三大特点(封装,继承,多态)之一. 所谓继承,通俗来讲就是子类自动拥有父类的属性和方法, 继承可以提高代码的复用性. 继承也是前端里面的重要的一个知识点,在实际工作 ...
JavaScript中的元素获取与操作
js元素获取与操作可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量,比如: <scrip ...
Javascript中的几种继承方式比较
原文地址开篇从'严格'意义上说,javascript并不是一门真正的面向对象语言.这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c#之类的强型语言的继承方式有很大的 ...

JavaScript中的几种计时操作

系列文章目录

文章目录

前言

一、JavaScript中的两种常用计时函数

二、详细代码

1.一次性计时器setTimeout

2.周期性计数器

3.闪烁的电子时钟

4.停止计数器clearInterval

总结

JavaScript中的几种计时操作相关推荐

最新文章

热门文章