JavaScript笔记
一.JavaScript概述
1.JavaScript历史
JavaScript是由Netscape公司（美国网景公司）开发的一种脚本语言， 结构简单，使用方便，对用户自身知识水
平的要求并不高，易学易懂。Netscape公司将这种脚本语言命名为LiveScript，与java一样,也是面向对象的语言,
而且无需编译，可由浏览器直接解释运行，而不象Java那样需要经过编译Netscape公司见LiveScript大有发展前
途，而SUN公司( java)也觉得可以 利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改 为
JavaScript，造就了这个强力的WEB开发工具。
2.javaScript与java的区别
相同点：面相对象
不同点：JavaScript是脚本语言运行在浏览器，java是高级语言需要整体编译后而执行
3.javaScript的作用
JavaScript一种直译式脚本语言，用来为网页添加各式各样的动态功能 （javaScript可以操作网页内容），不需要编译可直接通过浏览器解释运行通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
具体作用：
1.响应网页中产生的事件（鼠标和键盘）
2.进行客户端表单验证
3.动态改变页面标签的样式
4.JavaScript与html,css关系
二.基本语法
1.位置
javaScript脚本写在一组script标签中，此标签可以放在head中或body中，一般习惯放在 head中，还可以将脚本写在外部的.js文件中，在html页面中导入外部的.js文件
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
javaScript的具体作用：
1.响应网页中产生事件
2.进行客户端表单验证
3.动态改变标签样式
-->
<!-- javaScript的位置：写在一组<script>标签中，此标签可以改在head或body中，一般习惯在head中，还可以将脚本写在
外部额.js文件中，在html页面中导入外部的.js文件-->
<script type="text/javascript">
alert("这是我的第一个JavaScript")
</script>
<script src="js/demo.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>
2.变量
声明变量：
声明变量用var关键字
例如 var name;
声明变量的同时对其赋值
var test=“THIS IS A BOOK
数据类型：
注意：1.字符串类型 “” ‘’ 都可以表示字符串类型
2.underfined类型：声明未初始化赋值的变量
3.Object类型：表示对象型
运算：
1.算术运算符
2.赋值运算
3.比较运算
4.逻辑运算符
5.条件运算符
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 变量
// 1.声明变量 var（关键字） JavaScript是弱类型语言 java是强类型语言
/*
数据类型：
1.数值型（number）整数和浮点类型
*/
var a=10;
var b=18.5;
console.log(a+b); //28.5
// 2.布尔型 true false
var c=15;
var d=17;
console.log(c==d) //false
// 3.字符串 "" '' 都可以表示
var s='asdf';
alert(typeof(s)); //测试传入参数类型
console.log(typeof(s))
// 4.underfined类型 声明未初始化赋值的变量
var g;
alert(g);
// 5.Object类型 对象型
var date=new Date();
date.getDate();
date.getFullYear();
date.getMonth();
/*
算数运算符 + - * / % ==（递加） --（递减）
比较运算符（值得注意的） ==（值相等） ===（值和类型都相等）
逻辑运算符
注：值得注意的是字符串类型和数值类型的隐式转换
*/
</script>
</head>
<body>
</body>
</html>
3.控制语句
控制语句：
三.函数，内置对象与事件
1.函数
基本语法：
定义函数：
function functionName([arguments]){
javascript statements
[return expression]
}
/*function: 表示函数定义的关键字;
functionName:表示函数名;
arguments:表示传递给函数的参数列表，各个参数之间用逗号隔开，可以为空;
statements: 表示实现函数功能的函数体;
return expression:表示函数将返回expression的值，同样是可选的的语句。*/
调用函数：
<script type="text/javascript">
function fun(){
alert(“test”);
}fun();//函数名调用
function fun2(){
fun();//在其他函数中调用
}
</script>
全局函数：
• parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串， 则字符串开头的数字部分被转换成整数，如果以字母开头，则返回 “NaN”。
• parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的 数字部分被转换成浮点数，如果以字母开头，则返回“NaN”。
• typeof (arg)返回arg值的数据类型。
• eval(arg) 可运算某个字符串。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var a="10";
var b="10";
// 声明函数
function test(){
console.log(a+b)
}
function test1(a,b,c){ //在functio中传入的参数不用指定类型传入的参数可以是任意类型 function不用值类型
return a+b+c;
}
var d=test1(10,'11',12);
alert(d);
// 调用函数
test()
// 全局函数
// Parseint() 把括号内的内容转换成整数后的值。如果括号内是字符串则字符串开头的数字部分被转换成为整
// 数 如果是字母开头则返回 NaN
console.log(parseInt(10.5)); //10
console.log(parseInt(10)); //10
console.log(parseInt('10a1')); //10
console.log(parseInt('a10')); //NaN
// typeof(变量) 返回变量的数据类型
var d=10;
var e="10";
var f=true;
console.log(typeof(d)); //number
console.log(typeof(e)); //string
console.log(typeof(f)); //boolean
// eval(String) 可运算某个字符串 可以把一段字符串当做js脚本运行
eval("alert(111)"); //直接弹出111
</script>
</head>
<body>
</body>
</html>
2.内置对象
（1）String字符串
属性： length 用法：返回该字符串的长度
方法：
charAt(n)：返回该字符串位于第n位的单个字符.
indexOf(char)：返回指定char首次出现的位置.
lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.
substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位 置到end位置的前一位置的一段.
substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位 置开始，长度为length的一段.
split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔 符字符>决定了分离的地方，它本身不会包含在所返回的数组中。
例如：‘1&2&345&678’.split(’&’)返回数组：1,2,345,678
实例代码及注释：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 内置对象 String 字符串
var s="abcdefg";
console.log(s.length); //length() 属性：字符串长度
console.log(s.charAt(1)); // chartAt(n) ：返回该字符串位于第n位的单个字符
console.log(s.indexOf("b")); // 1 indexOf(char)：返回指定char首次出现的位置
console.log(s.lastIndexOf("b")); //1 跟 indexOf() 相似，不过是从后边开始找.
console.log(s.substring(1,3)); //bc substring(开始位置，结束位置) 如（1,3）返回的是1-2的值
console.log(s.substr(1,3)); //bcd substr() 开始位置，截取的长度 如：1-3 返回的值1,2,3
</script>
</head>
<body>
</body>
</html>
（2）Aarry数组
数组创建方式（三种）：
var <数组名> = new Array();
var <数组名> = new Array(<元素1>, <元素2>, <元素3>…);
var <数组名> = [<元素1>, <元素2>, <元素3>…];
**属性：**length ：数组的长度，即数组里有多少个元素。
方法：
concat() 用于连接两个或多个数组。arrayObject.concat(arrayX,arrayX,…,arrayX)
pop() 用于删除并返回数组的最后一个元素。
push() 可向数组的末尾添加一个或多个元素，并返回新的长度。
shift() 用于把数组的第一个元素从其中删除，并返回第一个元素的值。
slice() 可从已有的数组中返回选定的元素。arrayObject.slice(start(必须),end(可选)),该方法并 不会修改数组
splice() 向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。 splice(index(删除的位置),howmany(数量,为0不删除),item1,…,itemX(插入的元素))
join(<分隔符>) ：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元 素与元素之间。
reverse() 使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法，它将使数组变成： [3, 2, 1]。
sort() ：使数组中的元素按照一定的顺序排列。如果不指定<方法函数>，则按字母顺序排列。 对数字排序需要调用排序函数。
function sortNumber(a,b){
return a - b;
}
代码示例及注释：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//内置对象 array数组对象
// 数组的创建 不用指定数组长度和类型
// 数组创建方式 1
var array=new Array();
array[0]=1;
array[1]="2";
array[3]=true;
console.log(array); //[1,"2",empty,true]
// 创建方式2
// var aray =new Array(1,2,"3"，true);
// 创建方式3
// var array=[1,2,4,"11",15];
console.log(array.length); // 4 数组属性 length() 数组的长度即数组有多少个元素
var array2=[1,8];
var array3=[5,9];
console.log(array.concat(array2,array3)); //concat（）链接多个数组 不改变本来的数组
console.log(array.pop()); //删除数组最后一个元素斌返回它
console.log(array.push(0,0,0,0)); //向末尾添加n个元素， 并返回新的数组长度
console.log(array.shift()); //删除第一个元素并返回它
console.log(array.slice(1,3)); // 从数组中截取 slice(开始位置，结束位置)
console.log(array.splice(1,3,1,1,1,1)); //splice(index(删除的位置),howmany(数量,为0不删除),item1,.....,itemX(插入的元素))
console.log(array.join(":")); // join() 用指定的字符将数组中的每个元素连接为字符串
console.log(array.reverse()); //逆转数组
var array4=[2,5,8,9,13];
// console.log(array4.sort()) 错误用法 怎么用？
//需要定义一个排序函数然后将排序函数传入到sort()方式中
function numberSort(a,b){
return a-b;
}
console.log(array4.sort(numberSort)); //这样才是正确的用法
</script>
</head>
<body>
</body>
</html>
（3）Date对象
● 获取日期
new Date() 返回当日的日期和时间
getFullYear() 返回四位数字年份
getDate() 返回一个月中的某一天 (1 ~ 31)
getMonth() 返回月份 (0 ~ 11)
getDay() 返回一周中的某一天 (0 ~ 6)
getHours() 返回 Date 对象的小时 (0 ~ 23)
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
getSeconds() 返回 Date 对象的秒数 (0 ~ 59))
● 设定日期
setDate() 设置 Date 对象中月的某一天 (1 ~ 31))
setMonth() 设置 Date 对象中月份 (0 ~ 11))
setYear() 设置
（4）Math对象
- Math 对象，提供对数据的数学计算。
属性：PI 返回π（3.1415926535…)。
方法：
Math.abs(x) 绝对值计算；
Math.pow(x,y) 数的幂；x的y次幂
Math.sqrt(x) 计算平方根；
Math.ceil(x) 对一个数进行上舍入
Math.floor(x) 对一个数进行下舍入。
Math.round(x) 把一个数四舍五入为最接近的整数
Math.random() 返回 0 ~ 1 之间的随机数
Math.max(x,y) 返回 x 和 y 中的最大值
Math.min(x,y) 返回 x 和 y 中的最小值
3.事件
● 一些常用的事件:
onclick() 鼠标点击时；
ondblclick（） 鼠标双击时;
onblur() 标签失去焦点;
onfocus() 标签获得焦点;
onmouseover() 鼠标被移到某标签之上;
onmouseout （） 鼠标从某标签移开;
onload() 是在网页加载完毕后触发相应的的事件处理程序;
onchange() 是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。
Onkeydown 键盘按下
Onkeyup 键盘抬起
代码示例及注释：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test(){
console.log("事件触发了！")
}
</script>
</head>
<body onload="test()">
<!-- 事件 -->
<!-- 1.onclick() 鼠标左键单击事件onclick事件 单击事件-->
<input type="button" name="" id="" value="点击" onclick="test()" />
<!-- 2.ondblclick 鼠标左键双击事件 双击事件 -->
<input type="button" name="" id="" value="双击" ondblclick="test()" />
<!-- 3.onfocus 输入框获得鼠标焦点触发事件 聚焦事件 -->
<input type="text" name="" id="" value="" onfocus="test()" />
<!-- 4.onblur 输入框失去鼠标焦点事件 失焦事件-->
<input type="text" name="" id="" value="" onblur="test()" />
<!-- 5.onmouseover 鼠标移入到标签上触发 移入事件-->
<div style="width: 500px; height: 400px; background-color: aqua;" onmouseover="test()"> </div>
<!-- 6.onmouseout 鼠标移出标签触发 移出事件 -->
<div style="width: 500px; height: 400px; background-color: aqua;" onmouseover="test()"> </div>
<!-- 7.onckeydown 键盘按下时触发 -->
<input type="button" name="" id="" value="" onkeydown="test()" />
<input type="text" name="" id="" value="" onkeydown="test()" />
<!-- 8.onkeydown 键盘抬起来触发 -->
<input type="button" name="" id="" value="" onkeyup="test()" />
<input type="text" name="" id="" value="" onkeyup="test()" />
<!--9.onload 当网页加载后自动触发 放在body标签中 -->
<!-- 10.onchange 当输入框失去鼠标焦点写且内容内容发生改变事件触发-->
<input type="text" name="" id="" value="" onchange="test()" />
</body>
</html>
四.Event对象
- Event 对象代表事件的状态，比如键盘按键的键位、鼠标的位置
如：
type 事件类型
Button 被点击的鼠标键位
altKey 按下altKey返回true
ctrlKey 按下ctrlKey返回true
shiftKey按下shiftKey返回true
keyCode 返回被按下的键位编码
offsetX 当前标签内的鼠标X轴
offsetY 当前标签内的鼠标Y轴
clientX 鼠标在浏览器内部X轴
clientY鼠标在浏览器内部Y轴
screenX 鼠标在显示器内的X轴
screenY 鼠标在显示器内的Y轴
代码及注释示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/* Event对象 */
function test(a,e){
console.log(e)
}
</script>
</head>
<body>
<!-- 事件产生的同时，会创建一个event事件对象，此对象中可以包含时间的一些信息 -->
<input type="button" name="" id="" value="测试" onmousedown="test(1,event)" />
<!-- 一些信息比如： event.button 鼠标标记位 0-左键 1-滚轮 2-右键
event.type 事件的类型
-->
<div style="width: 200px; height: 500px; background-color: aquamarine;" onclick="test(1,event)" ></div>
<!-- e.offsetX+"------"+e.offsetY 获得鼠标在前亲标签中的坐标 -->
<!-- e.clientX+"------"+e.clientX 获得鼠标在浏览器中的坐标 -->
<!-- e.screenX+"------"+e.screenY 获得鼠标在显示器中的坐标 -->
<input type="text" name="" id="" value="" onkeydown="test(1,event)" />
<!-- e.keyCode 获得按键的是Askall码值 -->
<!-- e.ctrlKey 当按下键盘上键是ctrl则返回true如果不是则返回false
e.AltKey 同上
e.shiftKey 同上
-->
</body>
</html>
五.HTML Dom对象
DOM是Document Object Model文档对象（网页中的标签）模型的缩写.通过html dom，可用javaScript操作html文档的所有标签
-
js要对网页网页中的标签进行操作那么js认为网页中的每个标签都是一个对象**（dom对象）**操作网页就可以认为是操作对象
-
那么我们要在js中的标签进行操作，首先要获得网页中的标签（要操作，先获得）
-
如何获得网页中的标签？
- document对象：表示整个html文档，当浏览器加载网页时会创建个document对象
1.获得标签的四种方式
（1）通过 id 找到 HTML 标签 document.getElementById(“id");
（2）通过标签名找到 HTML 标签 document.getElementsByTagName(“p”);
（3）通过类名找到 HTML 标签 document.getElementsByClassName(“p”);
（4）通过name找到 HTML 标签 document.getElementsByName(“name");
2.HTML DOM - 改变 HTML内容
Html dom允许javaScript 改变html标签的内容。
改变 HTML 标签的属性
修改 HTML 内容的最简单的方法时使用 innerHTML 属性
document.getElementById(“username").value=“new value";
document.getElementById("image").src=“new.jpg";
document.getElementById(“div”).innerHTML=new HTML；
3.HTML DOM-改变 CSS
html dom允许 javaScript改变html标签的样式。
语法：
document.getElementById(“id”).style.property=new style;
例：
document.getElementById("p2").style.backgroundImage="url(bg.jpg)";
4.HTML DOM - 改变标签的属性
html dom允许 javaScript改变html标签的属性。
5.代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Dom 是Documeent Object Model 文档对象（网页中的标签）模型的缩写
js要对网页中的标签进行操作，那么js认为网页中的每个标签都是一个队形（dom对象）操作网页就可以认为是操作对象
那么我们要在js中的标签中进行操作，首相要获得网页中的标签（要操作，先得到）
如何获得网页中的标签？
document对象表示整个html文档，当浏览器记载网页时，会创建个document对象
如：通过id获得对象 document.getElementById（"id"）； 返回对应id的标签对象
-->
<script type="text/javascript">
function oper1(){ //操作一：对标签中的内容进行操作
var div1Obj=document.getElementById("div1");
var div2Obj=document.getElementById("div2");
div2Obj.innerHTML=div1Obj.innerHTML; //将id="div1"的标签的内容赋给id="div2标签
}
function oper2(){ //操作二：操作标签的css
var div1Obj=document.getElementById("div1");
var div2Obj=document.getElementById("div2");
// div2Obj.style.display="none"; //将id="div2"的标签隐藏
// div1Obj.style.backgroundColor="red"; //将id="div1"的标签的背景颜色变为红色
div2Obj.style.width="200px"; //将id="div2"的标签的宽度改为200px
}
function oper3(){ //操作三：操作标签属性
var text1Obj=document.getElementById("text1");
var text2Obj=document.getElementById("text2");
// text2Obj.value=text1Obj.value; 将id="text1"的标签的value属性赋给id="text1"的标签
// text1Obj.value=""; 将id="text2"的标签的value属性赋值为""
text1Obj.type="button"; //将id="text1"的标签的type属性赋值为"button"
}
</script>
<div id="div1">
div1
</div>
<div id="div2"></div>
<input type="button" name="" id="" value="测试1" onclick="oper1()" />
<!-- 点击按钮将id="div1"的标签的内容赋给id="div2标签 -->
<input type="button" name="" id="" value="测试2" onclick="oper2()" />
<!-- 点击按钮将做出oper2（）方法中的对CSS属性做出的改变-->
<input type="text" name="" id="text1" value="" />
<input type="text" name="" id="text2" value="" />
<input type="button" name="" id="" value="测试3" onclick="oper3()" />
</body>
</html>
6.一个小应用
描述：
页面中有三个按钮分别写有颜色： 红色 绿色 蓝色。点击相应的按钮页面变换相应的颜色
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function text(c){
var bodyObj=document.getElementById("body1");
bodyObj.style.backgroundColor=c;
}
</script>
</head>
<body id="body1">
<input type="button" name="" id="" value="红色" onclick="text('red')" />
<input type="button" name="" id="" value="绿色" onclick="text('green')" />
<input type="button" name="" id="" value="蓝色" onclick="text('blue')" />
</body>
</html>
效果：
7.除了id剩下三种HTMLdom对象的获取方法
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test(){
//根据标签名获取指定名称的标签对象, 得到的是一个集合, 哪怕满足条件的只有一个
//var objs = document.getElementsByTagName("input");
//var objs = document.getElementsByClassName("h");
var objs = document.getElementsByName("c");
for (var i = 0; i < objs.length; i++) {
objs[i].checked = true;
}
}
window.onload=function(){
var objs1 = document.getElementsByClassName("c1");
for (var i = 0; i < objs1.length; i++) {
objs1[i].onclick = function(){
alert(this.value); //批量为多个标签的事件绑定处理函数
}
}
}
</script>
</head>
<body>
<input type="checkbox" value="1" class="h" name="c"/>
<input type="checkbox" value="2" class="h" name="c"/>
<input type="checkbox" value="3" class="h" name="c"/>
<input type="checkbox" value="4" class="h" name="c"/>
<input type="button" value="全选" id="btn1" onclick="test()"/>
<input type="button" value="1" class="c1"/>
<input type="button" value="2" class="c1"/>
<input type="button" value="3" class="c1"/>
</body>
</html>
效果：
8.批量处理为事件绑定函数【重要】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* function test(){
} */
//匿名函数
window.onload=function(){ //在js中为onload事件 绑定一个处理函数
var btn1 = document.getElementById("btn1");
//在js代码为标签事件绑定处理函数,将js函数从html中分离出来
btn1.onclick = function(){
alert(111);
}
}
</script>
</head>
<body>
<!-- <input type="button" οnclick="test()" /> -->
<input type="button" value="保存" id="btn1"/>
</body>
</html>
六.浏览器对象（BOM对象）
1.window对象
代码示例：
父：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function Open(e){
var x=e.screenX; //鼠标在屏幕上的位置横坐标
var y=e.screenY; //鼠标在屏幕上的位置纵坐标
window.open("window-子.html","窗口","width=400 height=500 left="+x+" top="+y);
}
function show(msg){
var fatherdiv = document.getElementById("father_div");
fatherdiv.innerHTML = msg;
}
</script>
</head>
<body>
父
<div id="father_div"></div>
<iframe src="window-子.html" width="500px" height="500px" name="child"></iframe>
<input type="button" name="" id="newWindow" value="打开新窗口" onclick="Open(event)" />
<a href="window-父.html" target="_top">内联样式</a> <!-- 这里的target是可以指向内联框架在内联框架中打开指定
路径的的网页前提是得给内联框架设置名字（name属性）然后让target指向它-->
</body>
</html>
子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function showfather(){
/* var fatherObj=window.parent.document.getElementById("father_div"); //子类调用父类第一种方法
var chlidTextObj=document.getElementById("text_id"); //直接将父类对象取过来
fatherObj.innerHTML=chlidTextObj.value;
*/
var msg=document.getElementById("text_id").value; //子类调用父类第二种方法：直接调用父类的方法（通过传参）
window.parent.show(msg); //在子窗口中调用父方法
}
</script>
</head>
<body>
文本框：
<input type="text" name="" id="text_id" value="" />
<input type="button" name="" id="" value="发送" onclick="showfather()"/>
</body>
</html>
效果：
2.location对象
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//1.重新设置新地址，重定向
// location.href="window-子.html";
function assaginDemo(){
location.assign("window-子.html");
// 2.加载新页面，保留原文档（页面）
}
function reloadDemo(){
location.reload();
// 3.重新加载当前文档
}
function replaceDemo(){
location.replace("window-父.html");
// 4.用一个新文档取代当前文档，加载新页面替换当前页面,不保留原页面
}
</script>
</head>
<body>
<div></div>
<input type="button" name="" id="" value="assagin" onclick="assaginDemo()" />
<input type="button" name="" id="" value="reload" onclick="reloadDemo()"/>
<input type="button" name="" id="" value="replace" onclick="replaceDemo()" />
</body>
</html>
效果：
3.计时
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test(){
alert("弹出");
}
//在指定的时间后，调用指定的函数，只调用一次
// var t = setTimeout("test()",5000);
//每隔相同的时间调用指定的函数
var t=setInterval("test()",3000);
function clearTime(){
// clearTimeout(t); 清除计时器
clearInterval(t); //清除计时器
}
</script>
</head>
<body>
<input type="button" name="" id="" value="清除计时器" onclick="clearTime()"/>
</body>
</html>
效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YhjNmOLN-1633404576066)(C:\Users\封纪元\AppData\Roaming\Typora\typora-user-images\1631780514858.png)]](https://i-blog.csdnimg.cn/blog_migrate/ab3e7805ac4750a450392094fc25d119.png)
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
