需要两个页面index.html和Test.html,可以直接运行,每个功能都已经注释完整,index.html页面的代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //1.confirm方法 // var flag = window.confirm("确定要删除吗?"); // if(flag){ // alert("你点的是确定"); // }else{ // alert("你点的是取消"); // } //2.open的方法 //window.open("Test.html"); function openChuang(){ window.open("Test.html","","width=500,heigth=5500,location=0"); } //3.关闭窗口 function closeChuang(){ window.close(); } //4.history对象 function qianjin(){ //去下一个页面 //history.forward(); history.go(1); } //5.location对象 function loc(){ //显示主机名和端口号 document.write(location.host); document.write("<br/>"); //显示主机名 document.write(location.hostname); document.write("<br/>"); //显示全部链接 document.write(location.href); } //重新加载页面 function rel(){ location.reload(); } //操作document的方法 function Doc(){ //给id是first的文本框里面赋值 document.getElementById("first").value="名称"; //给name为txt的文本框里面赋值 var count = document.getElementsByName("txt"); for(var i =0;i<count.length;i++) { count[i].value = "值"+i; } //给所有标签是input的value赋值getElementsByTagName //先获取标签名是input的元素 var inp = document.getElementsByTagName("input"); for(var i = 0;i<inp.length;i++){ inp[i].value = "新值"+(i+1); } } function getDateInfo(){ //获取当前日期 var date = new Date(); var nian = date.getFullYear(); //年 var yue = date.getMonth()+1; //月 var day = date.getDate(); //日 var shi = date.getHours(); //时 var fen = date.getMinutes(); //分 var miao = date.getSeconds(); //秒 //将时间放在id为riqi的div里 document.getElementById("riqi").innerHTML = nian+"-"+yue+"-"+day+" "+shi+":"+fen+":"+miao; } //随机数 function getRandom(){ var ran = Math.floor(Math.random()*100+1); alert(ran); } //5秒之后弹出来一个框 function Time(){ var t1 = setTimeout("alert('弹出信息')",5000); } //每隔5秒提示信息 function Times(){ var t2 = setInterval("alert('弹出信息')",5000); } </script> <h1>这是index页面</h1> <input type="button" value="弹出一个固定大小的窗体" onclick="openChuang()" /> <br /> <input type="button" value="关闭窗体" onclick="closeChuang()" /><br /> <input type="button" value="去Test页面" onclick="qianjin()" /><br /> <a href="Test.html">测试的页面</a> <br /> location对象: <input type="button" value="location对象" onclick="loc()" /> <br /> <input type="button" value="刷新页面" onclick="rel()" /> <br /> <h2><a href="Test.html">马上去领奖吧!</a></h2> <br /> 下面是在介绍document的方法: 1.<input type="text" name="name" value="" id="first" /><br /> 2.<input type="text" name="txt" /><br /> 3.<input type="text" name="txt" /><br /> 4.<input type="text" name="txt" /><br /> <button onclick="Doc()">操作document方法</button> <br /> 下面介绍内置对象中的日期函数: <br /> <div id="riqi"></div> <button onclick="getDateInfo()">获取当前日期信息</button> <br /> <button onclick="getRandom()">获取1-100之间的随机数</button> <br /> <button onclick="Time()">5秒之后弹出来一个框</button> <br /> <button onclick="Times()">每隔5秒弹出来一个框</button> </body> </html>
下面是Test页面的代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //返回上一个页面 function backTop(){ //history.back(); history.go(-1); } //判断是否通过超链接进来的 document.write("<h1>领奖页面</h1>"); if(document.referrer==""){ //不是通过超链接进来的 alert("你不是从抽奖页面过来的,不能抽奖,点击确定5秒之后会自动关闭本窗口"); setTimeout("location.href='index.html'",5000); } </script> </head> <body> <h1>这是测试的页面</h1> <input type="button" value="返回上一个页面" onclick="backTop()" /> </body> </html>