#window对象的使用#
一、定时器
两种定时器:
周期定时器
var id = window.setInterval(function,time);
每隔指定时间执行某函数。time就是间隔时间,单位是毫秒,function就是要执行的函数。
清除周期定时器:window.clearInterval(id);
超时定时器(只运行一次)
var id = window.setTimeout(function,time);
指定时间后,执行某函数。time就是指定的时间,单位是毫秒,function就是要执行的函数。
清除超时定时器:window.clearTimeout(id);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<div id="time"></div>
<input type="button" value="暂停" onclick="stop()">
<input type="button" value="继续" onclick="start()">
<img src="img/8.jpg" width="800" style="display: none" id="img">
<!--style="display: none" 图片不显示-->
<script>
//周期定时器
function getTime(){
var t=new Date();
var time=t.toLocaleString();//转换格式
var demo=document.getElementById("time");
demo.innerText=time;//传值到页面
}
getTime();
var id=window.setInterval(getTime,1000);//1秒
function stop(){
window.clearInterval(id);//清除定时器
}
function start(){
id=window.setInterval(getTime,1000);//获取定时器
}
</script>
<script>
//超时定时器
function img(){
document.getElementById("img").style.display="inline-block";//style.display="inline-block"显示图片
}
var id=window.setTimeout(img,2000);//2秒后调用函数img();
//clearTimeout(id);//清除超时定时器
</script>
</body>
</html>
二、弹框
-
警告框
-
确认框
-
提示框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹框</title>
</head>
<body>
<script>
window.alert("警告框!");
</script>
<script>
var res=window.confirm("确认框!是否");//确认为true或取消为false
console.log(res);//控制台查看
</script>
<script>
var res=window.prompt("提示框!请输入号码","123");//取消返回NULL;删除值确认返回空串
console.log(res);//控制台查看
</script>
</body>
</html>
三、其他对象
1.location对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>location</title>
</head>
<body>
<script>
console.log(location.href);//查询地址
//location.href="http://www.taobao.com";//地址赋值
</script>
</body>
</html>
2.history对象(要有可前进和可后退的页面,才能前进后退)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hitory</title>
</head>
<body>
<input type="button" value="后退" onclick="b()">
<input type="button" value="前进" onclick="f()">
<script>
function b(){
history.back();//后退
}
function f(){
history.forward();//前进
}
</script>
</body>
</html>
四、全选及反选
1.复选框全部选中,全选自动生效;反之失效。
2.点击全选框,全部选中;反之全部取消。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选反选</title>
</head>
<body>
<input type="checkbox" onclick="checkAll()" id="all">全选<br>
<input type="checkbox" name="ball" onclick="checkOn()">篮球<br>
<input type="checkbox" name="ball" onclick="checkOn()">足球<br>
<input type="checkbox" name="ball" onclick="checkOn()">排球<br>
<input type="checkbox" name="ball" onclick="checkOn()">羽毛球<br>
<script>
function checkAll(){
//获取全选框的checked属性的值
var res=document.getElementById("all").checked;
var balls=document.getElementsByName("ball");
for(var i=0;i<balls.length;i++){
balls[i].checked=res;
}
}
//全部选中,全选自动生效
//全选状态下,有一个取消,则全选自动失效
function checkOn(){
var balls=document.getElementsByName("ball");
var flag=true;
for(var i=0;i<balls.length;i++){
if(!balls[i].checked){
flag=false;
// break;
}
}
document.getElementById("all").checked=flag;
}
</script>
</body>
</html>
#学无止境#