您的位置：首页 > Web前端 > JavaScript

JavaScript03—Window对象

2017-07-05 13:18 211 查看

Window对象

window表示浏览器窗口

常用方法：

alert()提示对话框,confirm()确认对话框

setInterval(执行语句，时间周期毫秒)：周期性触发代码

clearInterval(启动的定时器对象)：停止启动的定时器对象

setTimeout(执行语句，间隔时间毫秒)：一次性触发代码

clearTimeout(启动的定时器对象)：停止启动的定时器对象

动态时钟的启动停止(周期性定时器)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时时钟</title>
<script type="text/javascript">
//定义一个定时器变量
var timer;

function start(){
timer = window.setInterval(function () {
var now = new Date().toLocaleTimeString();
document.getElementById("textClock").value = now;
},1000);
}
function stop(){
clearInterval(timer);
}
</script>
</head>
<body>
<h1>定时时钟</h1>
<p>
<input type="text" id="textClock" />
</p>
<p>
<input type="button" value="开始时钟" onclick="start();"/>
<input type="button" value="停止时间" onclick="stop();"/>
</p>
</body>
</html>

倒计时(周期性定时器)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style type="text/css">
div {
padding: 10px;
margin: 5% auto;
border: 1px solid black;
text-align: center;
background-color: black;
}
#d1 {
width: 300px;
color: #aaa;
}
#d2 {
font-size: 100pt;
color: red;
}

</style>
<script type="text/javascript">
function start(){
var seconds = document.getElementById("inputTxt").value;
var div = document.getElementById("d2");

var timer = setInterval(function(){
div.innerHTML = seconds;
//取得/设置 前标签 和 后标签之间的内容
seconds--;

if( seconds<0 ){
clearInterval(timer);
}
}, 1000);

}
</script>
</head>
<body>
<div id="d1">
<div id="d2">00</div>
<div>
输入秒数：
<input type="text" id="inputTxt" size="5" value="15"/>
<input type="button" value="开始倒计时" onclick="start();"/>
</div>
</div>
</body>
</html>

动态提示信息(一次性定时器)弹出提示框自动关闭

首先div的display属性设置为none，同时position值设为：fixed(固定定位，参考HTML04—定位、显示方式)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一次性定时器</title>
<style type="text/css">
div{
display: none;
border:2px #CCC solid;
width:400px;
height:200px;
text-align: center;
position: fixed;
margin: 150px 150px auto;
}
</style>
<script type="text/javascript">
function start() {
document.getElementById("divbox").style.display ="block";
setTimeout("codefans()",2000);//2秒，可以改动
}

function codefans(){
var box=document.getElementById("divbox");
box.style.display="none";
}

</script>
</head>
<body>
<h1>一次性定时器</h1>
<p>
<div id="divbox">请稍等2秒。。。</div>
<p>
<input type="button" value="提示" onclick="start();"/>
</p>
</body>
</html>

history对象

back()：点击浏览器后退按钮

forward():点击浏览器前进按钮

go()

location对象

href：当前网页地址

reload():重新载入并刷新

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 对象

相关文章推荐

新的分享

章节导航