//JavaScript Window - 浏览器对象模型 window.document.getElementById("header"); //等价于 document.getElementById("header"); /* Window 尺寸 有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8、7、6、5： document.documentElement.clientHeight document.documentElement.clientWidth 或者 document.body.clientHeight document.body.clientWidth 实用的 JavaScript 方案（涵盖所有浏览器）： * */ function get_Browser(){ var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; x=document.getElementById("demo"); x.innerHTML="Browser inner window " + w + ", height: " + h + "." } /* 其他 Window 方法 一些其他方法： window.open() - 打开新窗口 window.close() - 关闭当前窗口 window.moveTo() - 移动当前窗口 window.resizeTo() - 调整当前窗口的尺寸 * */ function Screen(){ //可用宽度 document.write("Available Width: " + screen.availWidth); //可用高度 document.write("Available Height: " + screen.availHeight); // Window Location Pathname //location.pathname 属性返回 URL 的路径名。 document.write(location.pathname); //location.assign() 方法加载新的文档。 function newDoc() { window.location.assign("www.baidu.com"); //window.history 对象包含浏览器的历史。 window.history.back(); //返回 /* <html> <head> <script> function goBack() { window.history.back() } </script> </head> <body> <input type="button" value="Back" onclick="goBack()"> </body> </html> */ window.history.forward();//前进 /* <html> <head> <script> function goForward() { window.history.forward() } </script> </head> <body> <input type="button" value="Forward" onclick="goForward()"> </body> </html> */ //window.navigator 对象包含有关访问者浏览器的信息。 function Get_Browser(){ txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>"; txt+= "<p>Browser Name: " + navigator.appName + "</p>"; txt+= "<p>Browser Version: " + navigator.appVersion + "</p>"; txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>"; txt+= "<p>Platform: " + navigator.platform + "</p>"; txt+= "<p>User-agent header: " + navigator.userAgent + "</p>"; txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>"; document.getElementById("example").innerHTML=txt; /* 来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为： navigator 数据可被浏览器使用者更改 一些浏览器对测试站点会识别错误 浏览器无法报告晚于浏览器发布的新操作系统 */ //JavaScript 弹窗 //警告框 //警告框经常用于确保用户可以得到某些信息。 //当警告框出现后，用户需要点击确定按钮才能继续进行操作。 function myFunction(){ alert("Confirm!"); } /* 确认框 确认框通常用于验证是否接受用户操作。 当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。 当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。 */ function myFunction() { var x; var r=confirm("Press a button!"); if (r==true) { x="You pressed OK!"; } else { x="You pressed Cancel!"; } document.getElementById("demo").innerHTML=x; } /* 提示框 提示框经常用于提示用户在进入页面前输入某个值。 当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。 如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。 */ function myFunction() { var x; var person=prompt("请输入你的名字","Harry Potter"); if (person!=null) { x="你好 " + person + "! 今天感觉如何?"; document.getElementById("demo").innerHTML=x; } } /* JavaScript 计时事件 通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。 在 JavaScritp 中使用计时事件是很容易的，两个关键方法是: setInterval() - 间隔指定的毫秒数不停地执行指定的代码。 setTimeout() - 暂停指定的毫秒数后执行指定的代码 Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。 */ //每三秒弹出 "hello" ： setInterval(function(){alert("Hello")},3000); //动态时钟显示 var myVar=setInterval(function(){myTimer()},1000); function myTimer() { var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t; } } } } //clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。 function StopTime(){ var myVar=setInterval(function(){myTimer()},1000); function myTimer() { var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t; } function myStopFunction() { clearInterval(myVar); } } //JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookies。 //创建cookies document.cookie = "userName = Jone"; //您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除： document.cookie = "username = jone;expres = Thu,18,Dec 2013 12:00:00 GMT"; //您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。 document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/"; //使用 JavaScript 读取 Cookie var x = document.cookie; //document.cookie 将以字符串的方式返回所有的 cookies，类型格式： cookie1=value; cookie2=value; cookie3=value; //使用 JavaScript 修改 Cookie //在 JavaScript 中，修改 cookies 类似于创建 cookies，如下所示： document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/"; //旧的 cookie 将被覆盖。 //使用 JavaScript 删除 Cookie //删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT: document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; //注意，当您删除时不必指定 cookie 的值。 //Cookies操作函数 function setCookie(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires = "expires="+d.toGMTString(); document.cookie = cname + "=" + cvalue + "; " + expires; } function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name)==0) return c.substring(name.length,c.length); } return ""; } function checkCookie() { var user=getCookie("username"); if (user!="") { alert("Welcome again " + user); } else { user = prompt("Please enter your name:",""); if (user!="" && user!=null) { setCookie("username",user,365); } } }