四、Window
1. Window 尺寸（涵盖所有浏览器）
<script>
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="浏览器的内部窗口宽度：" + w + "，高度：" + h + "。"
</script>
2.Location
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.href 属性返回当前页面的 URL。
location.assign( ) 方法加载新的文档。
3. History
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
4. Navigator
window.navigator 对象包含有关访问者浏览器的信息。
5. PopupAlert
警告框：alert("我是警告框！！")
确认框：
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
{
alert("You pressedOK!");
}
else
{
alert("You pressedCancel!");
}
}
</script>
提示框：
function disp_prompt()
{
var name=prompt("请输入您的名字","Bill Gates")
if (name!=null &&name!="")
{
document.write("你好！" + name + " 今天过得怎么样？")
}
}
</script>
6. Timing
t=setTimeout("javascript语句",毫秒) /未来的某时执行代码.
var t=setTimeout("javascript语句",毫秒) /未来的某时执行代码.
第一个参数是含有JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数。
clearTimeout():取消setTimeout()
clearTimeout(t)
a.单击开始计时按钮后，程序开始从 0 以秒计时。
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000) //
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
</form>
<p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
</body>
</html>
b.带有停止按钮的无穷循环中的计时事件
点击计数按钮后开始倒计时，点击停止按钮停止计时。
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
c=0;
setTimeout("document.getElementById('txt').value=0",0);
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时！" onClick="stopCount()">
</form>
<p>请点击上面的“开始计时”按钮来启动计时器。输入框会一直进行计时，从 0 开始。点击“停止计时”按钮可以终止计时，并将计数重置为 0。</p>
</body>
</html>
c. 小时钟
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
</head>
<body οnlοad="startTime()">
<div id="txt"></div>
</body>
</html>
7. Cookies
JavaScript 中，创建 cookie 如下所示：
document.cookie="username=JohnDoe";
还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：
document.cookie="username=John Doe;expires=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 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value;cookie3=value;
在 JavaScript 中，修改 cookie 类似于创建 cookie，如下所示：
document.cookie="username=John Smith;expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
旧的 cookie 将被覆盖。
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
注意，当您删除时不必指定 cookie 的值。
创建 cookie 来存储访问者名称。
首先，访问者访问 web 页面, 他将被要求填写自己的名字。该名字会存储在cookie 中。
访问者下一次访问页面时，他会看到一个欢迎的消息。
在这个实例中我们会创建 3 个 JavaScript 函数:
1. 设置 cookie 值的函数
2. 获取 cookie 值的函数
3. 检测 cookie 值的函数
设置cookie 值的函数
首先，我们创建一个函数用于存储访问者的名字：
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;
}
函数解析：
以上的函数参数中，cookie 的名称为 cname，cookie的值为 cvalue，并设置了 cookie 的过期时间expires。
该函数设置了 cookie 名、cookie 值、cookie过期时间。
获取cookie 值的函数
然后，我们创建一个函数用户返回指定 cookie 的值：
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 名的参数为 cname。
创建一个文本变量用于检索指定 cookie :cname + "="。
使用分号来分割 document.cookie 字符串，并将分割后的字符串数组赋值给 ca(ca = document.cookie.split(';'))。
循环 ca 数组 (i=0;i<ca.length;i++)，然后读取数组中的每个值，并去除前后空格 (c=ca[i].trim())。
如果找到 cookie(c.indexOf(name) == 0)，返回 cookie 的值 (c.substring(name.length,c.length)。
如果没有找到 cookie, 返回 ""。
检测cookie 值的函数
最后，我们可以创建一个检测 cookie 是否创建的函数。
如果设置了 cookie，将显示一个问候信息。
如果没有设置 cookie，将会显示一个弹窗用于询问访问者的名字，并调用 setCookie 函数将访问者的名字存储 365 天：
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);
}
}
}
完整实例
functionsetCookie(cname,cvalue,exdays)
{vard = newDate();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
varexpires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
functiongetCookie(cname)
{varname = cname + "=";
varca = document.cookie.split(';');
for(vari=0; i<ca.length; i++)
{varc = ca[i].trim();
if(c.indexOf(name)==0)
returnc.substring(name.length,c.length);
}
return"";
}
functioncheckCookie()
{varuser=getCookie("username");
if(user!="")
{alert("Welcome again " + user); }
else
{
user = prompt("Please enter your name:","");
if(user!="" && user!=null)
{setCookie("username",user,365); }
}
}
扫一扫
431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
