第3章 顶层函数（window对象内置函数）
2019-04-28 本文已影响0人
yangsg
window对象时JS中的顶层对象，包含了BOM和DOM两部分。除此之外，window对象中还包含了许多实用浏览器操作相关的函数。
window对象中的函数，调用方式
window.xxxx();
可以省略window对象
xxxx();
1. 非数检验
isNaN(o)：检测o是否能被理解为一个数字，返回boolean值
- true： o不是数字
- false： o是数字
function test1(v){
if(isNaN(v)){
alert(v+"不是数字");
}else{
alert(v+"是数字");
}
}
<input type="text" onblur="test1(this.value);"/>
当输入23，3.14，-23.22属于number范畴数据时，提示为“数字”
当输入abcd，哈哈，--23.12, 3.14.22不能理解为数字的数据时，提示为“不是数字”
2. 提示窗口
- 警告框alert
弹出一个带有警告标示的窗口，参数“提示文字”就是窗口中显示的内容
alert("提示文字")；
- 提示框confirm
弹出一个带有确认标示的窗口，参数“提示文字”就是窗口中显示的内容。
这个窗口会有“确定”和“取消”两个按钮，点击“确定”时confirm方法返回true，点击"取消"或者关闭时返回“false”
它主要使用在系统中关键操作上，比如“删除”，“备份”，“恢复”等操作
function test1(){
if(confirm("你确定要这么整吗?")){
//当点击“确定”操作
alert("开整");
}else{
//当点击“取消”操作
}
}
- 交互框prompt
var inp = prompt("请输入您的名字","请在此处输入");
第一个参数是提示的文本
第二个参数是输入框中默认文字，可以不写
返回值inp是用户输入后点击确定时提交文本，如果用户不输入，得到null
function test1(){
var inp = prompt("请输入您的名字","请在此处输入");
alert(inp);
}
3. 新窗口或新选项卡
在新窗口或新选项卡打开网址
function test1(){
open("http://www.baidu.com");
}
如果是超链接
<a href="www.baidu.com" target="_blank">百度</a>
4. 延时和定时
4.1 延迟执行和清除延迟
setTimeout(str, n); 在n毫秒后，执行str的代码
str: 延迟执行的代码
n: 延迟的毫秒数
clearTimeout(x); 清除x代表的延迟器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var x;
function haha(){
alert('哈哈');
}
function test1(){
x = setTimeout("haha()", 2000);
}
function test2(){
clearTimeout(x);
}
</script>
</head>
<body>
<input type="button" value="延迟执行" onclick="test1();" />
<input type="button" value="中止延迟执行" onclick="test2();" />
</body>
</html>
4.2 重复定时执行和清除重复定时
setInterval(str, n); 每隔n毫秒后，执行str的代码
str: 重复执行的代码
n: 重复执行间隔的毫秒数
clearInterval(x); 清除x代表的定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var a = new Array();
var count = 0;
function haha(){
document.getElementById("div1").innerHTML = count;
count++;
}
function test1(){
haha();
var t = setInterval("haha()", 1000);
a.push(t);
}
function test2(){
for(var i = 0; i < a.length; i++){
clearInterval(a[i]);
}
}
</script>
</head>
<body>
<input type="button" value="定时执行" onclick="test1();" />
<input type="button" value="中止定时执行" onclick="test2();" />
<div id="div1"></div>
</body>
</html>
5. eval函数
执行参数str（字符串）表示的代码，如果str是表达式，计算表达式结果
var s = eval(str);
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="t1"/><br>
<input type="text" id="t2"/><br>
<input type="button" value="测试1" onclick="test1();">
<input type="button" value="测试2" onclick="test2();">
<input type="button" value="测试3" onclick="test3();">
<script type="text/javascript">
function test1(){
var s = eval("2+3");
alert(s); // 5
}
function test2(){
var t1 = document.getElementById("t1").value;
t1 = Number(t1);
var s = eval("t1+3"); //在t1中输入值，+3；
alert(s);
}
function test3(){
//将t1中输入的算式计算结果显示在t2中
var s = eval("eval(document.getElementById('t1').value)");
document.getElementById("t2").value = s;
}
</script>
</body>
</html>
