第四节 DOM(二)
2018-06-08 本文已影响4人
最美下雨天
1、键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript">
window.onkeydown=function(obj){
console.log(obj);
console.log("按键"+obj.key+"被按下了")
}
window.onkeypress=function(obj)
{
console.log(obj);
console.log("按键"+obj.key+"按下并松开")
}
window.onkeyup=function(obj)
{
console.log(obj);
console.log("按键"+obj.key+"抬起了")
}
</script>
<style type="text/css">
</style>
</head>
<body>
用户名：<input type="text" placeholder="请输入用户名"/>
</body>
</html>
网页显示：
image.png
看下KeyboardEvent这个对象
image.png
实际开发中我们主要是用keyCode这个字段来判断
2、window对象的一些方法
confirm()方法：有返回值，返回值为true、false
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript">
var result=window.confirm("这是个确认框");
console.log(result);
</script>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
网页显示：
image.png
点击确定：
image.png
prompt()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript">
var result=window.prompt("请输入内容","默认文字");
console.log(result);
</script>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
网页显示：
image.png
点击确定：
image.png
window.open("http://www.baidu.com");
window.close();
这两个方法分别是打开一个网页，关闭网页用的，但是close()方法只能关闭由open()方法打开的网页
3、定时任务
setTimeout();//只执行一次
clearTimeout();
setInterval();//重复执行
clearInterval();
做个定时任务，5s倒计时，倒计时完成后显示helloworld并且取消定时任务
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript">
var time=null;
function intervalFn()
{
setInterval("showContent()",1000);
}
var tip=5;
function showContent()
{
var div=document.getElementById("content");
if(tip==0)
{
div.innerHTML="hello,world";
}
else{
div.innerHTML=tip;
tip--;
}
}
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="button" id="start" value="倒计时" onclick="intervalFn()"/>
</br>
<div id="content"></div>
</body>
</html>
网页显示：
image.png
4、History对象
back() //加载 history 列表中的前一个 URL
forward()//加载 history 列表中的下一个 URL
go()//加载 history 列表中的某个具体页面
5、Location对象
