JavaScript中的几种计时操作
系列文章目录
例如：第一章 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文件夹，然后把文件放进去就行
总结
例如：以上就是今天要讲的内容，本文仅仅简单介绍了计数器，而且还运行确认上面的代码没有问题