2017年6月2号课堂笔记
2017年6月2号 星期五 阵雨 空气质量：良
内容：JavaScriptBOM对象：history，location，open，document，定时及解除，全选和反选
备注：今天开始是李老师开始代课
一、history
1、老师代码1：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>第一个界面</h1>
<a href="01history对象.html">当前页面</a>
<a href="02history对象2.html">下一个页面</a>
<a href="javascript:history.forward()">forward()前进一个界面</a>
<a href="javascript:history.go(1)">go(1)前进一个界面</a>
</body>
</html>
2、老师代码2：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>第二个界面</h1>
<a href="javascript:history.back()">back()后退一个界面</a>
<a href="javascript:history.go(-1)">go(-1)后退一个界面</a>
</body>
</html>
3、李老师demo：history综合练习（春夏秋冬）
1）查看一年四季变化：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>查看一年四季的变化</title>
<style type="text/css">
table{
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top:1px #cccccc solid;
border-left:1px #cccccc solid;
width:400px;
}
img{
border:0;
padding:5px;
}
td{
font-size:14px;
line-height:25px;
text-align:center;
border-bottom:1px #cccccc solid;
border-right:1px #cccccc solid;
}
</style>
</head>
<body><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/1.jpg" /></td>
<td><img src="images/2.jpg" /></td>
</tr>
<tr>
<td><a href="spring.html">春</a></td>
<td><a href="summer.html">夏</a></td>
</tr>
<tr>
<td><img src="images/3.jpg" /></td>
<td><img src="images/4.jpg" /></td>
</tr>
<tr>
<td><a href="autumn.html">秋</a></td>
<td><a href="winter.html">冬</a></td>
</tr>
<tr>
<input type="button" onclick="location.reload()" value="刷新本页面"/>
</tr>
</table>
<a href="javascript:history.forward()">forward()前进一个界面</a>
<a href="javascript:history.go(1)">go(1)前进一个界面</a>
<a href="javascript:history.back()">back()后退一个界面</a>
<a href="javascript:history.go(-1)">go(-1)后退一个界面</a>
</body>
</html>
2）春天
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>春</title>
<style type="text/css">
body{margin:0;}
img{
border:0;
padding:5px;
}
td{
font-size:14px;
line-height:20px;
}
</style>
</head>
<body><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spring.jpg" alt="春天" /></td>
<td>春来――爆竹声中一岁除，春风送暖入屠苏<br />
春雨――小楼一夜听春雨，深巷明朝卖杏花<br />
春花――惆怅东栏一株雪，人生看得几清明<br />
春风――春风又绿江南岸，明月何时照我还<br />
春光――等闲识得东风面，万紫千红总是春<br />
春景――试上超然台上看，半壕春水一城花<br />
春游――东风知我欲山，吹断檐间积雨声 <br />
春思――春心莫共花争发，一寸相思一寸灰<br />
春寂――春潮带雨晚来急，野渡无人舟自横<br />
春愁――问君能有几多愁，恰似一江春水向东流<br />
春梦――枕上片时春梦中，行尽江南数千里<br />
春恨――人生自是有情痴，此恨不关风和月<br />
春归――落红不是无情物，化作春泥更护花<br />
<a href="summer.html">夏天</a> <a href="autumn.html">秋天</a> <a href="winter.html">冬天</a>
</td>
</tr>
</table>
<a href="javascript:history.forward()">forward()前进一个界面</a>
<a href="javascript:history.go(1)">go(1)前进一个界面</a>
<a href="javascript:history.back()">back()后退一个界面</a>
<a href="javascript:history.go(-1)">go(-1)后退一个界面</a>
</body>
</html>
3）夏天
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>夏</title>
<style type="text/css">
body{margin:0;}
img{
border:0;
padding:5px;
}
td{
font-size:14px;
line-height:23px;
}
</style>
</head>
<body><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/summer.jpg" alt="夏天" /></td>
<td>夏颂――纳清风台榭开怀，傍流水亭轩赏心<br />
夏初――槐柳成阴雨洗尘，樱桃乳酪并尝新<br />
夏热――日轮当午凝不去，万国如在洪炉中<br />
夏雨――风声撼山翻怒涛，雨点飞空射强弩<br />
夏水――涧影见藤竹，潭香闻芰荷<br />
夏夜――散发乘夕凉，开轩卧闲敞<br />
夏花――荷叶罗裙一色裁，芙蓉向脸两边开<br />
夏鸟――漠漠水田飞白鹭，阴阴夏木啭黄鹂<br />
夏蝉――垂缍饮清露，流响出疏桐<br />
夏节――彩线轻缠红玉臂，小符斜桂绿云鬟<br />
夏游――松风涧水杂清音，空山如弄琴<br />
夏趣――懒摇白羽扇，裸体青林中<br />
<a href="spring.html">春天</a> <a href="autumn.html">秋天</a> <a href="winter.html">冬天</a>
</td>
</tr>
</table>
<a href="javascript:history.forward()">forward()前进一个界面</a>
<a href="javascript:history.go(1)">go(1)前进一个界面</a>
<a href="javascript:history.back()">back()后退一个界面</a>
<a href="javascript:history.go(-1)">go(-1)后退一个界面</a>
</body>
</html>
4）秋天
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>秋</title>
<style type="text/css">
body{margin:0;}
img{
border:0;
padding:5px;
}
td{
font-size:14px;
line-height:22px;
}
</style>
</head>
<body><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/autumn.jpg" alt="秋天" /></td>
<td>秋雨――高楼目尽欲黄昏，梧桐叶上萧萧雨<br />
秋夜――睡起秋声无觅处，满阶梧叶日明中<br />
秋声――未觉池塘春草梦，阶前梧叶已秋声<br />
秋叶――夜深风竹敲秋韵，万叶千声皆是恨<br />
秋色――雨侵坏瓮新苔绿，秋入横林数叶红<br />
秋月――月光浸水水浸天，一派空明互回荡<br />
秋菊――宁可枝头抱香死，何曾吹落北风中<br />
秋思――故人万里无消息，便拟江头问断鸿<br />
秋愁――莫道身闲总是，孤灯夜夜写清愁 <br />
秋兴――西风吹叶满湖边，初换秋衣独慨然<br />
秋怀――出门未免流年叹，又见湖边木叶飞<br />
秋梦――清梦初回秋夜阑，床前耿耿一灯残<br />
<a href="spring.html">春天</a> <a href="summer.html">夏天</a> <a href="winter.html">冬天</a>
</td>
</tr>
</table>
<a href="javascript:history.forward()">forward()前进一个界面</a>
<a href="javascript:history.go(1)">go(1)前进一个界面</a>
<a href="javascript:history.back()">back()后退一个界面</a>
<a href="javascript:history.go(-1)">go(-1)后退一个界面</a>
</body>
</html>
5）冬天
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>冬</title>
<style type="text/css">
body{margin:0;}
img{
border:0;
padding:5px;
}
td{
font-size:14px;
line-height:25px;
}
</style>
</head>
<body><table border="0" cellspacing="0" cellpadding="0">
<>
<td><img src="images/winter.jpg" alt="冬天" /></td>
<td>冬雪――忽如一夜春风来，千树万树梨花开<br />
冬梅――不是一番寒彻骨，争得梅花扑鼻香<br />
冬景――岸容待腊将舒柳，山意冲寒欲放梅<br />
冬天――琥珀珠海黏行处雪，棕榈帚扫卧来云<br />
冬夜――岁华皆采获，冬晚共严枯<br />
冬风――飘飘送下遥天雪，飒飒吹干旅命烟<br />
冬思――岁寒，然后知柏之后凋也<br />
冬狩――会挽雕弓如满月，西北望，射天狼<br />
冬愁――云横秦岭家何在，雪拥蓝关马不前<br />
冬行――草枯鹰眼疾，雪尽马蹄轻<br />
冬恨――夜阑卧听风吹雨，铁马冰河入梦来<br />
<a href="spring.html">春天</a> <a href="summer.html">夏天</a> <a href="autumn.html">秋天</a>
<td>
</table>
<a href="javascript:history.forward()">forward()前进一个界面</a>
<a href="javascript:history.go(1)">go(1)前进一个界面</a>
<a href="javascript:history.back()">back()后退一个界面</a>
<a href="javascript:history.go(-1)">go(-1)后退一个界面</a>
</body>
</html>
二、location
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
document.write("host值为："+location.host+"<br/>")
document.write("hostname值为："+location.hostname+"<br/>")
document.write("href值为："+location.href+"<br/>")
document.write("hash值为："+location.hash+"<br/>")
document.write("search值为："+location.search+"<br/>")
</script>
</head>
<body>
<input type="text">
<input type="button" value="刷新当前页面" onclick="location.reload()">
<input type="button" value="替换当前页面" onclick="location.replace('http://www.baidu.cn')">
</body>
</html>
三、open
1、老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>window中的open()</title>
<script type="text/javascript">
function openNew(){
window.open(
"http://www.baidu.com",
"百度页面",
"height=400,width=400"
);
}
</script>
</head>
<body>
<input type="button" value="打开新的窗口" onclick="openNew()">
</body>
</html>
2、李老师代码：（open+confirm）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="打开新窗口" onclick="openNew()"/>
<input type="button" value="提交订单" onclick="shopping()"/>
<script type="text/javascript">
function openNew(){
window.open(
"http://www.baidu.com",
"百度主页",
"height=400,width=400"
);
}
function shopping(){
var flag= confirm("您购买的物品清单如下：******，是否提交清单？")
if(flag){
alert("订单已成功提交！");
}else{
alert("订单未提交，请再次确认后提交！");
}
}
</script>
</body>
</html>
四、document
仿写老师代码 ：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>document</title>
</head>
<body>
<div id="node">新浪</div>
<input name="b1" type="button" value="改变层内容" onclick="changeLink();" /><br />
<br /><input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" />
<br /><input name="b2" type="button" value="显示input内容" onclick="all_input()" />
<input name="b3" type="button" value="显示season内容" onclick="s_input()" />
<p id="s"></p>
<script type="text/javascript">
function changeLink(){
document.getElementById("node").innerHTML="<h1>四季平安</h1>";
}
function all_input(){
var allInput=document.getElementsByTagName("input");
//声明变量，接收所有input标签中所有的value值
var str="";
for(i=0;i<allInput.length;i++){
str+=allInput[i].value+"<br/>";
}
document.getElementById("s").innerHTML=str;
}
function s_input(){
var seasons=document.getElementsByName("season");
var str="";
for(i=0;i<seasons.length;i++){
str+=seasons[i].value+"<br/>";
}
document.getElementById("s").innerHTML=str;
}
</script>
</body>
</html>
五、定时及解除
1、老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>定时函数</title>
<script type="text/javascript">
var time=0;
function count(){ //计数的方法
document.getElementById("context").innerHTML="时间："+(++time);
}
var interval,timeout;
//定时函数
function setI(){ //setInterval函数 周期执行
interval=setInterval("count()",1000);
}
function setT(){ //setTimeout函数 执行一次
timeout= setTimeout("count()",1000);
}
//清除定时函数
function clearI(){//清除setInterval函数
clearInterval(interval);
}
function clearT(){//清除setTimeout函数
clearTimeout(timeout);
}
</script>
</head>
<body>
<div id="context"></div>
<input type="button" value="setInterval函数" onclick="setI()">
<input type="button" value="setTimeout函数" onclick="setT()"><br/>
<input type="button" value="清除setInterval函数" onclick="clearI()">
<input type="button" value="清除setTimeout函数" onclick="clearT()">
</body>
</html>
2、李老师demo：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body onload="showtime()">
<div id="time">
</div>
<input type="button" onclick="javaScript:clearInterval(cleartime)" value="停止时间"/>
<script type="text/javascript">
function showtime(){
var date= new Date();
var yy= date.getFullYear();
var MM=date.getMonth();
var dd=date.getDate();
var weekday=date.getDay();//星期几
var hh=date.getHours();
var mm=date.getMinutes();
var ss=date.getSeconds();
var ap="";
//判断上下午
if(hh>12){
ap="下午";
}else{
ap="上午";
}
document.getElementById("time").innerHTML="<h1>"+yy+"年"+(MM+1)
+"月"+dd+"日"+"星期"+weekday+ap+hh+"时"+mm+"分"+ss+"秒"+"</h1>";
}
var cleartime=setInterval("showtime()",1000);
</script>
</body>
</html>
六、全选和反选
李老师demo：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function check(){
var oInput=document.getElementsByName("product");
for(var i=0;i<oInput.length;i++){
oInput[i].checked=document.getElementById("all").checked;
}
}
</script>
<table border="1" bgcolor="blue">
<tr>
<td><input type="checkbox" id="all" value="全选" onclick="check()"/>全选</td>
<td>商品图片</td>
<td>商品名称/出售者/联系方式</td>
<td>价格</td>
</tr>
<tr>
<td><input type="checkbox" name="product" value="1" /></td>
<td><img src="images/罗技键盘K840.png" alt=""/></td>
<td>K840机械有线键盘</td>
<td>RMB 499</td>
</tr>
<tr>
<td><input type="checkbox" name="product" value="2" /></td>
<td><img src="images/alienware.jpg" alt=""/></td>
<td>alienware外星人笔记本</td>
<td>RMB 19999</td>
</tr>
<tr>
<td><input type="checkbox" name="product" value="3" /></td>
<td><img src="images/雷柏鼠标.jpg" alt=""/></td>
<td>雷柏3500PRO无线鼠标</td>
<td>RMB 99</td>
</tr>
</table>
</body>
</html>
七、作业
1、继续看视频
2、多敲demo
八、老师辛苦了！
九、祝老师早日康复
老师因为急性阑尾炎，回老家做手术修养一段时间，祝福他早日康复！期待他早日归来，大家再一起学习！
