1. window操作
1.1 window对象
<script>
/* BOM： 浏览器对象模型，有了BOM，使得js有能力与浏览器进行交互
浏览器中主要通过window对象来操作js的代码
js中所有内容都属于window，通过window可以调任意内容，包括document，console等对象
* */
var a = "abc";
window.document.write(window.a.length); //全局变量属于window
document.write(window.a.toUpperCase());
window.console.log(window.a.toUpperCase());
console.log(window.parseInt("123"));
window.onload=function(){
window.alert("hello");
}
</script>
1.2 window尺寸
<head>
<meta charset="UTF-8">
<title></title>
<script>
document.write("内部宽度："+window.innerWidth+"<br />");
document.write("内部高度："+window.innerHeight+"<br />");
document.write("body宽度："+window.document.body.clientWidth+"<br />");
document.write("body高度："+window.document.body.clientHeight+"<br />");
document.write("屏幕宽度："+window.screen.availWidth+"<br />");
document.write("屏幕高度："+window.screen.availHeight+"<br />");
</script>
</head>
1.3 location跳转
<head>
<meta charset="UTF-8">
<title></title>
<script>
/* location:定位，可以拿到浏览器的路径信息，也可以赋值跳转到指定页面 */
/* 取值 */
/*
document.write(window.location+"<br />");
document.write(window.location.protocol+"<br />");
document.write(window.location.host+"<br />");
document.write(window.location.pathname+"<br />");
document.write(window.location.port+"<br />");
document.write(window.location.href+"<br />");
*/
/* 赋值--页面跳转 */
//window.location="http://www.baidu.com";
//window.location.assign("http://www.baidu.com");
alert("页面重新加载（刷新）...");
location.reload(); //用在函数体中
</script>
</head>
1.4 history
<body>
<!-- history：用于前进，后退，与刷新操作；与浏览器的控件对应 -->
<a href="04_history_2.html">进入最美页面</a><br />
<input type="button" value="后退" onclick="history.back()" />
<input type="button" value="前进" onclick="window.history.forward()" />
<input type="button" value="刷新" onclick="location.reload()"/>
</body>
<body>
<a href="04_history_1.html">我就是最美页面</a><br />
<input type="button" value="后退2" onclick="history.go(-1)"/>
<input type="button" value="前进2" onclick="history.go(1)"/>
<input type="button" value="刷新2" onclick="history.go(0)"/>
<div id="example"></div>
<script>
var txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
</body>
2. 定时器（重点）
2.1 一次性定时器
<head>
<meta charset="UTF-8">
<title></title>
<!-- 定时器： 设置定时时间，当到达了，则触发执行相关代码
有两种： 1.一次性定时器
2.循环定时器（常用） 、
-->
<script>
//一次性定时器setTimeout： 参数1：函数体 参数2：间隔时间
var timerId;
onload=function(){
timerId = window.setTimeout(function(){
alert("吓死宝宝了~");
},3000);
}
function clearBtn(){
clearTimeout(timerId); /* 清除定时器 */
}
</script>
</head>
<body>
<input type="button" value="取消定时器" onclick="clearBtn()" />
</body>
2.2 循环定时器（常用）
<head>
<meta charset="UTF-8">
<title></title>
<script>
/* 循环定时器： 一直持续循环执行触发的代码 */
var timerId;
onload=function(){
timerId = setInterval(function(){
alert("一直循环定时器");
},3000);
}
function clearBtn(){
clearInterval(timerId);
}
</script>
</head>
<body>
<input type="button" value="取消定时器" onclick="clearBtn()" />
</body>
2.3 定时跳转
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*案例： 3,2,1 跳转到百度页面
分析：使用定时器，每隔一秒改变h1的内容
* */
var timerId;
var index=3;
onload=function(){
var h1 = document.getElementsByTagName("h1")[0];
timerId = setInterval(function(){
index--;
if(index>0){ //3,2,1能看到改变内容
h1.innerHTML=index;
}else{
location.href="http://www.baidu.com"; //跳转
clearInterval(timerId); //清除定时器
}
},1000)
}
</script>
</head>
<body>
<h1>3</h1>
</body>
2.4 时钟效果
<head>
<meta charset="UTF-8">
<title></title>
<script>
/* 案例：做一个时钟的效果 13:22:23
分析： 在循环定时器中，每隔一秒显示时间即可
* */
onload=function(){
var h1 = document.getElementsByTagName("h1")[0];
setInterval(function(){
var date = new Date();
var hour = date.getHours();
if(hour<10){
hour = "0"+hour;
}
var minu = date.getMinutes();
if(minu<10){
minu = "0"+minu;
}
var sec = date.getSeconds();
if(sec<10){
sec = "0"+sec;
}
var sum = hour+":"+minu+":"+sec;
h1.innerHTML=sum;
},1000);
}
</script>
</head>
<body>
<h1></h1>
</body>
2.5 定时切换图片
<head>
<meta charset="UTF-8">
<title></title>
<script>
//案例： 图片定时切换
//分析：使用定时器，在定时器中执行图片的切换，路径使用数组存储
var a = ["../img/002.png","../img/003.png","../img/004.png","../img/005.png"];
var index = 0;
onload=function(){
var img = document.getElementsByTagName("img")[0];
setInterval(function(){
index++;
if(index==a.length){ //到达最后的下标，则跳会第一张
index=0;
}
img.src=a[index];
},1000);
}
</script>
</head>
<body>
<img src="../img/002.png" />
</body>
3. Cookie(重点)
3.1 cookie基本应用
<head>
<meta charset="UTF-8">
<title></title>
<script>
/* cookie： 数据以键值对形式存储到客户端磁盘文件的方式
应用场景：
1.浏览历史记录
2.记录登录账户（非重要账户，如果重要的，可以只记录用户名）
3.购物车信息
弊端：
1.不安全，磁盘文件，容易被删除
2.未加密，容易被窃取数据
3.不能跨浏览器
4.容易被禁用
cookie的使用：
1.设置cookie
2.获取cookie
3.清除cookie
* */
function setCookie(){
alert("设置cookie成功！");
//document.cookie = "username=zsf"; //设置cookie
//设置cookie的有效期:expires=xxx
var date = new Date();
date.setTime(date.getTime()+1000*60*60*24); //时间单位为毫秒
document.cookie="username=zsf;expires="+date.toGMTString();
}
function getCookie(){
alert(document.cookie); //获取cookie
}
function clearCookie(){
alert("清除cookie！");
var date = new Date();
document.cookie="username=xxx;expires="+date.toGMTString();
}
</script>
</head>
<body>
<input type="button" value="设置cookie" onclick="setCookie()" />
<input type="button" value="获取cookie" onclick="getCookie()"/>
<input type="button" value="清除cookie" onclick="clearCookie()"/>
</body>
3.2 换肤功能
<head>
<meta charset="UTF-8">
<title></title>
<!--外部样式引入 -->
<link rel="stylesheet" type="text/css" id="style"/>
</head>
<body>
<!-- 案例：页面上有很多标签，有两个按钮，一个点击变红，一个点击变绿
分析： 1.先写上标签 2.通过js事件变色，在js中调用css外部样式
3.获取link标签对象，调用href属性
-->
<input type="button" value="变红" onclick="red()" />
<input type="button" value="变绿" onclick="green()" /><br />
<p>孩儿立志出乡关</p>
<p>学不成名誓不还</p>
<div>埋骨何须桑梓地</div>
<h2>人生何处不青山</h2>
<script>
var link = document.getElementById("style");
function red(){
link.href="../css/red.css";
}
function green(){
link.href="../css/green.css";
}
</script>
</body>
3.3 换肤Cookie
<head>
<meta charset="UTF-8">
<title></title>
<!--外部样式引入 -->
<link rel="stylesheet" type="text/css" id="style"/>
</head>
<body>
<!-- 案例：页面上有很多标签，有两个按钮，一个点击变红，一个点击变绿
升级： 记录最后一次点击的颜色效果
分析： 1.点击变色时，设置cookie
2.在页面加载完成后，获取cookie，取出记录的值
-->
<input type="button" value="变红" onclick="red()" />
<input type="button" value="变绿" onclick="green()" />
<input type="button" value="清除颜色" onclick="clearBtn()" /><br />
<p>孩儿立志出乡关</p>
<p>学不成名誓不还</p>
<div>埋骨何须桑梓地</div>
<h2>人生何处不青山</h2>
<script>
var link = document.getElementById("style");
function red(){
link.href="../css/red.css";
//设置cookie
var date = new Date();
date.setTime(date.getTime()+1000*60*60*24);
document.cookie="color=red;expires="+date.toGMTString();
}
function green(){
link.href="../css/green.css";
var date = new Date();
date.setTime(date.getTime()+1000*60*60*24);
document.cookie="color=green;expires="+date.toGMTString();
}
function clearBtn(){
alert("清除成功！");
link.href=""; //清除页面显示颜色
//清除cookie
var date = new Date();
date.setTime(date.getTime());
document.cookie="color=xxx;expires="+date.toGMTString();
}
onload=function(){
//获取cookie
var cookie = document.cookie; //“color=red;key=value”;
debugger
if(cookie){ //只有获取到cookie，才进行拆分，并取到颜色效果
var strColor = cookie.split(";")[0];
var key = strColor.split("=")[0];
var value = strColor.split("=")[1];
if(key=="color"){
link.href="../css/"+value+".css";
}
}
}
</script>
</body>
3.4 创建对象的补充
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/* 创建对象方式： 1.使用json数据： {name:'zs',age:30}
* 此外还有以下方式：
* 2. new Object()方式
*/
var st = new Object();
/* 对象赋值 */
st.name = "fengjie";
st.age = 18;
/* 对象取值 */
document.write(st.name+"--"+st.age+"<br />");
//3.构造器方式
var student = new Student("zsf",80);
document.write(student.name+"=="+student.age);
function Student(name,age){
this.name = name; //给构造器属性赋值
this.age = age;
}
</script>
</head>
Java程序猿必学第三十四篇——JS(JavaScript)BOM
猜你喜欢
转载自blog.csdn.net/m0_62718093/article/details/121568049
今日推荐
周排行