JavaScript入门(10)

一、Window对象

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

window对象方法

二、JavaScript计时器

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

计时器类型：

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

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

计时器方法：

三、计时器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)

参数说明：

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(方法函数)

参数说明：

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

*/

JavaScript入门(10)的更多相关文章

JavaScript基础入门10
目录 JavaScript 基础入门10 正则表达式为什么使用正则表达式? 正则表达式的应用场景如何创建一个正则表达式基础语法具有特殊意义的转义字符量词字符类贪婪模式练习邮箱验证中 ...
开心菜鸟系列－－－－函数作用域（javascript入门篇）
1 <!DOCTYPE html> 2 <html> 3 <script src="./jquery-1.7.2.js"></ ...
开心菜鸟系列－－－－变量的解读（javascript入门篇）
console.info( console.info(window['weiwu']) console.info(window. ...
javascript入门视频第一天小案例制作零基础开始学习javascript
JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此 ...
JavaScript 入门案例
四. JavaScript 入门案例在看本节之前,笔者建议您先看 JavaScript 基础篇 https://www.cnblogs.com/IT-LFP/p/10945884.html 1. ...
JavaScript入门笔记
第一章 JavaScript语法 1.1 初识JavaScript 1.3 数据类型 1.4 string和boolean类型 1.5 算数操作符第二章 JavaScript流程控制语句 2.1 循 ...
JavaScript入门-函数function(二)
JavaScript入门-函数function(二) 递归函数什么是递归函数? 递归简单理解就是,在函数体里,调用自己. //我们在求一个10的阶乘的时候,可能会这么做 //写一个循环 var to ...
Cesium入门10 - 3D Tiles
Cesium入门10 - 3D Tiles Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 我们团队有时把Ces ...
JavaScript学习10 JS数据类型、强制类型转换和对象属性
JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...

随机推荐

bzoj 1432 [ZJOI2009]Function（找规律）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1432 [思路] 找(cha)规(ti)律(jie) 分析戳这儿 click here ...
POJ 2429
思路:a/n*b/n=lcm/gcd 所以这道题就是分解ans.dfs枚举每种素数情况.套Miller_Rabin和pollard_rho模板 //#pragma comment(linker, &q ...
uva 11468 Substring
题意:给你 k 个模板串,然后给你一些字符的出现概率,然后给你一个长度 l ,问你这些字符组成的长度为 l 的字符串不包含任何一个模板串的概率. 思路:AC自动机+概论DP 首先用K个模板构造好AC自 ...
mybatis系列-02-mybatis框架
2.1 mybatis是什么 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google co ...
highcharts图表的图例legend怎么改变显示位置
一.将图例Legend放于图表右侧1.设置chart的marginRight属性值:chart: { marginRight: 120}2.设置legend图例属性值如下 legend: { alig ...
【原创】lua编译时发现缺少readline库
编译lualua项目,其中用到了lua-5.1版本的源码,编译时提示缺少readline库,找不到readline/readline.h头文件等发现系统中其实有安装readline库不过没有做链接和 ...
Android实例-录音与回放(播放MP3)(XE8+小米2)
结果: 1.增加ActionList中的Action时,需要跳到Master界面,不能在Android4Phonel界面下. 2.如果不打开权限的话,会提示“该设备不支持停止录音操作”(Record ...
问题-关于SizeOf在Delphi7和Delphi2009下结果分别是16/32
问题:同样的代码在Delphi7和Delphi2009下结果分别是16/32,为什么?var LWindCode : array [0..15] of char; begin showmess ...
Javascript(jQuery)中绑定页面上所有按钮点击事件的几种方式
方法一:使用document对象查找所有的按钮 [javascript] view plain copy 在CODE上查看代码片派生到我的代码片 //按照dom的方式添加事件处理 function B ...
Remastersys打包你自己的ubuntu成iso文件，保存原来的所有配置
你是不是辛辛苦苦地配好了ubuntu结果不久又重装,然后又重新配置很久呢? 笔者好不容易配置好了torch,但是换硬盘,于是就想到了将ubuntu打包成iso文件,下次直接安装,然后配置好的东西都搬过 ...

JavaScript入门(10)

JavaScript入门(10)的更多相关文章

随机推荐

热门专题