- 所有瀏覽器都支持window對(duì)象,它表示瀏覽器窗口本身;
- 所有 JavaScript 全局對(duì)象秀又、全局函數(shù)以及全局變量均自動(dòng)成為 window 對(duì)象的成員
- 全局變量是window對(duì)象的屬性,全局函數(shù)是window對(duì)象的方法;
- document也是window對(duì)象的屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.code{
color: gray;
border: 1px solid gainsboro;
font-size: 15px;
}
pre{
margin: 1em 0em 1em -19em;
font-family: "楷體";
}
.result{
color: gray;
background-color: ghostwhite;
font-size: 16px;
padding: 0.5em 1em;
}
h3{
color: red;
}
.result span:first-child{
display: block;
float: left;
width: 10em;
color: black;
}
</style>
<script type="text/javascript">
function objDisplay(eleId,obj){
if(typeof(eleId)!="string" || typeof(obj)!="object"){
alert("Function objDisplay() need the first parameter string and second object !")
}else{
var ele = document.getElementById(eleId);
if(!ele || !obj){
alert("Please check the parameter !")
}else{
for(i in obj){
var div = document.createElement("div");
for(var j=0;j<2;j++){
var span = document.createElement("span");
if(j==0) span.innerHTML = i+" : ";
else span.innerHTML = obj[i];
div.appendChild(span);
}
ele.appendChild(div);
}
}
}
}
</script>
</head>
<body>
<ul>
<li>
<h3>window</h3>
<h4>代碼:</h4>
<div class="code">
<pre>
//window屬性和方法
var winDict = {
"windowWidth":window.innerWidth,
"windowHeight":window.innerHeight,
"window.open()":"打開新窗口",
"window.close()":"關(guān)閉當(dāng)前窗口",
"window.moveTo()":"移動(dòng)當(dāng)前窗口",
"window.resizeTo()":"調(diào)整當(dāng)前窗口的尺寸"
}
//涵蓋所有瀏覽器的寫法(瀏覽器的視口砾肺，不包括工具欄和滾動(dòng)條)
var winHeight = window.innerHeight
||document.documentElement.clientWidth
||document.body.clientWidth;
var winWidth = window.innerWidth
||document.documentElement.clientWidth
||document.body.clientWidth;
objDisplay("winDict",winDict);
</pre>
</div>
<h4>結(jié)果:</h4>
<div id="winDict" class="result"></div>
<hr />
<script>
//window屬性和方法
var winDict = {
"windowWidth":window.innerWidth,
"windowHeight":window.innerHeight,
"window.open()":"打開新窗口",
"window.close()":"關(guān)閉當(dāng)前窗口",
"window.moveTo()":"移動(dòng)當(dāng)前窗口",
"window.resizeTo()":"調(diào)整當(dāng)前窗口的尺寸"
}
//涵蓋所有瀏覽器的寫法(瀏覽器的視口鉴裹，不包括工具欄和滾動(dòng)條)
var winHeight = window.innerHeight
||document.documentElement.clientWidth
||document.body.clientWidth;
var winWidth = window.innerWidth
||document.documentElement.clientWidth
||document.body.clientWidth;
objDisplay("winDict",winDict);
</script>
</li>
</ul>
</body>
</html>
- window.screen 對(duì)象在實(shí)際寫的時(shí)候,可以不寫window;
- screen.availWidth/screen.availHeight 屬性返回訪問者屏幕的寬度/高度钓觉，以像素計(jì)，減去界面特性滥玷，比如窗口任務(wù)欄;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.code{
color: gray;
border: 1px solid gainsboro;
font-size: 15px;
}
pre{
margin: 1em 0em 1em -19em;
font-family: "楷體";
}
.result{
color: gray;
background-color: ghostwhite;
font-size: 16px;
padding: 0.5em 1em;
}
h3{
color: red;
}
.result span:first-child{
display: block;
float: left;
width: 10em;
color: black;
}
</style>
<script type="text/javascript">
function objDisplay(eleId,obj){
if(typeof(eleId)!="string" || typeof(obj)!="object"){
alert("Function objDisplay() need the first parameter string and second object !")
}else{
var ele = document.getElementById(eleId);
if(!ele || !obj){
alert("Please check the parameter !")
}else{
for(i in obj){
var div = document.createElement("div");
for(var j=0;j<2;j++){
var span = document.createElement("span");
if(j==0) span.innerHTML = i+" : ";
else span.innerHTML = obj[i];
div.appendChild(span);
}
ele.appendChild(div);
}
}
}
}
</script>
</head>
<body>
<ul>
<li>
<h3>screen</h3>
<h4>代碼:</h4>
<div class="code">
<pre>
//screen屬性
var scrDict = {
"availWidth":window.screen.availWidth,
"windowHeight":screen.availHeight,
}
objDisplay("winDict",scrDict);
</pre>
</div>
<h4>結(jié)果:</h4>
<div id="winDict" class="result"></div>
<hr />
<script>
//screen屬性
var scrDict = {
"availWidth":window.screen.availWidth,
"windowHeight":screen.availHeight,
}
objDisplay("winDict",scrDict);
</script>
</li>
</ul>
</body>
</html>
- window.location 對(duì)象用于獲得當(dāng)前頁(yè)面的地址 (URL)为狸，并可以把瀏覽器重定向到新的頁(yè)面;
- window.location 對(duì)象在編寫時(shí)可不使用 window 這個(gè)前綴;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.code{
color: gray;
border: 1px solid gainsboro;
font-size: 15px;
}
pre{
margin: 1em 0em 1em -19em;
font-family: "楷體";
}
.result{
color: gray;
background-color: ghostwhite;
font-size: 16px;
padding: 0.5em 1em;
}
h3{
color: red;
}
.result span:first-child{
display: block;
float: left;
width: 10em;
color: black;
}
button{
background-color: blueviolet;
color: white;
border: 2px solid plum;
border-radius: 2em;
padding: 0.5em;
margin: 0.5em;
}
button:focus{
color: bisque;
}
</style>
<script type="text/javascript">
function objDisplay(eleId,obj){
if(typeof(eleId)!="string" || typeof(obj)!="object"){
alert("Function objDisplay() need the first parameter string and second object !")
}else{
var ele = document.getElementById(eleId);
if(!ele || !obj){
alert("Please check the parameter !")
}else{
for(i in obj){
var div = document.createElement("div");
for(var j=0;j<2;j++){
var span = document.createElement("span");
if(j==0) span.innerHTML = i+" : ";
else span.innerHTML = obj[i];
div.appendChild(span);
}
ele.appendChild(div);
}
}
}
}
</script>
</head>
<body>
<ul>
<li>
<h3>location</h3>
<h4>代碼:</h4>
<div class="code">
<pre>
//location屬性
var lcaDict = {
"hostname":window.location.hostname,//返回 web 主機(jī)的域名
"pathname":location.pathname,//返回當(dāng)前頁(yè)面的路徑和文件名
"port":location.port,//返回 web 主機(jī)的端口
"protocol":location.protocol,//返回所使用的 web 協(xié)議（http:// 或 https://)
"href":location.href,//屬性返回當(dāng)前頁(yè)面的 URL
}
objDisplay("lcaDict",lcaDict);
</pre>
</div>
<h4>結(jié)果:</h4>
<div id="lcaDict" class="result"></div>
<!--location.assign() 方法加載新的文檔-->
<button onclick="location.assign('http://www.reibang.com/')">Assign</button>
<hr />
<script>
//location屬性
var lcaDict = {
"hostname":window.location.hostname,//返回 web 主機(jī)的域名
"pathname":location.pathname,//返回當(dāng)前頁(yè)面的路徑和文件名
"port":location.port,//返回 web 主機(jī)的端口
"protocol":location.protocol,//返回所使用的 web 協(xié)議（http:// 或 https://)
"href":location.href,//屬性返回當(dāng)前頁(yè)面的 URL
}
objDisplay("lcaDict",lcaDict);
</script>
</li>
</ul>
</body>
</html>
- history.back()方法加載歷史列表中的前一個(gè) URL,與在瀏覽器點(diǎn)擊后退按鈕相同;
- history.forward()方法加載歷史列表中的下一個(gè) URL,與在瀏覽器中點(diǎn)擊按鈕向前相同;
- window.history 對(duì)象在編寫時(shí)可不使用 window 這個(gè)前綴
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.code{
color: gray;
border: 1px solid gainsboro;
font-size: 15px;
}
pre{
margin: 1em 0em 1em -19em;
font-family: "楷體";
}
.result{
color: gray;
background-color: ghostwhite;
font-size: 16px;
}
ul li h3{
color: red;
}
button{
background-color: blueviolet;
color: white;
border: 2px solid plum;
border-radius: 2em;
padding: 0.5em;
margin: 0.5em;
}
button:focus{
color: bisque;
}
</style>
</head>
<body>
<ul>
<li>
<h3>history</h3>
<h4>代碼:</h4>
<div class="code">
<pre>
<button name="back" onclick="window.history.back()">back</button>
<button name="forward" onclick="history.forward()">forward</button>
</pre>
</div>
<h4>結(jié)果:</h4>
<div class="result">
<button name="back" onclick="window.history.back()">back</button>
<button name="forward" onclick="history.forward()">forward</button>
</div>
</li>
<hr />
</ul>
</body>
</html>
- window.navigator 對(duì)象包含有關(guān)訪問者瀏覽器的信息;
- window.navigator 對(duì)象在編寫時(shí)可不使用 window 這個(gè)前綴
- 來自 navigator 對(duì)象的信息具有誤導(dǎo)性背苦，不應(yīng)該被用于檢測(cè)瀏覽器版本
navigator 數(shù)據(jù)可被瀏覽器使用者更改;
瀏覽器無法報(bào)告晚于瀏覽器發(fā)布的新操作系統(tǒng);
- 使用對(duì)象來檢測(cè)瀏覽器,例:由于只有 Opera 支持屬性 "window.opera"互捌，可以據(jù)此識(shí)別出 Opera
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.code{
color: gray;
border: 1px solid gainsboro;
font-size: 15px;
}
pre{
margin: 1em 0em 1em -19em;
font-family: "楷體";
}
.result{
color: gray;
background-color: ghostwhite;
font-size: 16px;
padding: 0.5em 1em;
}
h3{
color: red;
}
.result span:first-child{
display: block;
float: left;
width: 10em;
color: black;
}
</style>
<script type="text/javascript">
function objDisplay(eleId,obj){
if(typeof(eleId)!="string" || typeof(obj)!="object"){
alert("Function objDisplay() need the first parameter string and second object !")
}else{
var ele = document.getElementById(eleId);
if(!ele || !obj){
alert("Please check the parameter !")
}else{
for(i in obj){
var div = document.createElement("div");
for(var j=0;j<2;j++){
var span = document.createElement("span");
if(j==0) span.innerHTML = i+" : ";
else span.innerHTML = obj[i];
div.appendChild(span);
}
ele.appendChild(div);
}
}
}
}
</script>
</head>
<body>
<ul>
<li>
<h3>navigator</h3>
<h4>代碼:</h4>
<div class="code">
<pre>
//navigator屬性
var navDict = {
"appCodeName":window.navigator.appCodeName,
"appName":navigator.appName,
"appVersion":navigator.appVersion,
"cookieEnabled":navigator.cookieEnabled,
"platform":navigator.platform,
"userAgent":navigator.userAgent,
"systemLanguage":navigator.systemLanguage,
}
objDisplay("navDict",navDict);
</pre>
</div>
<h4>結(jié)果:</h4>
<div id="navDict" class="result"></div>
<hr />
<script>
//navigator屬性
var navDict = {
"appCodeName":window.navigator.appCodeName,
"appName":navigator.appName,
"appVersion":navigator.appVersion,
"cookieEnabled":navigator.cookieEnabled,
"platform":navigator.platform,
"userAgent":navigator.userAgent,
"systemLanguage":navigator.systemLanguage,
}
objDisplay("navDict",navDict);
</script>
</li>
</ul>
</body>
</html>
- JavaScript中消息框有三種:警告框,確認(rèn)框,提示框;
- 警告框alert(),警告框攜帶信息彈出,需點(diǎn)擊"確認(rèn)"按鈕后,才能繼續(xù)進(jìn)行下一步操作;
- 確認(rèn)框confirm(),確認(rèn)框攜帶信息彈出,點(diǎn)擊"確認(rèn)"按鈕后返回true,點(diǎn)擊"取消"按鈕后返回false
- 提示框prompt(),提示框攜帶信息彈出,且要求用戶輸入內(nèi)容,若未輸入或點(diǎn)擊"取消"按鈕,則返回null,若輸入且點(diǎn)擊"確定"按鈕,則返回輸入值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.code{
color: gray;
border: 1px solid gainsboro;
font-size: 15px;
}
pre{
margin: 1em 0em 1em -19em;
font-family: "楷體";
}
.result{
color: gray;
background-color: ghostwhite;
font-size: 16px;
}
ul li h3{
color: red;
}
button{
background-color: blueviolet;
color: white;
border: 2px solid plum;
border-radius: 2em;
padding: 0.5em;
margin: 0.5em;
}
button:focus{
color: bisque;
}
</style>
</head>
<body>
<ul>
<li>
<h3>PopupAlert</h3>
<h4>代碼:</h4>
<div class="code">
<pre>
<button name="alert" onclick="alert('Hello World !')">Alert</button>
<button name="confirm" onclick="confirmResult()">Confirm</button>
<button name="prompt" onclick="promptResult()">Prompt</button>
</pre>
</div>
<h4>結(jié)果:</h4>
<div class="result">
<button name="alert" onclick="alert('Hello World !')">Alert</button>
<button name="confirm" onclick="confirmResult()">Confirm</button>
<button name="prompt" onclick="promptResult()">Prompt</button>
</div>
<div class="result">
<p id="confirmRes">顯示Confirm按鈕點(diǎn)擊后的結(jié)果!</p>
<p id="promptRes">顯示Prompt按鈕點(diǎn)擊后輸入的結(jié)果!</p>
</div>
</li>
<hr />
<script>
function confirmResult(){
var result = confirm("Continue ?");
document.getElementById("confirmRes").innerHTML = result;
}
function promptResult(){
var result = prompt("Please input the infomation !");
document.getElementById("promptRes").innerHTML = result;
}
</script>
</ul>
</body>
</html>
- setTimeout(),定時(shí)任務(wù),在多長(zhǎng)時(shí)間后,執(zhí)行一次,只執(zhí)行一次;
- clearTimeout(),清除定時(shí)任務(wù).
- setInterval(),重復(fù)任務(wù),每隔多長(zhǎng)時(shí)間,就執(zhí)行一次,重復(fù)執(zhí)行;
- clearInterval(),清除重復(fù)任務(wù).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.code {
color: gray;
border: 1px solid gainsboro;
font-size: 15px;
}
pre {
margin: 1em 0em 1em -19em;
font-family: "楷體";
}
.result {
color: gray;
background-color: ghostwhite;
font-size: 16px;
}
ul li h3 {
color: red;
}
button {
background-color: blueviolet;
color: white;
border: 2px solid plum;
border-radius: 2em;
padding: 0.5em;
margin: 0.5em;
}
button:focus {
color: bisque;
}
</style>
</head>
<body>
<ul>
<li>
<h3>timing</h3>
<h4>代碼:</h4>
<div class="code">
<pre>
//定義全局變量
var initDate = "";
var nowDateAll = "";
//時(shí)鐘
function dateDisRef() {
var now = new Date(); //定義當(dāng)前時(shí)間
var dateAll = "";
//定義時(shí)間字典
var dateDict = {
"year": now.getFullYear(),
"month": now.getMonth() + 1,
"day": now.getDate(),
"hours": now.getHours(),
"minutes": now.getMinutes(),
"seconds": now.getSeconds()
}
//格式校驗(yàn),不足十的,在前方補(bǔ)0
function checkDate(dateTime, dateDict) {
if(dateDict[dateTime] < 10) {
dateDict[dateTime] = "0" + dateDict[dateTime];
}
}
//日期展示
for(dateTime in dateDict) {
checkDate(dateTime, dateDict);
switch(dateTime) {
case "year":
case "month":
dateAll += (dateDict[dateTime] + "-");
break;
case "hours":
case "minutes":
dateAll += (dateDict[dateTime] + ":");
break;
case "day":
dateAll += (dateDict[dateTime] + " ");
break;
case "seconds":
dateAll += dateDict[dateTime];
default:
break;
}
}
document.getElementById("dateDis").innerHTML = dateAll;
nowDateAll = dateAll;
//只設(shè)置一次
if(initDate == "") {
//替換第一個(gè)空格為T,用來設(shè)置日歷默認(rèn)時(shí)間
initDate = dateAll.replace(" ", "T");
}
//定時(shí)任務(wù),等待500ms,執(zhí)行dateDisRef()方法,調(diào)用后再次等待500ms,再會(huì)進(jìn)行下次調(diào)用,故刷新頻率為1s
var timeOut = setTimeout('dateDisRef()', 500);
}
//調(diào)用方法
dateDisRef();
//設(shè)置日歷默認(rèn)時(shí)間為當(dāng)前時(shí)間
document.getElementById("initDate").value = initDate;
//倒計(jì)時(shí)
var interval;
function timing() {
//獲得日歷時(shí)間,并進(jìn)行格式轉(zhuǎn)換
var calendarTime = document.getElementById("initDate").value.toString();
//進(jìn)行同時(shí)區(qū)時(shí)間設(shè)置(防止時(shí)差問題,導(dǎo)致時(shí)間差錯(cuò)誤),均設(shè)置為標(biāo)準(zhǔn)時(shí)區(qū)
var calendarDate = new Date(calendarTime + "Z");
//動(dòng)態(tài)獲取當(dāng)前時(shí)間
var nowDate = new Date(nowDateAll + "Z");
//將時(shí)間差轉(zhuǎn)化為s
var dateMius = (calendarDate - nowDate) / 1000;
//清除重復(fù)任務(wù),防止生成多個(gè)
clearInterval(interval);
//定義重復(fù)任務(wù),時(shí)間間隔1s
interval = setInterval(function() {
dateMius--;
var timingEle = document.getElementById("timing");
if(dateMius == 0) {
timingEle.innerHTML = "倒計(jì)時(shí)結(jié)束!";
timingEle.style.color = "red";
clearInterval(interval);
} else {
if(timingEle.style.color == "red") timingEle.style.color = "gray";
timingEle.innerHTML = dateMius + " S";
}
}, 1000);
}
</pre>
</div>
<h4>結(jié)果:</h4>
<div class="result">
<p id="dateDis"></p>
</div>
<div class="result">
<input type="datetime-local" id="initDate" onchange="timing()" />
<p id="timing"></p>
</div>
<script>
//定義全局變量
var initDate = "";
var nowDateAll = "";
//時(shí)鐘
function dateDisRef() {
var now = new Date(); //定義當(dāng)前時(shí)間
var dateAll = "";
//定義時(shí)間字典
var dateDict = {
"year": now.getFullYear(),
"month": now.getMonth() + 1,
"day": now.getDate(),
"hours": now.getHours(),
"minutes": now.getMinutes(),
"seconds": now.getSeconds()
}
//格式校驗(yàn),不足十的,在前方補(bǔ)0
function checkDate(dateTime, dateDict) {
if(dateDict[dateTime] < 10) {
dateDict[dateTime] = "0" + dateDict[dateTime];
}
}
//日期展示
for(dateTime in dateDict) {
checkDate(dateTime, dateDict);
switch(dateTime) {
case "year":
case "month":
dateAll += (dateDict[dateTime] + "-");
break;
case "hours":
case "minutes":
dateAll += (dateDict[dateTime] + ":");
break;
case "day":
dateAll += (dateDict[dateTime] + " ");
break;
case "seconds":
dateAll += dateDict[dateTime];
default:
break;
}
}
document.getElementById("dateDis").innerHTML = dateAll;
nowDateAll = dateAll;
//只設(shè)置一次
if(initDate == "") {
//替換第一個(gè)空格為T,用來設(shè)置日歷默認(rèn)時(shí)間
initDate = dateAll.replace(" ", "T");
}
//定時(shí)任務(wù),等待500ms,執(zhí)行dateDisRef()方法,調(diào)用后再次等待500ms,再會(huì)進(jìn)行下次調(diào)用,故刷新頻率為1s
var timeOut = setTimeout('dateDisRef()', 500);
}
//調(diào)用方法
dateDisRef();
//設(shè)置日歷默認(rèn)時(shí)間為當(dāng)前時(shí)間
document.getElementById("initDate").value = initDate;
//倒計(jì)時(shí)
var interval;
function timing() {
//獲得日歷時(shí)間,并進(jìn)行格式轉(zhuǎn)換
var calendarTime = document.getElementById("initDate").value.toString();
//進(jìn)行同時(shí)區(qū)時(shí)間設(shè)置(防止時(shí)差問題,導(dǎo)致時(shí)間差錯(cuò)誤),均設(shè)置為標(biāo)準(zhǔn)時(shí)區(qū)
var calendarDate = new Date(calendarTime + "Z");
//動(dòng)態(tài)獲取當(dāng)前時(shí)間
var nowDate = new Date(nowDateAll + "Z");
//將時(shí)間差轉(zhuǎn)化為s
var dateMius = (calendarDate - nowDate) / 1000;
//清除重復(fù)任務(wù),防止生成多個(gè)
clearInterval(interval);
//定義重復(fù)任務(wù),時(shí)間間隔1s
interval = setInterval(function() {
dateMius--;
var timingEle = document.getElementById("timing");
if(dateMius == 0) {
timingEle.innerHTML = "倒計(jì)時(shí)結(jié)束!";
timingEle.style.color = "red";
clearInterval(interval);
} else {
if(timingEle.style.color == "red") timingEle.style.color = "gray";
timingEle.innerHTML = dateMius + " S";
}
}, 1000);
}
</script>
</li>
<hr />
</ul>
</body>
</html>
- cookie 是存儲(chǔ)于訪問者的計(jì)算機(jī)中的變量潘明。每當(dāng)同一臺(tái)計(jì)算機(jī)通過瀏覽器請(qǐng)求某個(gè)頁(yè)面時(shí)，就會(huì)發(fā)送這個(gè) cookie
-
名字 cookie
當(dāng)訪問者首次訪問頁(yè)面時(shí)秕噪，他或她也許會(huì)填寫他/她們的名字钳降。名字會(huì)存儲(chǔ)于 cookie 中。當(dāng)訪問者再次訪問網(wǎng)站時(shí)腌巾，他們會(huì)收到類似 "Welcome John Doe!" 的歡迎詞遂填。而名字則是從 cookie 中取回的。
密碼 cookie
當(dāng)訪問者首次訪問頁(yè)面時(shí)澈蝙，他或她也許會(huì)填寫他/她們的密碼吓坚。密碼也可被存儲(chǔ)于 cookie 中。當(dāng)他們?cè)俅卧L問網(wǎng)站時(shí)灯荧，密碼就會(huì)從 cookie 中取回礁击。
日期 cookie
當(dāng)訪問者首次訪問你的網(wǎng)站時(shí)，當(dāng)前的日期可存儲(chǔ)于 cookie 中漏麦。當(dāng)他們?cè)俅卧L問網(wǎng)站時(shí)客税，他們會(huì)收到類似這樣的一條消息："Your last visit was on Tuesday August 11, 2005!"况褪。日期也是從 cookie 中取回的撕贞。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onload="checkCookie()">
<script>
//設(shè)置cookie
function setCookies(name,value,expiredays){
var exdate = new Date();
//設(shè)置失效日期
exdate.setDate(exdate.getDate()+expiredays);
//設(shè)置cookie格式 name=value;expires=exdate
//escape()用來編碼字符串 toGMTString()此日期會(huì)在轉(zhuǎn)換為字符串之前由本地時(shí)區(qū)轉(zhuǎn)換為 GMT時(shí)區(qū)
document.cookie=name+"="+escape(value)+((expiredays==null)?"":(";expires="+exdate.toGMTString()));
}
//獲取cookie
function getCookies(name){
//判斷cookie的長(zhǎng)度
if(document.cookie.length>0){
//獲取要獲取cookie的起始位置
start = document.cookie.indexOf(name+"=");
//判斷indexOf()搜索結(jié)果,無結(jié)果時(shí)為-1
if(start!=-1){
start = start+name.length+1;//設(shè)置起始值為=的位置
end = document.cookie.indexOf(";",start);//從起始值搜索到名字的結(jié)束
if(end==-1) end=document.cookie.length;//無失效日期,則取到尾
return unescape(document.cookie.substring(start,end));//解碼截取的子字符串
}
}
return "";
}
//檢查是否設(shè)置了cookie
function checkCookie(){
usrName = getCookies("usrName");//獲取usrCookie
//不為空彈出歡迎框
if(usrName!=null && usrName!=""){
alert("Welcome again "+usrName+" !");
}else{
//為空則彈出消息框,提示用戶輸入名字,并設(shè)置cookie
usrName=prompt("Please enter your name :","");
if(usrName!=null&&usrName!=""){
setCookies("usrName",usrName,30);
}
}
}
</script>
</body>
</html>
