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以 ...
随机推荐
- 【转】Bash中的shopt选项
set选项与shopt选项是两组不同的内容,用set -o和shopt -p可以分别查看两个组所有的打开和关闭的条目, 在默认状态下,有些是打开的,有些是关闭的,shopt各选项随着bash版本的更新 ...
- 【原创】alias与export
最近在看lualua相关的,其中k中有os.getenv('kroot'),看到~/.bashrc理由kroot但是为什么拿不到,后来发现写成了alias了,应该是export的. alias rer ...
- 恒天云技术分享系列6 – vLan网络原理解析
转载自恒天云官网:http://www.hengtianyun.com/download-show-id-15.html Vlan网络模式优点 增加网络可扩展性 网络隔离,每个租户拥有独立的网络及vl ...
- Windows性能监视器之CPU、硬盘、IO等监控方法详解-摘自网络
一般操作系统性能主要涉及到的问题主要有:处理器使用情况.内存占有量.磁盘I/0操作以及网络流量等. 查看Windows性能情况,大部分情况下是通过 “Windows任务管理器”,可以通过在 ”命令行” ...
- JNI: Passing multiple parameters in the function signature for GetMethodID
http://stackoverflow.com/questions/7940484/jni-passing-multiple-parameters-in-the-function-signature ...
- 转载 在.net中使用GAC
转载出处 https://blog.log4d.com/2011/01/gac/ GAC GAC是什么?是用来干嘛的?GAC的全称叫做全局程序集缓存,通俗的理解就是存放各种.net平台下面需要使用的d ...
- C#中让窗体自动靠边隐藏
1: private void Yincangtimer_Tick(object sender, EventArgs e)//窗体隐藏事件 2: { 3: int a = Control.MouseP ...
- C#利用API制作类似QQ一样的右下角弹出窗体
C#利用API制作类似QQ一样的右下角弹出窗体 (2009-03-21 15:02:49) 转载▼ 标签: 杂谈 分类: .NET using System;using System.Collecti ...
- java定时任务接口ScheduledExecutorService
一.ScheduledExecutorService 设计思想 ScheduledExecutorService,是基于线程池设计的定时任务类,每个调度任务都会分配到线程池中的一个线程去执行,也就是说 ...
- 【转】简明vim练级攻略
本文来自:http://coolshell.cn/articles/5426.html vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一 ...