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="data:images/1.jpg" /></td>    <td><img src="data: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="data:images/3.jpg" /></td>    <td><img src="data: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" οnclick="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="data: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="data: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="data: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="data: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="刷新当前页面" οnclick="location.reload()"><input type="button" value="替换当前页面" οnclick="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="打开新的窗口" οnclick="openNew()"></body></html>

2、李老师代码：（open+confirm）

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><input type="button" value="打开新窗口" οnclick="openNew()"/><input type="button" value="提交订单" οnclick="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="改变层内容" οnclick="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内容" οnclick="all_input()" /><input name="b3" type="button" value="显示season内容" οnclick="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函数" οnclick="setI()">
<input  type="button" value="setTimeout函数" οnclick="setT()"><br/><input  type="button" value="清除setInterval函数" οnclick="clearI()"><input  type="button" value="清除setTimeout函数" οnclick="clearT()">
</body>
</html>

2、李老师demo：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body οnlοad="showtime()"><div id="time"></div><input type="button" οnclick="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="全选" οnclick="check()"/>全选</td>        <td>商品图片</td>        <td>商品名称/出售者/联系方式</td>        <td>价格</td>    </tr>    <tr>        <td><input type="checkbox" name="product" value="1" /></td>        <td><img src="data: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="data: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="data:images/雷柏鼠标.jpg" alt=""/></td>        <td>雷柏3500PRO无线鼠标</td>        <td>RMB 99</td>    </tr></table>

</body></html>

七、作业

1、继续看视频

2、多敲demo

八、老师辛苦了！

九、祝老师早日康复

老师因为急性阑尾炎，回老家做手术修养一段时间，祝福他早日康复！期待他早日归来，大家再一起学习！

转载于:https://www.cnblogs.com/wsnedved2017/p/6933330.html

2017年6月2号课堂笔记相关推荐

  1. 2017年4月5号课堂笔记

    2017年4月5号 晴 轻度雾霾 内容:Set,Map,遍历集合的方法,泛型,小Demo,Collections工具类的使用 一.Set 老师代码: package cn.bdqn.test; imp ...

  2. 2017年6月16号课堂笔记

    2017年6月16号 星期五 空气质量:中度污染~轻度污染 内容:jQuery:remove,bind,attr,on和live,同辈和父辈节点的操作, keyup/keypress/keydown, ...

  3. 2017年06月07号课堂笔记

    2017年06月07号 晴 空气质量:中度污染->良 内容:jQuery第二节:基本选择器,层次选择器,属性选择器, 基本过滤选择器,可见性过滤选择器 备注:代课老师:李老师 一.基本选择器 1 ...

  4. 2017年6月21号课堂笔记

    2017年6月21号 星期三 多云转雷阵雨 空气质量:中度污染~轻度污染 内容: JavaScript 原型式面向对象 01基于Object的对象的方式创建对象:02使用字面量赋值方式创建对象 03构 ...

  5. 2017年4月21号课堂笔记

    2017年4月21号 星期五 空气质量:良 内容:XML,Dom4j解析XML文件,单例 一.XML 老师代码: <?xml version="1.0" encoding=& ...

  6. 2017年07月03号课堂笔记

    2017年07月03号 星期一  多云 空气质量:轻度污染~中度污染 内容:MySQL第四节课 in和not in:两个表的内连接:exists和not exsits的使用:all,any和some: ...

  7. 2017年5月5号课堂笔记

    2017年5月5号 星期五 沙尘暴转晴 内容:U2 HTML5第一节课 一.01第一个霸气的网页 1.老师代码: <!DOCTYPE html><html><head l ...

  8. 2017年4月24号课堂笔记

    2017年4月24号  晴  空气质量:中度污染 内容:反射及相关,java设计六大原则(自学) 一.反射机制 在 程序运行期间,对于任何一个类,都能获得它的所有方法和属性! 对于任何一个对象,都能调 ...

  9. 2017年3月13号课堂笔记

    2017年3月13号 晴 空气质量:优 内容:双重循环,Java基础总结 一.Double01(3个班级各4名学员参赛,求每个班的平均分) 1.老师代码: public class Double01 ...

  10. 2017年6月23号课堂笔记

    2017年6月23号 星期五 暴雨转阵雨 空气质量:良 内容: 01jQuery-Validate验证插件的使用:02bootstrap小例子: 03引用charisma代码小例子 一.jQuery- ...

最新文章

  1. 创业基础（第四章： 创业风险及识别与管理） 来自高校：全国大学生创新创业实践联盟 分类：创新创业 学习规则：按序学习
  2. ttf能改成gfont吗_粉丝喊话岳云鹏改回本名 小岳岳在线蒙圈：我还能改成岳云啥...
  3. fputc会覆盖吗_墨粉寿命和打印的文件有关系吗？
  4. 数据可视化 信息可视化_更好的数据可视化的8个技巧
  5. java mariadb 使用,java连接mariaDB的设置，java连接mariadb
  6. python程序设计方法_Python程序设计现代方法
  7. 贪心——买卖股票的最佳时机(Leetcode 122)
  8. 在 Ubuntu 18.04 上安装 Python 3.7
  9. 交叉编译mpg321到MX27 ADS Rel3平台
  10. 2019华为软件精英挑战赛经验总结
  11. 如何拆分PDF文件或提取PDF页面为一个单独文件？
  12. Python数据处理（三）——美国西雅图自行车流量可视化
  13. 数据库系统的工作流程
  14. c mysql创建索引,如何创建mysql索引
  15. 5.Flink原理初探\角色分工\执行流程图生成\DataFlow,Operator,Partition,Parallelism,SubTask\OperatorChain和Task\任务槽\槽共享
  16. 高德地图实现展示多个规划的路线
  17. Spring-全面详解（基础知识）
  18. Basler 多个网口相机出图（SDK版）
  19. D-OJ刷题日记：折半查找 题目编号:518
  20. grafana登录失败无法从cookie中获取用户信息

热门文章

  1. 关于对漂亮女孩的追求策略
  2. 用数据说话——数据分析的基本思想
  3. 安卓AndroidStudio实现计算器
  4. SQL Server中字符串处理函数
  5. java毕业生设计学生在线评教系统计算机源码+系统+mysql+调试部署+lw
  6. Vue 如何触发键盘enter事件
  7. 开源python库，cnradical获取一个字的偏旁部首和拼音
  8. ansys中ex是什么意思_ansys中单位详解
  9. 马丁策略-EA 外汇市场交易的引导者
  10. 从0到1简易区块链开发手册V0.5-实现余额查询