<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>window对象</title> <!-- BOM:(浏览器对象模型 Browser Object Model) 浏览器页面的 前进 后退 刷新 页面跳转 都是Bom! 对整个浏览器窗口进行交互的对象模型! 包含的内容(对象): 1.window对象 01.history 属性 02.location 属性 2.document对象 window对象 常用的属性: 01.history 属性 02.location 属性 常用的方法: alert() :只有一个对话框和一个确认按钮 prompt() :提示用户输入的对话框 confirm():有一个确认按钮和取消按钮的对话框 close(): 关闭浏览器窗口 open():打开一个新的浏览器窗口 定时函数: 01.setTimeout():在指定毫秒数之后,执行某个方法! 只执行一次 02.setInterval():每间隔指定的毫秒数,都会执行一次! window.open("弹出的窗口url","窗口的名称","窗口的特性") --> </head> <body> <script type="text/javascript"> var flag= confirm("确定关闭本窗口吗?"); if(flag){ window.close(); //浏览器窗口关闭 }else{ //window.open("http://www.baidu.com","百度首页"); window.open("http://www.baidu.com","百度首页","height=400,width=400"); } </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>history对象</title> <!-- history对象常用的三个方法: 01.back() :后退 02.forward():前进 03.go() :跳转至指定的url --> </head> <body> <a href="02history对象.html">当前页面</a> <a href="03history对象2.html">下一个页面</a> <a href="javascript:history.forward()">history.forward()下一个页面</a> <a href="javascript:history.go(2)">history.go(2)下一个页面</a> <script type="text/javascript"> </script> </body> </html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>history对象2</title>
</head>
<body>
history对象2 第二个页面
<a href="javascript:history.back()">history.back()后退一个页面</a>
<a href="javascript:history.go(-1)">history.go(-1)后退一个页面</a>
</body>
</html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>location对象</title> <!-- location对象 常用方法: reload():刷新页面 replace():使用新的页面替换当前页面 常用属性: host:主机名+端口号 hostname:主机名 href:完整的url hash:返回#之后的所有字符串 search:返回?之后的所有字符串 --> </head> <body> <a href="javascript:doubleC();">百度</a> <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/>"); var flag= confirm("确定跳转页面吗?"); if(flag){ location.href="http://www.baidu.com"; } //当用户点击百度 超链接时触发的事件 function doubleC(){ location.href="http://www.jd.com"; } </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>document对象</title> <!-- document对象 常用的方法: write():在页面中书写内容 getElementById(): 获取页面中指定id的对象! 一个对象 getElementsByName("sex"): 获取页面中所有name属性值为sex的对象 ! 数组 getElementsByTagName("div"): 获取页面中所有标签为div的对象 ! 数组 常用的属性: referrer: 当浏览器向web服务器发送请求的时候,一般会带上referrer, 告诉服务器我是从哪个页面链接过来的,服务器基此可以获得一些信息用于处理。 url: 返回当前页面的url --> </head> <body> <script type="text/javascript"> document.write("document.referrer的值是:"+document.referrer); </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>referrer属性</title> </head> <body> <a href="05document对象.html">推广地址</a> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{font-size:14px; line-height:30px; } input{margin:1px; width:90px; font-size:12px; padding:0; } #node{ width:100px; font-size:24px; font-weight:bold; float: left; } </style> <script type="text/javascript"> /*改变层内容*/ function changeLink(){ //获取页面中id属性值是node的节点 var node= document.getElementById("node"); // node.innerText="<h1 style='color:red'>haha</h1>"; innerText:会把整个内容当成文本来输出! node.innerHTML="<h3 style='color:red'>haha</h3>";//innerHTML:会编译内容中的html标签以及样式 } /*获取所有input标签中所有的value值*/ function all_input(){ var allInputs= document.getElementsByTagName("input"); // 是一个数组 var result=""; for(var i=0;i<allInputs.length;i++){ result+= allInputs[i].value+"<br/>"; } //把所有的结果 给 id=s的元素 document.getElementById("s").innerHTML=result; } /*获取所有name属性值是season的value*/ function s_input(){ var allSeasons= document.getElementsByName("season"); // 是一个数组 var result=""; for(var i=0;i<allSeasons.length;i++){ result+= allSeasons[i].value+"<br/>"; } //把所有的结果 给 id=s的元素 document.getElementById("s").innerHTML=result; } </script> </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> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Date对象</title> <!-- Date对象: getDate():获取是一个月中的哪一天? 1-31 getDay():获取是一周中的哪一天? 0-6 getHours():获取是一天中的小时 0-23 getMinutes():获取是分钟 0-59 getSeconds():获取是秒数 0-59 getMonth():获取是一年中的第几个月? 0-11 getFullYear():获取年份 getTime():返回1970年1月1日到现在的毫秒数 --> </head> <body> <script type="text/javascript"> var today=new Date(); //当前的系统时间 document.write(today); //获取年月日 var year= today.getFullYear(); var month= today.getMonth()+1; var date= today.getDate(); var hours= today.getHours(); var min= today.getMinutes(); var s= today.getSeconds(); document.write("当前系统时间是:"+year+"年:"+month+"月:"+date+"日 "+hours+":"+min+":"+s) </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Math对象</title> <!-- Math对象: ceil():向上取整 floor():向下取整 random():随机数 round():四舍五入 --> </head> <body> <script type="text/javascript"> document.write("25.5ceil===》"+Math.ceil(25.5)+"<br/>"); document.write("25.5floor===》"+Math.floor(25.5)+"<br/>"); document.write("25.5round===》"+Math.round(25.5)+"<br/>"); </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>定时函数</title> <!-- 01. setTimeout函数 在一个指定的时间点,去指定一个指定的函数 02.setInterval函数 每隔多少时间就会执行一次指定的函数 --> </head> <body> <div id="nowTime"></div> <button type="button" onclick="setOne();"> setTimeout函数</button> <button type="button" onclick="clearOne();"> 清空setTimeout函数</button> <button type="button" onclick="setTwo();"> setInterval函数</button> <button type="button" onclick="clearTwo();"> 清空setInterval函数</button> <script type="text/javascript"> var num=0; //成员变量 function one(){ //获取页面中空元素 并赋值 document.getElementById("nowTime").innerHTML="数字:"+(++num); } //声明 定时函数的变量 var timeout,intervar; function setOne(){ //设置定时函数 timeout=setTimeout("one()",2000); } function clearOne(){//清空定时函数 clearTimeout(timeout); } function setTwo(){ //周期性的执行 one()函数 intervar=setInterval("one()",1000); } function clearTwo(){ //周期性的执行 one()函数 clearInterval(intervar); } </script> </body> </html>