文章目录

JavaScript笔记
- 一.JavaScript概述
- - 1.JavaScript历史
  - 2.javaScript与java的区别
  - 3.javaScript的作用
  - 4.JavaScript与html,css关系
- 二.基本语法
- - 1.位置
  - 2.变量
  - 3.控制语句
- 三.函数，内置对象与事件
- - 1.函数
  - - 基本语法：
    - 全局函数：
  - 2.内置对象
  - - （1）String字符串
    - （2）Aarry数组
    - （3）Date对象
    - （4）Math对象
  - 3.事件
- 四.Event对象
- 五.HTML Dom对象
- - 1.获得标签的四种方式
  - 2.HTML DOM - 改变 HTML内容
  - 3.HTML DOM-改变 CSS
  - 4.HTML DOM - 改变标签的属性
  - 5.代码示例
  - 6.一个小应用
  - 7.除了id剩下三种HTMLdom对象的获取方法
  - 8.批量处理为事件绑定函数【重要】
- 六.浏览器对象（BOM对象）
- - 1.window对象
  - 2.location对象
  - 3.计时

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 falsevar 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() 	把括号内的内容转换成整数后的值。如果括号内是字符串则字符串开头的数字部分被转换成为整// 数 如果是字母开头则返回 NaNconsole.log(parseInt(10.5));    //10   console.log(parseInt(10));    //10console.log(parseInt('10a1'));    //10console.log(parseInt('a10'));    //NaN// typeof(变量)     返回变量的数据类型var d=10;var e="10";var f=true;console.log(typeof(d));     //numberconsole.log(typeof(e));     //stringconsole.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如果不是则返回falsee.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(){      //操作二：操作标签的cssvar 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>