Javascript的HTML BOM(浏览器对象模型)
一、Window 对象
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。
Browser Object Model
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
1.window.location
Location属性是一个用于存储当前载入页面URL信息的对象。
实现当前页面的跳转
window.location.href = “http://www.baidu.com”;
window.location = “http://www.baidu.com”;
重新加载页面
location.reload();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="跳转到百度页面" />
<input type="button" value="刷新页面" />
<script type="text/javascript">
document.getElementsByTagName("input")[0].onclick = function(){
//window.location.href = "http://www.baidu.com";
//window.location = "http://www.baidu.com";
location = "http://www.baidu.com";
}
document.getElementsByTagName("input")[1].onclick = function(){
window.location.reload();
}
</script>
</body>
</html>
2.window.history
操作同一个浏览器会话中的已访问页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="上两页" onclick="fun01()"/>
<input type="button" value="上一页" onclick="fun02()"/>
<input type="button" value="刷新" onclick="fun03()"/>
<input type="button" value="下一个" onclick="fun04()"/>
<input type="button" value="下两页" onclick="fun05()"/>
<script type="text/javascript">
function fun01(){
window.history.go(-2);
}
function fun02(){
//window.history.go(-1);
window.history.back();
}
function fun03(){
window.history.go(0);
}
function fun04(){
//window.history.go(1);
window.history.forward();
}
function fun05(){
window.history.go(2);
}
</script>
</body>
</html>
3.window.open()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//流氓广告
window.open("http://www.baidu.com","baidu");
</script>
</body>
</html>
二、各种弹出框
1.警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
语法：alert(“文本”)
2.确认框
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
语法：confirm(“文本”)
3.提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
语法：prompt(“文本”,“默认值”)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../js/new_file.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input type="button" value="警告框" />
<input type="button" value="确认框" />
<input type="button" value="提示框" />
</body>
</html>
//放在.js文件中获取
window.onload = function(){
document.getElementsByTagName("input")[0].onclick = function(){
alert("警告框");
}
document.getElementsByTagName("input")[1].onclick = function(){
var v = confirm("确认框 -- 内容");
console.log(v);
}
document.getElementsByTagName("input")[2].onclick = function(){
var v = prompt("提示框 -- 内容","默认值");
console.log(v);
}
}
三、定时器
setTimeout()
语法
var t=setTimeout(“javascript语句”,毫秒)clearTimeout()
语法
clearTimeout(setTimeout_variable)setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法
setInterval(code,millisec)code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
1.定时器：3秒后触发function函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="取消定时器" onclick="fun01()"/>
<img src="../img/呆萌小猪.png" width="100px" height="100px" />
<script type="text/javascript">
//定时器：3秒后触发function函数
var timeOut = setTimeout(function(){
var img = document.getElementsByTagName("img")[0];
img.setAttribute("src","../img/海底世界.jpg");
},3000);
function fun01(){
//取消定时器
clearTimeout(timeOut);
}
</script>
</body>
</html>
2.取消定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="取消定时器" onclick="fun01()" />
<script type="text/javascript">
var interval = setInterval(function(){
console.log("把微笑带回家");
},1000);
function fun01(){
clearInterval(interval);
}
</script>
</body>
</html>
3.定时器案例:实现页面的倒数自动跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{color: red;}
</style>
</head>
<body>
<h1>注册成功，<span>3</span>秒后跳转到<a href="http://www.baidu.com">首页</a></h1>
<script type="text/javascript">
var span = document.getElementsByTagName("span")[0];
setInterval(function(){
var num = span.innerText;
if(num > 1){
num--;
span.innerText = num;
}else{
location = "http://www.baidu.com";
}
},1000);
</script>
</body>
</html>
4.实现图片的定时切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{color: red;}
</style>
</head>
<body>
<input type="button" value="取消定时器" onclick="fun01()" />
<img src="../img/呆萌小猪.png" width="100px" height="100px"/>
<script type="text/javascript">
var img = document.getElementsByTagName("img")[0];
var arr = ["海底世界.jpg","回慕.png","呆萌小猪.png"];
var index = 0;
var interval = setInterval(function(){
img.setAttribute("src","../img/"+arr[index]);
index++;
if(index == arr.length){
index = 0;
}
},100);
function fun01(){
clearInterval(interval);
}
</script>
</body>
</html>
5.时钟的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1></h1>
<script type="text/javascript">
function getTime(){
//创建时间对象
var obj = new Date();
//获取时分秒
var hours = obj.getHours();
var minutes = obj.getMinutes();
var seconds = obj.getSeconds();
//拼接时间
var time = hours + ":" + minutes + ":" + seconds;
return time;
}
var h1 = document.getElementsByTagName("h1")[0];
setInterval(function(){
var time = getTime();
h1.innerText = time;
},1000)
var time = getTime();
h1.innerText = time;
</script>
</body>
</html>
四、Cookie
cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“;”分隔。
cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。Cookie可以做什么？
1，保存用户的登录状态
2，定制页面，如换肤，选择所在地区等等
3，购物车的实现
4，记录用户的浏览历史记录Cookie的缺点：
1，cookie可能被禁用
2，cookie是与浏览器相关的，即使访问同一个页面，不同的浏览器保存的cookie也是不能互相访问的
3，cookie可能被删除，因为cookie实际就是硬盘上的一个文件
4，cookie的安全性不够高，所有的cookie都是以纯文本的形式记录于文件中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="添加Cookie" onclick="fun01()" />
<input type="button" value="删除Cookie" onclick="fun02()" />
<input type="button" value="修改Cookie" onclick="fun03()" />
<input type="button" value="查询Cookie" onclick="fun04()" />
<script type="text/javascript">
function fun01(){
var date = new Date();
date.setTime(date.getTime() + 1000*60*60*24*60);
document.cookie = "username=aaa;expires=" + date.toGMTString();
document.cookie = "password=123123;expires=" + date.toGMTString();
}
function fun02(){
var date = new Date();
date.setTime(-1);
document.cookie = "username=aaa;expires=" + date.toGMTString();
document.cookie = "password=123123;expires=" + date.toGMTString();
}
function fun03(){
var date = new Date();
date.setTime(date.getTime() + 1000*60*60*24*60);
document.cookie = "username=bbb;expires=" + date.toGMTString();
document.cookie = "password=111222;expires=" + date.toGMTString();
}
function fun04(){
alert(document.cookie);
}
</script>
</body>
</html>
1.设置cookie
每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document.cookie：
document.cookie=“userId=888”;如果要一次存储多个名/值对，可以使用逗号加空格（; ）隔开，例如：
document.cookie=“userId=888; userName=1601”;注意：以下写法是保存了两个cookie信息，而不是覆盖
document.cookie=“userId=888”;
document.cookie=“userName=1601”;如果要改变一个cookie的值，只需重新赋值，例如：
document.cookie=“userId=999”;
这样就将名为userId的cookie值设置为了999。
2.获取cookie
cookie的值可以由document.cookie直接获得：
var strCookie=document.cookie;
这将获得以分号隔开的多个名/值对所组成的字符串，这些名/值对包括了该域名下的所有cookie。
3.cookie设置过期时间
在实际开发中，cookie常常需要长期保存，例如保存用户登录的状态。这可以用下面的选项来实现：
document.cookie=“userId=828; expires=GMT_String”;
其中GMT_String是以GMT格式表示的时间字符串，这条语句就是将userId这个cookie设置为GMT_String表示的过期时间，超过这个时间，cookie将消失，不可访问。例如：如果要将cookie设置为10天后过期，可以这样实现：Scape()
4.删除cookie
为了删除一个cookie，可以将其过期时间设定为一个过去的时间，例如
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="添加Cookie" onclick="fun01()" />
<input type="button" value="删除Cookie" onclick="fun02()" />
<input type="button" value="修改Cookie" onclick="fun03()" />
<input type="button" value="查询Cookie" onclick="fun04()" />
<script type="text/javascript">
function fun01(){
updateCookie("username","hhy",1000*60*60*24*60);
updateCookie("password","123123",1000*60*60*24*60);
}
function fun02(){
updateCookie("username","",-1);
updateCookie("password","",-1);
}
function fun03(){
updateCookie("username","xiaohong",1000*60*60*24*60);
updateCookie("password","111222",1000*60*60*24*60);
}
function fun04(){
var username = queryCookie("username");
var password = queryCookie("password");
alert(username + " -- " + password);
}
function updateCookie(key,value,time){
var date = new Date();
date.setTime(date.getTime() + time);
document.cookie = key + "=" + value + ";expires=" + date.toGMTString();
}
function queryCookie(k){
var cookie = document.cookie;//username=xiaohong; password=111222
var cs = cookie.split("; ");//["username=xiaohong","password=111222"]
for(var i = 0;i<cs.length;i++){
var key = cs[i].split("=")[0];
var value = cs[i].split("=")[1];
if(key == k){
return value;
}
}
return null;
}
</script>
</body>
</html>
五、JS对象
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…
此外，JavaScript 允许自定义对象。
1.创建js对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//创建对象
var stu = new Object();
stu.name = "曹操";
stu.age = 46;
stu.printInfo = function(){
alert(this.name + " -- " + this.age);
}
stu.printInfo();
</script>
</body>
</html>
2.for In 可以来遍历对象的所有属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/**
* 在JS中{}表示一个对象，对象中的数据是键值对形式的
* 这种格式叫做json格式
*/
var stu = {
name:'刘备',
age:54,
printInfo:function(){
alert(this.name + " -- " + this.age);
}
}
stu.printInfo();
</script>
</body>
</html>
3.JS面向对象的特点
JavaScript 是面向对象的语言，但 JavaScript 不使用类。
在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。
JavaScript 基于 prototype（原型），而不是基于类的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function Student(name,age){
this.name = name;
this.age = age;
}
//prototype - 原型：再原有的基础上添加内容
Student.prototype.printInfo = function(){
alert(this.name + " -- " + this.age);
}
var stu = new Student("孙权",35);
stu.printInfo();
//遍历对象 -- 遍历对象中的属性和方法
for(var v in stu){
console.log(v);
}
</script>
</body>
</html>
六、HTML5的综合案例
BMI身体测试健康值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#manager{
width: 80%;
height: 460px;
margin: 0 auto;
margin-top: 15px;
}
#box01{
width: 45%;
height: 100%;
float: left;
}
#box02{
width: 45%;
height: 100%;
float: right;
}
#box03{
width: 45%;
height: 100%;
background-color: #FF6666;
float: left;
}
#box04{
width: 45%;
height: 100%;
float: right;
}
.clear{clear: both;}
</style>
</head>
<body>
<div id="manager">
<div id="box01">
<div style="width: 100%; height: 20%; ">
<h1>BMI测试</h1>
</div>
<div style="width: 100%; height: 80%;">
<table width="100%" height="50%">
<tr>
<td style="text-align: right;">身高：</td>
<td><input id="height" type="text" placeholder="请输入身高(M)"/></td>
</tr>
<tr>
<td style="text-align: right;">体重：</td>
<td><input id="weight" type="text" placeholder="请输入体重(Kg)"/></td>
</tr>
<tr>
<td style="text-align: right;">性别：</td>
<td>
<input type="radio" name="sex" value="man" checked="checked"/>男
<input type="radio" name="sex" value="woman" />女
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="button" value="计算BMI" onclick="fun01()" style="width: 30%;"/>
</td>
</tr>
</table>
<table width="100%" height="50%" style="color: white; background-color: black;">
<tr>
<th>范围</th>
<th>描述</th>
</tr>
<tr style="background-color: #FF6666;">
<th>0~18.5</th>
<th>偏瘦</th>
</tr>
<tr style="background-color: #339933;">
<th>18.5~24.9</th>
<th>正常</th>
</tr>
<tr style="background-color: #009999;">
<th>25~29.9</th>
<th>偏胖</th>
</tr>
<tr style="background-color: #9933CC;">
<th>30.0+</th>
<th>肥胖</th>
</tr>
</table>
</div>
</div>
<div id="box02">
<div id="box03">
<h1 id="text01" style="text-align: center; height: 50%; margin-top: 60px;">偏瘦</h1>
<h1 id="text02" style="text-align: center; height: 50%;">xxKg</h1>
</div>
<div id="box04" style="text-align: center;">
<img id="img" src="../img/3_01.jpg" style="margin-top: 60px;"/>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
var weight = document.getElementById("weight");
var height = document.getElementById("height");
var text01 = document.getElementById("text01");
var text02 = document.getElementById("text02");
var box03 = document.getElementById("box03");
function fun01(){
var sex = getSex();
//计算健康值
var health = weight.value/(height.value*height.value);
//判断区间
if(health < 18.5){
box03.style.backgroundColor = "#FF6666";
text01.innerText = "偏瘦";
if(sex == "man"){
img.setAttribute("src","../img/3_01.jpg");
}else if(sex == "woman"){
img.setAttribute("src","../img/3_01_01.jpg");
}
}else if(health >= 18.5 && health < 24.9){
box03.style.backgroundColor = "#339933";
text01.innerText = "正常";
if(sex == "man"){
img.setAttribute("src","../img/3_02.jpg");
}else if(sex == "woman"){
img.setAttribute("src","../img/3_01_02.jpg");
}
}else if(health >= 24.9 && health < 29.9){
box03.style.backgroundColor = "#009999";
text01.innerText = "偏胖";
if(sex == "man"){
img.setAttribute("src","../img/3_03.jpg");
}else if(sex == "woman"){
img.setAttribute("src","../img/3_01_03.jpg");
}
}else if(health >= 29.9){
box03.style.backgroundColor = "#9933CC";
text01.innerText = "肥胖";
if(sex == "man"){
img.setAttribute("src","../img/3_04.jpg");
}else if(sex == "woman"){
img.setAttribute("src","../img/3_01_04.jpg");
}
}
text02.innerText = weight.value + "kg";
}
function getSex(){
var sexArr = document.getElementsByName("sex");
for(var i = 0;i<sexArr.length;i++){
if(sexArr[i].checked){
return sexArr[i].value;
}
}
return null;
}
</script>
</body>
</html>
7884
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
