操作BOM对象
BOM模型
- BOM : 浏览器对象模型 ( Browser Object Model )
- BOM提供了独立于内容的 , 可以与浏览器窗口进行互
- BOM可实现功能
弹出新的浏览器窗口
移动 , 关闭浏览器窗口以及调整窗口的大小
页面的前进 , 后退
Window对象的常用属性
- 常用的属性
- 语法
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
alert("你好");
window.alert("你好");
//所有自定义的函数都属于window.
function alert() {
console.log("自定义的")
}
window.alert();
</script>
</head>
<body>
</body>
</html>
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//浏览器自动加载跳转到指定的url
window.location.href="https://www.baidu.com";
//跳板
</script>
</head>
<body>
<!--<a href="javascript:location='https://www.baidu.com'">点击跳转到百度</a>-->
</body>
</html>
Window对象的常用方法
confirm()方法
- confirm():将弹出一个确认对话框
- confirm()与alert ()、 prompt()区别
- alert( ):一个参数,仅显示警告对话框的消息,无返回值,不能对脚本产生任何改变
- prompt( ):两个参数,输入对话框,用来提示用户输入一些信息,单击“取消”按钮则返回null,单击“确定”按钮则返回用户输入的值,常用于收集用户关于特定问题而反馈的信息
- confirm( ):一个参数,确认对话框,显示提示对话框的消息、“确定
”按钮和“取消”按钮,单击“确定”按钮返回true,单击“取消”按钮返回false,因此与if-else语句搭配使用
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var flag = confirm("你真的要退出吗?");
if (flag){
while (true){
document.write("1<br>")
}
}
</script>
</head>
<body>
</body>
</html>
open()方法
- window.open(“弹出窗口的url”,“窗口名称”,"窗口特征”)
history对象
- 常用方法
location对象
- 常用属性
- 常用方法
Document对象
- 常用属性
- 常用方法
- 访问相同name的元素
document.getElementById(“book”).innerHTML=“替换后的文字”;
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
JavaScript操作BOM;
window事件
加载
弹窗
普通
带输入框的
带确定取消的
location-history
核心掌握操作通过指定的id,name获取指定的元素 , 然后修改它的值.
-->
<script>
function show() {
document.getElementById("a").innerText="<h1>你好啊<h1/>";
}
function hidden2() {
//document.getElementById("a").innerText="";
document.getElementById("a").innerHTML="<h1>你好啊<h1/>" +
"<hr>" +
"<a href='#'>点击</a>"
}
function test() {
var are = document.getElementsByTagName("textarea");
var msg = are[0].value.app;
//document.write(are[0].value);
document.getElementById("msg").innerText = msg;
}
</script>
</head>
<body>
<div id="a"></div>
<textarea>1231231</textarea>
<p>
<input type="button" value="发表留言" onclick="test()">
</p>
<hr>
<div id="msg" style="border: 5px solid blue"></div>
<!--<!–-->
<input type="button" onclick="show()" value="显示" style="height: 50px;width: 50px">
<input type="button" onclick="hidden2()" value="隐藏" style="height: 50px;width: 50px">
</body>
</html>
Data对象
var 日期对象=new Date(参数)
制作时钟特效
- 使用Date对象的方法显示当前时间的小时、分钟和秒
定时函数
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="time"></div>
<input type="button" value="start" onclick="startTime()">
<input type="button" value="stop" onclick="stopTime()">
<!--
走动
停止
-->
<script>
var myTime;
function clock() {
//<!--获得一个时间-->
var now = new Date();
console.log(now);
var hh = now.getHours();
var mm = now.getMinutes();
var ss = now.getSeconds();
document.getElementById("time").innerHTML ="现在时间为:" + hh + ":" + mm + ":" + ss;
}
function startTime() {
myTime = setInterval("clock()",1000);
}
function stopTime() {
clearInterval(myTime);
}
</script>
</body>
</html>
清除函数
- clearTimeout()
clearTimeout(setTimeOut()返回的ID值) - clearInterval()
Math对象
- 常用方法
- 实现返回的整数范围为2~99
var iNum=Math.floor(Math.random()*98+2);
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
选择颜色 : <span id="color"></span>
<input type="button" value="点我变色" onclick="test()">
</div>
<script>
function test() {
var color = Array("红色","绿色","蓝色","紫色","黑色","棕色","青色");
var num = Math.ceil(Math.random()*7)-1;
document.getElementById("color").innerHTML = color[num];
}
</script>
</body>
</html>