目录
一.window操作
1.1 window对象
1.2 window尺寸
1.3 location跳转
1.4 history
二.定时器
2.1 一次性定时器
2.2 循环定时器
2.3 定时跳转
2.4 时钟效果
2.5 定时切换图片
三.Cookie
3.1 cookie基本应用
3.2 换肤功能
3.3 换肤cookie
3.4 创建对象的补充
一.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.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>
三.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>
(>-<,这周终于结束了,期待下个礼拜,期待着大数据的魅力,希望下周的学习能让我更加有动力,感觉大数据充满了挑战!养精蓄锐,周末去吃顿大餐,GIAGIAGIAGIA~~~)