javascript-基础-window&计时事件&cookies

window

window对象是全局的
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员
document也是windows的成员
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

尺寸

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

所有浏览器的方案

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

其他window方法

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

Window Screen

包含了有关用户屏幕的信息，可以不适用window前缀

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

例子

<h3>你的屏幕:</h3>
<script>
document.write("总宽度/高度: ");
document.write(screen.width + "*" + screen.height);
document.write("<br>");
document.write("可用宽度/高度: ");
document.write(screen.availWidth + "*" + screen.availHeight);
document.write("<br>");
document.write("色彩深度: ");
document.write(screen.colorDepth);
document.write("<br>");
document.write("色彩分辨率: ");
document.write(screen.pixelDepth);
</script>

Window Location

window.location对象，获取当前页面URL

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.href   当前页面url
location.href   返回url的路径名
location.assign 加载新的文档

Window History

包含浏览器历史

history.back() - 与在浏览器点击后退按钮相同（浏览器会返回上一页）
history.forward() - 与在浏览器中点击按钮向前相同（浏览器会返回下一页）

Window Navigator

浏览器的信息

<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script> 

//navigator 数据可被浏览器使用者更改
//一些浏览器对测试站点会识别错误
//浏览器无法报告晚于浏览器发布的新操作系统

弹窗

//警告框，警告提示用户之后再操作
window.alert("sometext");
//确认框，出现确认取消后操作
var r=confirm("按下按钮");
if (r==true)
{
    x="你按下了\"确定\"按钮!";
}
else
{
    x="你按下了\"取消\"按钮!";
}
//提示框，需要输入文本后操作
var person=prompt("请输入你的名字","Harry Potter");

计时事件

可以在一定时间之后执行代码

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 暂停指定的毫秒数后执行指定的代码

setInterval

//3秒执行一次打印
setInterval(function(){alert("Hello")},3000);
//停止执行使用clearInterval
window.clearInterval(intervalVariable)
//显示时钟
<p>在页面显示一个时钟</p>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
	var d=new Date();
	var t=d.toLocaleTimeString();
	document.getElementById("demo").innerHTML=t;
}

setTimeout

//开始执行
window.setTimeout("javascript 函数",毫秒数);
//停止执行
window.clearTimeout(timeoutVariable)

var myVar;

function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}

function myStopFunction()
{
clearTimeout(myVar);
}

Cookie

创建Cookie

document.cookie="username=John Doe";
//带过期时间
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
//设置带路径的cookis
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
//读取
var x = document.cookie;
//修改类似创建，但是旧的会被覆盖
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
//删除(删除时不指定具体内容即可)
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

cookies显示的是所有的串，需要在cookies串中查找到所需要的内容
设置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;
}

获取cookies值的函数

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 "";
}

检测 cookie 值的函数

function checkCookie()
{
  var username=getCookie("username");
  if (username!="")
  {
    alert("Welcome again " + username);
  }
  else 
  {
    username = prompt("Please enter your name:","");
    if (username!="" && username!=null)
    {
      setCookie("username",username,365);
    }
  }
}