JavaScript

概述

JavaScript: 动态操作网页中标签和css样式的脚本语言

一种直译式的脚本语言,用来为网页添加各种各样的动态效果

历史:

JavaScript 原名 LiveScript 由sun公司与网景公司合作改名为JavaScript

与java的异同

相同点:

面向对象的语言

不同点:

JavaScript属于脚本语言,运行在网页浏览器中,不需要编译,由某种解释器解释执行

Java是高级语言,需要经过整体编译后再执行

作用:

相应网页中产生的事件
进行表单客户端验证
动态改变标签样式

一个完整的网页由三部分组成

HTML:构成网页的基本内容和结构

CSS:为网页的内容添加各种样式

JavaScript: 动态操作标签与css样式

基本语法

位置

位置:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        //从外部链接
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        //写在head或body中
		<script type="text/javascript">
            //window网页中最大的对象--窗口
			//window.alert("hello JavaScript");
			alert("hello JavaScript");
		</script>
	</body>
</html>

js文件(JavaScript公认的缩写

alert("网页外部消息");

注释

// 单行注释
/**/ 多行注释

变量

// 声明变量  使用关键字var js是弱类型语言
var a=10;
var b="10";
var c=10.5;
//console.log(a);//10
//相当于java中的System.out.print()
//console控制台对象,

数据类型(5种)

数值型

//数值型
var d=10;//整型
var e=10.5;//浮点型

布尔型

//布尔型
var f=true;
var g=false;
//console.log(f==g);

字符串型

/* 字符串
''  ""  都表示字符串
*/
var str1="string1";
var str2='string2';
//alert(typeof(str2));//typeof(变量名) 获取变量类型
//console.log(str1+str2);

undefined型(未声明型)

/* undefined类型 */
var h;
//console.log(h);//undefined

Object型

/* Object类型  对象 */
var date = new Date();
date.getMinutes();
//alert(date.getFullYear());//2021

运算符

算数运算符

/* 算数运算符 + - * / % ++ -- */
// + 1参与算数运算 2连接字符串

console.log(a+b);//20
console.log(a+c);//20.5

//  - * /  %  -= -- 都会隐式转换
console.log(a-b);//0
console.log(a*c);//105
console.log(--b);//9

赋值运算符

/* 赋值运算符
= += -= *= /= %= 
除+=外都会隐式转换
*/
console.log(a*b);//90

比较运算符

/* 比较运算符
== 比较值相等
===(全等,比较值与类型是否相等) 
> < >= <= != 
都会进行隐式转换
*/
console.log(a==10);//true
console.log(a==="10");//false

逻辑运算符

/* 逻辑运算符
&& 逻辑短路与  || 逻辑短路或  ! 逻辑非运算
*/
console.log(a==b&&a==c);//false

条件运算符

/* 条件运算符 */
var res = "9"===b?true:false;
console.log(res);//false  在之前的运算中,b已经隐式转换为整形

控制语句

选择结构

if(单一选择结构)

<script type="text/javascript">
if(条件表达式){
	//满足条件时执行
	代码块
}
</script>

if…else(二路选择结构)

<script type="text/javascript">
if(条件表达式){
	//满足条件时执行
	代码块1
}else{
	//不满足条件时执行
	代码块2
}
</script>

(switch)多路选择结构

<script type="text/javascript">
switch(表达式) {
   case n:
    代码块
    //遇到break终止switch/或循环,否则一直往下执行
    break;
   case m:
    代码块
    break;
   default:
   //当case中没有符合表达式的值时,执行此代码块
    默认代码块
} 
</script>

<script type="text/javascript">
			switch (new Date().getDay()) {
			  case 0:
			    day = "星期天";
			    break;
			  case 1:
			    day = "星期一";
			     break;
			  case 2:
			    day = "星期二";
			     break;
			  case 3:
			    day = "星期三";
			     break;
			  case 4:
			    day = "星期四";
			     break;
			  case 5:
			    day = "星期五";
			     break;
			  case 6:
			    day = "星期六";
			}
			console.log(day);
</script>
//结果为:   星期三

循环结构

for

for(;){
	代码块
}

<script type="text/javascript">
    for(var i=0;i<10;i++){
        console.log(i+"js");
    }
</script>

while(先判断后执行)

while(表达式){
	//表达式成立时执行代码块
	代码块
}

<script type="text/javascript">
    var x = 0
    while(x>1){
        x--;
    }
    console.log(x);
    //结果:  0
</script>

do…while(先执行后判断)

do{
	//无论条件是否成立,都先执行一次代码块,再去判断条件是否成立
	代码块
}while(表达式)

<script type="text/javascript">
    var x = 0;
    do{
        x--;
    }while(x>1)
    console.log(x);
    //结果:  -1
</script>

函数

定义:

函数定义的基本语法：

<script type="text/javascript">
function functionName([arguments]){
	javascript statements
	[return expression]
}
</script>

function: 表示函数定义的关键字;

functionName:表示函数名;

arguments:表示传递给函数的参数列表，各个参数之间用逗号隔开，可以为空;

statements: 表示实现函数功能的函数体;

return expression:表示函数将返回expression的值，同样是可选的的语句。

调用

可以在函数中调用,也直接调用

<script type="text/javascript">
    /* 声明函数 关键字function 
    语法: function 函数名([arguments]){函数体;return 返回值}
    */
    function test(){
    console.log("test函数");
    }
    //直接调用
    test();
    test1(){
    	//函数中调用
    	test();
    }
</script>

全局函数

全局函数	说明
parseInt(arg)	将参数转为整形(100.0–>100) ; 字符开头的字符串会转为NaN(“a100”–>NaN) ;数字开头的字符串会将开头数字转为整型(“100a00”–>100)
parseFloat(arg)	将参数转为浮点形(100–>100.0) ; 字符开头的字符串会转为NaN(“a100.0”–>NaN) ;数字开头的字符串会将开头数字转为浮点型(“100.5a00”–>100.5)
typeof(arg)	返回参数的数据类型(number,string,boolean,undefined,Object)
eval(arg)	可运算某个字符串把一段字符串当做js脚本运行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/* 声明函数 关键字function 
			语法: function 函数名([arguments]){函数体;return 返回值}
			*/
			function test(){
				console.log("test函数");
			}
			//test();//test函数
			
			function test1(a,b,c){
				console.log(a);
				console.log(b);
				console.log(c);
			}
			//test1("test1",100,true);//test1,100,true
			
			function test2(a,b,c){
				return a+b*c;
			}
			//console.log(test2(10,"1",10));//20  乘法时字符串会隐式转换
			
			/* 全局函数 
			parseInt()   转为整形   字符开头的字符串会NaN 数字开头的字符串会将开头数字转为整形
			parseFloat() 转为浮点型  字符开头的字符串会NaN 数字开头的字符串会将开头数字转为浮动形
			typeof() 返回变量的数据类型
			eval() 可运算某个字符串  把一段字符串当做js脚本运行
			*/
		   //parseInt()
		   console.log(parseInt("10")+10);//20
		   console.log(parseInt("10a10")+10);//20
		   console.log(parseInt("a100")+10);//NaN
		   
		   // parseFloat()
		   console.log(parseFloat("10.5")+10.5);//21
		   console.log(parseFloat("10.5A1")+10.5);//21
		   console.log(parseFloat("A10.5")+10.5);//NaN
		   
		   // typeof()
		   console.log(typeof("typeof()"));//string
		   console.log(typeof(10.5));//number
		   console.log(typeof(true));//boolean
		   
		   // eval()
		   eval("console.log(15+10)");//30
		   var res ="alert(10+10)";
		   eval(res);
			
		</script>
	</body>
</html>

内置对象

String字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/* 内置对象
			String  Array Date Math
			 */
			//字符串对象
			var str = "hello javascript";
			//根据索引查看元素
			console.log(str.charAt(15));//t
			//查找指定元素的索引(从第一个开始)
			console.log(str.indexOf("l"));//2
			//查找指定元素的索引(从最后一个开始)
			console.log(str.lastIndexOf("l"));//3
			//substring(start,end)返回子串,从start到end(不包括)
			console.log(str.substring(1,15));//ello javascrip
			//substr(start,length)返回子串,start开始位置,length返回的长度
			console.log(str.substr(1,15));//ello javascript
			//以字符串中的指定字符分割,返回数组
			console.log(str.split(" "));//'hello', 'javascript'
		</script>
	</body>
</html>

Array数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">			
			/* Array */
			//数组声明方式
			//var arr = new Array();
			//var arr = new Array(1,2.5,"3",true);
			//var arr = [1,2.5,"3",true];
			
			var arr = [1,2,3];
			var arr1 = [4,5];
			var arr2 = [6];
			// concat() 连接多个数组
			console.log(arr.concat(arr1,arr2));//[1, 2, 3, 4, 5, 6]
			//pop() 删除并返回数组最后一个元素
			console.log(arr.pop());//3
			//push()  向数组末尾添加n个元素,返回新长度
			console.log(arr.push(3,4,5,6));//6
			//shift() 删除并返回第一个元素
			console.log(arr.shift());//1
			console.log(arr);// [2, 3, 4, 5, 6]
			//slice(start,end)start开始位置,end前一位置
			//返回数组中指定索引范围的元素,不修改原数组
			console.log(arr.slice(0,4));//[2, 3, 4, 5]
			//splice(开始位置,操作数量,item1,item2..)
			//数组中添加/删除元素,返回被删除的元素,且会改变原数组
			console.log(arr.splice(2,5,4,5,6,7,8));//[4, 5, 6]
			console.log(arr);//[2, 3, 4, 5, 6, 7, 8]
			//join(arg) 返回一个字符串,每个元素用指定字符连接起来
			console.log(arr.join("-"));//  2-3-4-5-6-7-8
			//reverse() 逆序
			console.log(arr.reverse());//[8, 7, 6, 5, 4, 3, 2]
			
			/* 数组排序 sort()
			 字符排序:直接使用
			 数字排序:需要指定排序的函数
			 */
			var str = ["b","d","c","a"];
			var int = [5,2,11,4,33];
			console.log(arr.sort());// ['a', 'b', 'c', 'd']
			function numberSort(a,b){
				return a-b;
			}
			console.log(int.sort(numberSort));
		</script>
	</body>
</html>

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() //设置 Date 对象中的年份（两位或四位数字）

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

事件

标签可以产生事件,事件会触发函数,从而操作标签

这里有一些常用事件:

事件	发生在…
onclick	鼠标点击时
ondblclick	鼠标双击时
onblur	标签失去焦点
onfocus	标签获得焦点
onmouseover	鼠标被移到某标签之上
onmouseout	鼠标从某标签移开
onload	在网页加载完毕后触发相应的的事件
onchange	指当前标签失去焦点并且标签的内容发生改变时触发事件
onkeydown	键盘按下
Onkeyup	键盘抬起

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<!-- onload  网页加载完触发事件(用在body中) -->
	<body onload="loadTest()">
		<script type="text/javascript">
			function loadTest(){
				alert("网页加载完毕");
			}
			function test(){
				console.log("test函数被调用");
			}
			function focusTest(){
				console.log("聚焦");
			}
			function blurTest(){
				console.log("失焦");
			}
			
			function overTest(){
				console.log("移入");
			}
			function outTest(){
				console.log("移出");
			}
			function changeTest(){
				console.log("文本框内容已改变");
			}
			function downTest(){
				console.log("键盘按下");
			}
			function upTest(){
				console.log("键盘抬起");
			}
		</script>
		<!-- onclick  单击事件 -->
		<input type="button" name="" id="" value="单击" onclick="test()"/>
		<!-- ondbclick 双击事件 -->
		<input type="button" name="" id="" value="双击" ondblclick="test()"/>
		<!-- onblur 标签失去焦点事件 -->
		<!-- onfocus  标签获得焦点事件 -->
		<input type="text" name="" id="" value="" onblur="blurTest()" onfocus="focusTest()"/>
		<!-- onmouseover 鼠标移入(悬浮事件) -->
		<!-- onmouseout  鼠标移出事件 -->
		<div style="width: 100px; height: 100px; background-color: blanchedalmond;" onmouseover="overTest()" onmouseout="outTest()" >
		</div>
		
		<!-- onchange 失去焦点,内容改变 触发事件(输入框) -->
		<input type="text" name="" id="" value="失焦,内容改变" onchange="changeTest()"/>
		<!-- onkeydown  键盘按下 -->
		<!-- onkeyup    键盘抬起 -->
		<input type="text" name="" id="" value="" onkeydown="downTest()" onkeyup="upTest()" />
	</body>
</html>

Event对象

事件发生以后，会产生一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，所有的事件都是这个对象的实例

Event 对象代表事件的状态，比如键盘按键的键位、鼠标的位置

Event对象	说明
type	事件类型
Button	被点击的鼠标键位
altKey	按下alt键返回true
ctrlKey	按下ctrl键返回true
shiftKey	按下shift键返回true
keyCode	返回被按下的键位编码
offsetX,offsetY	当前标签内的鼠标X轴,当前标签内的鼠标Y轴
clientX,clientY	鼠标在浏览器内部X轴,鼠标在浏览器内部Y轴
screenX ,screenY	鼠标在显示器内的X轴,鼠标在显示器内的Y轴

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test(e){
				//返回被点击的鼠标键位(0左键1滚轮2右键)
				console.log("鼠标键位: "+e.button);
				//返回事件类型
				console.log("事件类型: "+e.type);
				
				
			}
			function test1(e){
				//返回按键的编码
				console.log("键位编码: "+e.keyCode);
				//按下ctrl键返回true
				if(e.ctrlKey){
					console.log("按下ctrl");
				}
				//按下alt键返回true
				if(e.altKey){
					console.log("按下alt");
				}
				//按下shift键返回true
				if(e.shiftKey){
					console.log("按下shift");
				}
			}
			function test2(e){
				//获得鼠标在当前标签中的坐标
				console.log("标签中坐标: "+e.offsetX+","+e.offsetY);
				//获得鼠标在当前浏览器中的坐标
				console.log("浏览器中坐标: "+e.clientX+","+e.clientY);
				//获得鼠标在当前显示器中的坐标
				console.log("显示器中坐标: "+e.screenX+","+e.screenY);
			}
		</script>
	</head>
	<body>
		<!-- 事件对象
			事件产生的同时,会产生一个event事件对象,此对象可以包含一些事件的信息
		-->
		<input type="button" name="" id="" value="按钮" onmousedown="test(event)"/>
		<input type="text" name="" id="" value=""  onkeydown="test1(event)"/>
		<div  style="width: 100px; height: 100px; background-color: aqua;" onclick="test2(event)">
			
		</div>
	</body>
</html>

HTMLDOM

html DOM对象:是一类对象的统称
js 要对网页中的标签进行操作,那么js认为网页中的每一个标签都是一个对象(DOM对象)
document对象: 表示整个HTML文档当浏览器加载网页时,会创建一个document对象
操作网页可以认为是操作对象
想要在js中对网页的标签进行操作,首先要获得网页中的标签(要操作,先获取)

那么如何获取网页中的标签呢?我们有四种方式
1.通过id获取: document.getElementById(“id”);
2.通过class: document.getElementsByClassName(“class”);
3.通过标签: document.getElementsByTagName(“p”);
4.通过name属性:document.getElementsByName(“name”);

修改HTML内容

document.getElementById(“选择器”).innerHTML=new HTML

修改HTML标签的属性

document.getElementById(“选择器").属性="值";

修改CSS样式

document.getElementById("id").style.property ="值";

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test(){
				var res = document.getElementById("div1");
				console.log(res);
			}
			function hide(){
				// 先获取网页中标签
				var res = document.getElementById("div1");
				// 再操作
				res.style.display="none";
			}
			function unhide(){
				var res = document.getElementById("div1");
				res.style.display="block";
			}
			function copy(){
				var text1 = document.getElementById("text1");
				var text2 = document.getElementById("text2");
				
				text2.value = text1.value;
				text1.value = "";	
			}
		</script>
	</head>
	<body>		
		<div id="div1">
			div1
		</div>
		
		<!-- 1对标签的内容进行操作 -->
		<input type="button"  value="获取" onclick="test()"/>
		<hr>

		<!-- 对标签的CSS进行操作 -->
		<input type="button"  value="隐藏" onclick="hide()"/>
		<input type="button"  value="显示" onclick="unhide()"/>
		<hr >
		
		<!-- 对标签的属性进行操作 -->
		<input type="text" id="text1" />
		<br>
		<input type="text" id="text2" />
		<input type="button" value="复制" onclick="copy()"/>
	</body>
</html>

事件

js对html标签触发的时间做出处理/响应

document.getElementById("#id值").onclick=function(event){//匿名函数
//函数体
}
//此段代码写在onload(写在body中或)中或此dom标签之后
//onload:1. <body οnlοad="load()"></body>
//  	 2. window.οnlοad=fuction(){}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		/** var obj = document;
		 * obj.innerHTML  操作标签内容
		 * obj.style  操作标签的样式
		 * obj.属性   操作标签的属性
		 * 事件的其他用法
		 */
			//在js中为onload事件绑定一个事件函数
 			window.onload=function(){
				//放在onload中
				//在js中为标签事件绑定一个处理函数,将函数从html中分离出来
				//匿名函数
				//根据标签的id获取对象
				var btn1 = document.getElementById("btn1").onclick=function(){
					alert("hello");
				};
				
				/**
				 * 批量为多个标签事件绑定函数
				 */
				var quanxuan = document.getElementById("quanxuan").onclick=function(){
					//根据标签的class类名获取对象
					var checkbox = document.getElementsByClassName("checkbox");
					for (var i = 0; i < checkbox.length; i++) {
						checkbox[i].checked=true;
					}
				};
				
				var getObj = document.getElementById("getObj").onclick=function(){
					//根据标签的属性name获取对象
					//var get = document.getElementsByName("n");
					//
					var get = document.getElementsByTagName("input");
					
					for (var i = 0; i < get.length; i++) {
						console.log(get[i].value);
					}
				}
				
				
			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="btn1" value="按钮" />
		<hr >
		
		
		<input type="button" name="" id="quanxuan" value="全选" />
		<input type="checkbox" class="checkbox" name="" id="" value="" />复选框1
		<input type="checkbox" class="checkbox" name="" id="" value="" />复选框2
		<input type="checkbox" class="checkbox" name="" id="" value="" />复选框3
		<input type="checkbox" class="checkbox" name="" id="" value="" />复选框4
		<input type="checkbox" class="checkbox" name="" id="" value="" />复选框5
		<hr >
		
	</body>
</html>

window

window表示浏览器中打开的窗口

js中所有对象,函数,变量均为window对象的成员

全局变量是window对象的属性
全局函数是window对象的方法

Window对象常用的属性：

window.innerHeight – 浏览器窗口的内部高度
window.innerWidth – 浏览器窗口的内部宽度
window.parent获得父级窗口对象(父子级之间调用)

Window对象常用的方法

window.open(‘url’, ‘name’,’features’) – 打开新窗口

features:一个可选的字符串，声明了新窗口要显示的标准浏览器的特征

创建一个子窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
            //向父窗口发送信息
			function send(){
				var msg = document.getElementById("msg").value;
				window.parent.show(msg);
				//var parentMsg = window.parent.document.getElementById("text");
				//parentMsg.innerHTML = msg;
			}
			
		</script>
	</head>
	<body>
		<h1>子窗口</h1>
		<input type="text" name="" id="msg" value="" />
		<input type="button" name="" id="" value="发送" onclick="send()"/>
	</body>
</html>

创建一个父窗口,将子窗口内联进来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
            //显示从内联子窗口接收的信息
			function show(msg){
				var text = document.getElementById("text");
				text.innerHTML = msg;
			}
			
			function openNewWin(e){
                //鼠标相对于屏幕的坐标
				var x = e.screenX;
				var y = e.screenY;
				window.open("child.html","child","width=300,height=300,left="+x+",top="+y);
			}
		</script>
	</head>
	<body>
		<h1>父窗口</h1>
		<iframe src="child.html"  width="" height=""></iframe>
		<p id="text">
			
		</p>
		<input type="button" name="" id="" value="打开新窗口" onclick="openNewWin(event)"/>
		<a href="https://www.baidu.com/" target="child" >百度</a>
		
	</body>
</html>

Location对象

location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

window.location 对象在编写时可不使用 window 这个前缀。

属性：

href设置或返回完整的 URL

方法：

assign(url)加载一个新的文档
reload()重新加载当前文档
replace(url) 可用一个新文档取代当前文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		
			alert(location.href);//获取当前页面的地址
			//location.href="child.html";//重新设置地址 重定向
			function assignTest(){
				//加载新窗口,保留原窗口
				location.assign("parent.html");
				
			}
			function reloadTest(){
				location.reload();//刷新当前页面
			}
			function replaceTest(){
				//替换当前页面,不保留
				location.replace("child.html");
			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="" value="assign" onclick="assignTest()"/>
		<input type="button" name="" id="" value="reload" onclick="reloadTest()"/>
		<input type="button" name="" id="" value="replace" onclick="replaceTest()"/>
	</body>
</html>

计时

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

方法:

setTimeout(“函数”,”时间”)未来的某时执行代码
clearTimeout() 取消 setTimeout()
setInterval(“函数”,”时间”)每隔指定时间重复调用指定函数
clearInterval()取消setInterval()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var t1;//指定时间后执行一次
			var t2;//每个一段时间执行一次
			
			
			function test(){
				alert("定时器");
			}
			
			function settime(){
				//setTimeout("函数()",毫秒值);指定时间后,调用指定函数
				t1 = setTimeout("test()",2000);
			}
			
			//每隔一段指定时间执行一次指定函数
			function setInttime(){
				t2 = setInterval("test()",3000);
			}
			
			function cleartime(){
				//取消指定的计时器
				//clearTimeout(t);
				clearInterval(t2)
			}
			
		</script>
	</head>
	<body>
		<div id="div1">
			
		</div>
		<input type="button" name="" id="" value="开始" onclick="settime()"/>
		<input type="button" name="" id="" value="取消" onclick="cleartime()"/>
		<input type="button" name="" id="" value="每3秒" onclick="setInttime()"/>
	</body>
</html>

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/15627.html

JavaScript笔记

JavaScript笔记

JavaScript

概述

基本语法

位置

注释

变量

数据类型(5种)

运算符

算数运算符

赋值运算符

比较运算符

逻辑运算符

条件运算符

控制语句

选择结构

if(单一选择结构)

if…else(二路选择结构)

(switch)多路选择结构

循环结构

for

while(先判断后执行)

do…while(先执行后判断)

函数

定义:

调用

全局函数

内置对象

String字符串

Array数组

Date

Math

事件

Event对象

HTMLDOM

事件

window

Location对象

计时

JavaScript笔记

JavaScript笔记

JavaScript

概述

基本语法

位置

注释

变量

数据类型(5种)

运算符

算数运算符

赋值运算符

比较运算符

逻辑运算符

条件运算符

控制语句

选择结构

if(单一选择结构)

if…else(二路选择结构)

(switch)多路选择结构

循环结构

for

while(先判断后执行)

do…while(先执行后判断)

函数

定义:

调用

全局函数

内置对象

String字符串

Array数组

Date

Math

事件

Event对象

HTMLDOM

事件

window

Location对象

计时

相关推荐

分享到: