<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
BOM编程:对浏览器的各种对象进行操作
window:浏览器窗体对象
location:页面对象
如 location.href可以获取地址栏地址,对赋值则是跳转指定地址页面
location.reload()重载当前页面,类似刷新
history:浏览器历史记录
如 history.forward()页面前进
history.back()页面后退
history.go(n)前进或后退n个页面,n为正前进,为负后退
计时器:
setInterval(函数名, 间隔毫秒数):每个指定时间执行函数,即“连续”执行
setTimeout(函数名, 间隔毫秒数):隔指定时间后执行函数,仅且执行一次,后面不会再执行
clearInterval(计时器)、clearTimeout(计时器):清除对应计时器
提示框:
alert("提示信息"):只有提示信息内容
prompt("提示信息带输入框", "输入框默认值"):返回输入框内容
confirm("提示信息带输入框"):返回值---确认是true,取消是false
DOM编程:对元素节点进行操作
-->
<div style="text-align: center">
<div id="dateTime">时间显示器</div><hr>
<input type="button" id="start" value="开始"><input type="button" id="stop" value="停止" disabled>
</div>
<script>
var timeout = setTimeout(function () {
/*window.location.reload();*/
alert(window.location.href);
/*clearTimeout(timeout);*/
}, 1000);
var interval;
var start = document.querySelector("#start");
var stop = document.querySelector("#stop");
start.onclick = function (ev) {
this.disabled = true;
stop.removeAttribute("disabled");
document.querySelector("#dateTime").innerHTML = new Date().toLocaleString();
interval = setInterval(function () {
document.querySelector("#dateTime").innerHTML = new Date().toLocaleString();
}, 1000);
};
stop.onclick = function (ev) {
clearInterval(interval);
this.disabled = true;
start.removeAttribute("disabled");
};
alert(prompt("返回输入框内容", "1234"));
alert(confirm("确认是true,取消是false"));
</script>
</body>
</html>
前端笔记之BOM&DOM编程
最新推荐文章于 2024-09-05 11:41:54 发布