一、计时器
setTimeout()/clearTimeout()
说明:仅仅只执行一次,执行完成后不再继续setInterval()/clearInterval()
说明:重复执行,直到clearInterval()
实例
<!DOCTYPE HTML>
<html>
<head>
<title>计时器</title>
<style type="text/css">
#num {
font-size:50px;
color:red;
}
</style>
<script type="text/javascript">
window.onload = init();
function init(){
setInterval("setTime();",1000);/*重复,间隔1s*/
setTimeout("getCount();",5000);/*单次,等待5s后执行*/
}
function setTime(){
var num = document.getElementById("num");
var time = num.innerHTML;
if(time > 0){
num.innerHTML = time - 1;
}
}
function getCount(){
var count = document.getElementById("count");
count.innerHTML = 1 + count.innerHTML;
}
</script>
</head>
<body>
<div>
<lable>时间还剩下</lable>
<lable id="num">20</lable>
<lable>秒----setInterval()</lable>
</div>
<div>
<lable id="count">----setTimeout()</lable>
</div>
</body>
</html>
二、历史记录
window.history.back()
说明:上一页window.history.next()
说明:下一页
实例
第一页
<!DOCTYPE HTML>
<html>
<head>
<title>历史记录-第一页</title>
<style type="text/css">
a {
text-decoration:none;
background-color:green;
}
</style>
<script type="text/javascript">
function toForward(){
window.history.back();/*前一页*/
}
function toNext(){
window.history.forward();/*后一页*/
}
</script>
</head>
<body>
<a href="history-2.html">第二页</a><br/>
<input type="button" onclick="toForward();" value="上一页"></input>
<input type="button" onclick="toNext();" value="下一页"></input>
</body>
</html>
第二页
<!DOCTYPE HTML>
<html>
<head>
<title>历史记录-第二页</title>
<style type="text/css">
a {
text-decoration:none;
background-color:red;
}
</style>
<script type="text/javascript">
function toForward(){
window.history.back();/*前一页*/
}
function toNext(){
window.history.forward();/*后一页*/
}
</script>
</head>
<body>
<a href="history-1.html">第一页</a><br/>
<input type="button" onclick="toForward();" value="上一页"></input>
<input type="button" onclick="javascript:toNext();" value="下一页"></input>
</body>
</html>
三、对话框
alert()
说明:提示消息类的弹窗confirm()
说明:确定是否操作的弹窗,带有按钮,返回布尔类型prompt()
说明:可以接收用户输入的消息的弹窗,带有文本框,返回String
实例
<!DOCTYPE HTML>
<html>
<head>
<title>对话框</title>
<script type="text/javascript">
function testConfirm(){
var a = confirm();
var b = document.getElementById("confirm_value");
b.innerHTML = a;
}
function testPrompt(){
var a = prompt("请输入内容:");
var b = document.getElementById("prompt_value");
b.innerHTML = a;
var c = document.getElementById("prompt_type");
c.innerHTML = typeof(a);
}
</script>
</head>
<body>
<div>
<lable>alert对话框</lable><br/>
<input type="button" onclick="alert('alert对话框');" value="alert对话框"></input>
</div>
<hr/>
<div>
<lable>confirm对话框</lable><br/>
<input type="button" onclick="testConfirm();" value="confirm对话框"></input><br/>
<lable>接收到的值:</lable>
<lable id="confirm_value"></lable>
</div>
<hr/>
<div>
<lable>prompt对话框</lable><br/>
<input type="button" onclick="testPrompt();" value="prompt对话框"></input><br/>
<lable>接收到的值:</lable>
<lable id="prompt_value"></lable><br/>
<lable>接收到的类型:</lable>
<lable id="prompt_type"></lable>
</div>
</body>
</html>
四、获取内容的三种方式
innerHTML
说明:可以是html内容,也可以是文本innerText
说明:存文本内容value
说明:form表单的内容