JavaScript入门(10)

时间:2023-03-08 22:11:53

一、Window对象

window对象是BOM的核心,window对象指当前的浏览器窗口

window对象方法

JavaScript入门(10)

二、JavaScript计时器

在JavaScript中,我们可以在设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行

计时器类型:

  一次性计时器:仅在指定的延迟时间之后触发一次

  间隔性触发计时器:每个一定的时间间隔就触发一次

计时器方法:

JavaScript入门(10)

三、计时器setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。

语法:

  setInterval(代码,交互时间);

参数说明:

  代码:要调用的函数或要执行的代码串

  交互时间:周期性执行或调用表达式之间的时间间隔,以毫计(1s=1000ms)

返回值:

  一个可以传递给clearInterval()从而取消对“代码”的周期性执行的值

Eg:调用函数格式(假设有一个clock()函数)

setInterval("clock()",1000)

setInterval(clock,1000)

Eg:设置一个计时器,每隔100毫秒调用clock()函数,并将时间显示出来

<html>
<head>
<title>计时器</title>
<script type="text/javascript">
var int = setInterval(clock, 100)
function clock(){
var time = new Date();
document.getElementById("clock").value=time;
}
</script>
</head>
<body>
<from>
<input type="text" id="clock" size="50" />
</from>
</body>
</html>
/*
运行结果:Sun Dec 04 2016 17:00:00 GMT+0800(中国标准时间)
*/
<title>计时器</title>
<script type="text/javascript">
var attime;
function clock(){
var time=new Date();
attime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();//获取时间,格式“时:分:秒”
document.getElementById("clock").value = attime;
}
setInterval(clock,100)//显示动态时间
</script>
/*
运行结果:17:00:00
*/

四、取消计时器clearInterval()

clearIntval()方法可取消由setInterval()设置的交互时间

语法:

  clearInterval(id_of_setIntval)

参数说明:

  id_of_setInterval:由setIntval()返回的ID值

Eg:每隔100毫秒调用clock()函数,并显示时间。当点击按钮时,停止时间。

<html>
<head>
<tiltle>计时器</title>
<script type="text/javascript">
function clock(){
var time=new Date();
document.getElementById("clock").value=time;
}
//每隔100毫秒调用clock函数,并将返回值赋值给i
var i = setInterval("clock()",100);
function start(){
i = setInterval("clock()", 100);
}
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="clearInterval(i)" />//停止时间
<input type="button" value="Start" onclick="start()">//开始时间
</form>
</body>
</html>

 五、计时器setTimeout()

setTimeout()计时器,在载入后延迟指定时间后,去执行一次表达式,仅执行一次

语法:

  setTimeout(代码,延迟时间);

参数说明:

  1、要调用的函数或要执行的代码串

  2、延时时间:在执行代码前需要等待的时间,以毫秒为单位(1s=1000ms)。

Eg:当我们打开网页3秒后,在弹出一个提示框

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
setTimeout("alert('Hello!')", 3000);
</script>
</head>
<body>
</body>
</html>

Eg:当按钮start被点击时,setTimeout()调用函数,在5秒后弹出一个提示框

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){
var t=setTimeout("alert('Hello!')", 5000);
}
</script>
</head>
<body>
<from>
<input type="button" value="start" onClick="tinfo()">
</from>
</body>
</html>

Eg:创建一个运行于无穷循环的计数器,我们需要编写一个函数来调用其自身。(当按钮被点击后,输入域便从0开始计数)

<html>
<head>
<script type="text/javascript">
var num=0;
function numCount(){
document.getElementById('txt').value=num;
num=num+1;
setTimeout("numCount()", 1000);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>

 六、取消计时器clearTimeout()

setTimeout()和clearTimeout()一起使用,停止计时器

语法:

  clearTimeout(id_of_setTimeout)

参数说明:

  id_of_setTimeout:由setTimeout()返回的ID值。该值标识只要取消的延迟执行代码块

Eg:创建一个运行于无穷循环的计数器,添加“stop”按钮停止这个计数器

<html>
<head>
<script type="text/javascript">
var num=0,i;
function timedCount(){
document.getElementById('txt').value=num;
num=num+1;
i=setTimeout(timedCount, 1000);
}
setTimeout(timedCount, 1000);
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt">
<input type="button" value="Stop" onClick="stopCount()">
</form>
</body>
</html>

 七、颠倒数组元素顺序reverse()

recerse()方法用于颠倒数组中元素的顺序

语法:

  arrayObject.reverse()

:该方法会改变原来的数组,而不会创建新的数组

Eg:定义数组myarr并赋值,然后颠倒其元素的顺序

<script type="text/javascript">
var myarr = new Array(3)
myarr[0] = "1"
myarr[1] = "2"
myarr[2] = "3"
document.write(myarr+"<br />")
document.write(myarr.reverse())
</script>
/*
运行结果:
1, 2, 3
3, 2, 1
*/

八、选定元素slice()

slice()方法可以从已有的数组中返回选定的元素

语法:

  arryObject.slice(start, end)

参数说明:

JavaScript入门(10)

1、返回一个新的数组,包含从start到end(不包括该元素)的arratObject中的元素

2、该方法并不会修改数组,而是返回一个子数组

注:

1、可使用负值从数组的尾部选取元素

2、如果end未被规定,那么slice()方法会选取从start到数组结尾的所有元素

3、String:slice()与Array:slice()相似

Eg:创建一个新数组,然后从其中选取的元素

<script type="text/javascript">
var myarr = new Array(1, 2, 3, 4, 5, 6);
document.write(myarr + "<br />");
document.write(myarr.slice(2,4)+"<br />");
document.write(myarr);
</script>
/*
运行结果:
1, 2, 3, 4, 5, 6
3, 4
1, 2, 3, 4, 5, 6
*/

九、数组排序sort()

sort()方法使数组中的元素按照一定的顺序排序

语法:

  arrayObject.sort(方法函数)

参数说明:

JavaScript入门(10)

1、如果不指定<方法函数>,则按unicode码顺序排列

2、如果指定<方法函数>,则按<方法函数>所指定的排序方法排序

myArray.sort(sortMethod);

注:该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数a和b,其返回值如下:

  若返回值<=-1,则表示 A 在排序后的序列中出现在 B 之前。
   若返回值>-1 && <1,则表示 A 和 B 具有相同的排序顺序。
     若返回值>=1,则表示 A 在排序后的序列中出现在 B 之后。

Eg:使用sort()将数组进行排序

<script type="text/javascript">
var myarr1 = new Array("Hello","John","love","JavaScript");
var myarr2 = new Array("80","16","50","6","100","1");
document.write(myarr1.sort()+"<br>");
document.write(myarr2.sort());
</script>
/*
运行结果:
Hello, JavaScript, John, love
1, 100, 16, 50, 6, 80
*/

注:上面的代码没有按照数值的大小对数字进行排序

Eg:如要实现按照数值的大小对数字进行排序,就必须使用一个排序函数

<script type="text/javascript">
function sortNum(a,b) {
return a - b;
//升序,如降序,把“a - b”该成“b - a”
}
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr + "<br>");
document.write(myarr.sort(sortNum));
</script>
/*
运行结果:
80,16,50,6,100,1
1,6,16,50,80,100
*/