Web前端開(kāi)發(fā)技術(shù)課件T-第六章_第1頁(yè)
Web前端開(kāi)發(fā)技術(shù)課件T-第六章_第2頁(yè)
Web前端開(kāi)發(fā)技術(shù)課件T-第六章_第3頁(yè)
Web前端開(kāi)發(fā)技術(shù)課件T-第六章_第4頁(yè)
Web前端開(kāi)發(fā)技術(shù)課件T-第六章_第5頁(yè)
已閱讀5頁(yè)，還剩38頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第六章

JavaScript開(kāi)發(fā)實(shí)例6.1

Canvas繪圖開(kāi)發(fā)實(shí)例

6.1.1定義canvas標(biāo)簽<canvas>標(biāo)簽定義圖形，比如圖表和其他圖像，必須使用腳本來(lái)繪制圖形。如圖6.1所示，在畫(huà)布上（Canvas）畫(huà)一個(gè)紅色矩形，漸變矩形，彩色矩形，和一些彩色的文字。一個(gè)畫(huà)布在網(wǎng)頁(yè)中是一個(gè)矩形框，通過(guò)<canvas>元素來(lái)繪制.【案例6.1】：創(chuàng)建一個(gè)畫(huà)布（Canvas）

代碼清單6.1<!DOCTYPEhtml><html><body><canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#000000;">您的瀏覽器不支持HTML5canvas標(biāo)簽。</canvas></body></html>默認(rèn)情況下<canvas>元素沒(méi)有邊框和內(nèi)容，可以使用style屬性來(lái)添加邊框。標(biāo)簽通常需要指定一個(gè)id屬性(腳本中經(jīng)常引用)，width和height屬性定義的畫(huà)布的大小。程序運(yùn)行效果如圖6.2所示。6.1.2繪制Canvas路徑

創(chuàng)建Canvas和獲取了Canvas環(huán)境上下文之后，就可以開(kāi)始進(jìn)行繪圖了，繪圖的方式有兩類：一類是進(jìn)行圖形繪制，另一類是圖形的處理。所謂基本圖形，就是指線、矩形、圓等最簡(jiǎn)單的圖形，任何復(fù)雜的圖形都是由這些簡(jiǎn)單的圖形組合而成的。繪制線條在Canvas上畫(huà)線，將使用以下兩種方法：moveTo(x,y)定義線條開(kāi)始坐標(biāo)lineTo(x,y)定義線條結(jié)束坐標(biāo)繪制線條必須使用到"ink"的方法，就像stroke().【案例6.2】：使用moveTo與lineTo繪制復(fù)雜圖形

<script>functiondraw(id){ varcanvas=document.getElementById(id); varcontext=canvas.getContext("2d"); context.fillStyle="#eeeeef";//設(shè)置繪圖區(qū)域顏色 context.fillRect(0,0,300,400);//畫(huà)矩形 vardx=150; vardy=150; vars=100; context.beginPath();//開(kāi)始繪圖 context.fillStyle="rgb(100,255,100)";//設(shè)置繪圖區(qū)域顏色 context.strokeStyle="rgb(0,0,100)";//設(shè)置線條顏色 varx=Math.sin(0); vary=Math.coas(0); vardig=Math.PI/15*11; for(vari=0;i<30;i++){//不斷的旋轉(zhuǎn)繪制線條 varx=Math.sin(i*dig); vary=Math.cos(i*dig); context.LineTo(dx+x*s,dy+y*s); } context.closePath(); context.fill(); context.stroke();}</script>代碼解析:本案例利用循環(huán)與moveTo與lineTo形成復(fù)雜結(jié)果，主要是將現(xiàn)將光標(biāo)移動(dòng)到指定坐標(biāo)點(diǎn)，繪制直線的時(shí)候以這個(gè)坐標(biāo)點(diǎn)為起點(diǎn)，moveTo(x,y)畫(huà)圖到x、y軸的位置。案例運(yùn)行效果如圖6.8所示【案例6.3】：使用rect與stroke繪制Canvas矩形

<script>varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.rect(20,20,150,100);ctx.stroke();</script>代碼解析:本案例主要使用stroke()或fill()方法在畫(huà)布上實(shí)際地繪制矩形。其對(duì)應(yīng)的語(yǔ)法格式如表6.3所示。JavaScript語(yǔ)法：context.rect(x,y,width,height);參數(shù)值如表6.4所示參數(shù)描述x矩形左上角的x坐標(biāo)。y矩形左上角的y坐標(biāo)。width矩形的寬度，以像素計(jì)。height矩形的高度，以像素計(jì)。程序運(yùn)行效果如圖6.9所示?！景咐?.4】：使用fillRect()繪制Canvas矩形<script>varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.fillRect(20,20,150,100);</script>代碼解析:本案例使用fillRect()方法繪制"已填充"的矩形。默認(rèn)的填充顏色是黑色，對(duì)應(yīng)的語(yǔ)法格式如表6.5所示。提示：可以使用fillStyle屬性來(lái)設(shè)置用于填充繪圖的顏色、漸變或模式。參數(shù)值如表6.6所示。參數(shù)描述x矩形左上角的x坐標(biāo)。y矩形左上角的y坐標(biāo)。width矩形的寬度，以像素計(jì)。height矩形的高度，以像素計(jì)。程序運(yùn)行效果如圖6.9所示。JavaScript語(yǔ)法：context.fillRect(x,y,width,height);參數(shù)值如表6.6所示?！景咐?.5】：使用arc()繪制Canvas圓形<script>varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx.stroke();</script>【案例6.5】：使用arc()繪制Canvas圓形代碼解析:arc()方法創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓）。如圖6.10所示，如需通過(guò)arc()來(lái)創(chuàng)建圓，請(qǐng)把起始角設(shè)置為0，結(jié)束角設(shè)置為2*Math.PI。使用stroke()或fill()方法在畫(huà)布上繪制實(shí)際的弧，對(duì)應(yīng)的語(yǔ)法格式如表6.7所示，參數(shù)如表6.8所示。JavaScript語(yǔ)法：context.arc(x,y,r,sAngle,eAngle,counterclockwise);參數(shù)描述x圓的中心的x坐標(biāo)。y圓的中心的y坐標(biāo)。r圓的半徑。sAngle起始角，以弧度計(jì)（弧的圓形的三點(diǎn)鐘位置是0度）。eAngle結(jié)束角，以弧度計(jì)。counterclockwise可選。規(guī)定應(yīng)該逆時(shí)針還是順時(shí)針繪圖。False=順時(shí)針，true=逆時(shí)針。本案例運(yùn)行的結(jié)果如圖6.11所示?！景咐?.6】：使用arc函數(shù)繪制復(fù)雜Canvas圓形<script>

functiondraw(id){

varcanvas=document.getElementById(id);

if(canvas==null){

returnfalse;

}

varcontext=canvas.getContext("2d");

context.fillStyle="#eeeeef";

context.fillRect(0,0,600,700);

for(vari=0;i<=10;i++){//循環(huán)不斷繪制圓形context.beginPath();context.arc(i*25,i*25,i*10,0,Math.PI*2,true);context.closePath();context.fillStyle="rgba(255,0,0,0.25)";context.fill();

}

}

</script>

代碼解析:本案例主要說(shuō)明HTML5繪制圓形，主要包含四個(gè)步驟，開(kāi)始創(chuàng)建路徑、創(chuàng)建圖形的路徑、路徑創(chuàng)建完成后，關(guān)閉路徑和設(shè)定繪制樣式，調(diào)用繪制方法，繪制路徑，代碼的解析請(qǐng)查看源代碼注釋程序運(yùn)行如圖6.12所示6.1.3繪制Canvas圖片無(wú)論開(kāi)發(fā)的是應(yīng)用程序還是游戲軟件，都是離不開(kāi)圖片，沒(méi)有圖片就無(wú)法讓整個(gè)頁(yè)面漂亮起來(lái)。開(kāi)發(fā)HTML5游戲的時(shí)候，游戲中的地圖、背景、人物、物品等都是由圖片組成的，所以圖片的顯示和操作都非常重要，本節(jié)主要使用CanvasdrawImage函數(shù)、getImageData和putImageData繪制圖片，使用createImageData新建圖片像素?！纠?.7】使用drawImage()函數(shù)在畫(huà)布上繪制圖片<body>img標(biāo)簽：<br/><imgsrc="images/image.jpg"></img><br/>Canvas畫(huà)板：<br/><canvasid="myCanvas"width="400"height="400">你的瀏覽器不支持HTML5</canvas><scripttype="text/javascript">varc=document.getElementById("myCanvas");varctx=c.getContext("2d");varimage=newImage();image.src="images/image.jpg";image.onload=function(){ctx.drawImage(image,10,10);ctx.drawImage(image,110,10,110,110);ctx.drawImage(image,10,10,50,50,210,10,150,150);};</script></body>drawImage()函數(shù)在Canvas畫(huà)布上繪制圖像、畫(huà)布或視頻，也能夠繪制圖像的某些部分，已經(jīng)增加或減少圖像的尺寸，對(duì)應(yīng)的語(yǔ)法格式如表9.15到表9.17所示，參數(shù)如表9.18所示。在畫(huà)布上定位圖像：表drawImage()語(yǔ)法1在畫(huà)布上定位圖像，并規(guī)定圖像的寬度和高度：表drawImage()語(yǔ)法2剪切圖像，并在畫(huà)布上定位被剪切的部分：表drawImage()語(yǔ)法3JavaScript語(yǔ)法：context.drawImage(img,x,y);JavaScript語(yǔ)法：context.drawImage(img,x,y,width,height);JavaScript語(yǔ)法：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);表drawImage()函數(shù)參數(shù)參數(shù)描述img規(guī)定要使用的圖像、畫(huà)布或視頻。sx可選。開(kāi)始剪切的x坐標(biāo)位置。sy可選。開(kāi)始剪切的y坐標(biāo)位置。swidth可選。被剪切圖像的寬度。sheight可選。被剪切圖像的高度。x在畫(huà)布上放置圖像的x坐標(biāo)位置。y在畫(huà)布上放置圖像的y坐標(biāo)位置。width可選。要使用的圖像的寬度（伸展或縮小圖像）。height可選。要使用的圖像的高度（伸展或縮小圖像）。<imgsrc="images/image.jpg"></img>表示運(yùn)行image.jpg原圖用于CanvasdrawIamge()函數(shù)畫(huà)圖效果的對(duì)比;ctx.drawImage(image,10,10);表示從坐標(biāo)(10,10)的位置繪制image.jpg圖片；ctx.drawImage(image,110,10,110,110);表示從坐標(biāo)(110,10)位置繪制整張image.jpg圖片到長(zhǎng)110、款110的矩形區(qū)域內(nèi)，所以本例的運(yùn)行效果會(huì)有一定的拉升感；ctx.drawImage(image,10,10,50,50,210,10,150,150);表示將image.jpg圖片從(10,10)坐標(biāo)位置截取(50,50)的寬度和高度，然后將截取到的圖片從坐標(biāo)(210,10)位置開(kāi)始繪制，放到長(zhǎng)110、寬110的矩形區(qū)域內(nèi)?！境绦蜻\(yùn)行效果】如圖所示。案例運(yùn)行后的效果圖【例6.8】Canvas開(kāi)發(fā)實(shí)例-幀動(dòng)畫(huà)效果1．構(gòu)建基本窗口代碼清單：<!DOCTYPEhtml><metacharset="utf-8"/><styletype="text/css">body{text-align:center;}#c1{border:1pxdottedblack}</style><body><h2>超級(jí)瑪麗動(dòng)畫(huà)效果</h2><imgid="img1"src="images/image.png"/><inputid="btnGO"type="button"value="開(kāi)始"/><br><canvasid="c1"width="320"height="200"></canvas><br></body></html>6.1.4

幀動(dòng)畫(huà)開(kāi)發(fā)實(shí)例2．構(gòu)建超級(jí)瑪麗動(dòng)畫(huà)效果：<script>varisAnimStart=false; //是否開(kāi)始動(dòng)畫(huà)varMarioMovie=null; //動(dòng)畫(huà)函數(shù)varframen=0; //圖片切割個(gè)數(shù)varframes=[]; //保存每幀動(dòng)畫(huà)起始坐標(biāo),本例圖片共有for(framen=0;framen<15;framen++){ frames[framen]=[32*framen,0];}//定義每幀圖像的寬度和高度varfWidth=32,fHeight=32;function$(id){returndocument.getElementById(id);}functioninit(){ //響應(yīng)onclick事件$("btnGO").onclick=function() {//如果沒(méi)開(kāi)始動(dòng)畫(huà)，則開(kāi)始動(dòng)畫(huà) if(!isAnimStart) { varctx=$("c1").getContext("2d"); varfIndex=0; varcX=160, cY=100; animHandle=setInterval(function(){ ctx.clearRect(0,0,320,200);ctx.drawImage(img1, frames[fIndex][0],frames[fIndex][1],fWidth,fHeight, cX-64,cY-64,fWidth*4,fHeight*4); fIndex++; if(fIndex>=frames.length) { fIndex=0; } },100)$("btnGO").value="停止"; isAnimStart=true; } else { $("btnGO").value="開(kāi)始"; clearInterval(animHandle); isAnimStart=false; } }}init();</script>程序運(yùn)行效果如圖9.15所示。圖9.30幀動(dòng)畫(huà)效果圖6.2.1認(rèn)識(shí)WebStorageWebstorage是一種將少量數(shù)據(jù)存儲(chǔ)在客戶端（client）硬盤(pán)的技術(shù)，只要支持WebstorageAPI規(guī)格的瀏覽器，網(wǎng)頁(yè)設(shè)計(jì)者都可以使用JavaScript來(lái)操作它。使用HTML5可以在本地存儲(chǔ)用戶的瀏覽數(shù)據(jù)。早些時(shí)候,本地存儲(chǔ)使用的是

cookie。但是Web存儲(chǔ)需要更加的安全與快速，這些數(shù)據(jù)不會(huì)被保存在服務(wù)器上，而只用于用戶請(qǐng)求網(wǎng)站數(shù)據(jù)上。它也可以存儲(chǔ)大量的數(shù)據(jù)，而不影響網(wǎng)站的性能。數(shù)據(jù)以

鍵/值

對(duì)存在,web網(wǎng)頁(yè)的數(shù)據(jù)只允許該網(wǎng)頁(yè)訪問(wèn)使用。WebStorage在瀏覽器的

API有兩個(gè)：localStorage和sessionStorage，存在于

window對(duì)象中：localStorage對(duì)應(yīng)

window.localStorage，sessionStorage對(duì)應(yīng)

window.sessionStorage。6.3網(wǎng)頁(yè)數(shù)據(jù)存儲(chǔ)WebStorage開(kāi)發(fā)實(shí)例

localStorage-用于長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間，直到手動(dòng)去除。sessionStorage-用于臨時(shí)保存同一窗口(或標(biāo)簽頁(yè))的數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁(yè)之后將會(huì)刪除這些數(shù)據(jù)。在使用

web存儲(chǔ)前,應(yīng)檢查瀏覽器是否支持

localStorage和sessionStorage:if(typeof(Storage)!=="undefined"){//是的!支持

localStoragesessionStorage對(duì)象!//一些代碼.....}Else{//抱歉!不支持

web存儲(chǔ)。

}當(dāng)瀏覽器不支持Webstorage時(shí)，就會(huì)彈出警告窗口，如果支持就執(zhí)行l(wèi)ocalStorage和sessionStorage程序代碼。目前InternetExplorer8+、Firefox、Opera、Chrome和Safari都支持Webstorage。需要注意的是，IE和Firefox測(cè)試時(shí)需要把文件上傳到服務(wù)器或localhost才能運(yùn)行，建議測(cè)試時(shí)使用GoogleChrome瀏覽器。Webstorage提供客戶端存儲(chǔ)數(shù)據(jù)的兩個(gè)對(duì)象為：localStorage和sessionStorage基本使用方法如圖6-10所示：這里的作用域指的是：如何隔離開(kāi)不同頁(yè)面之間的localStorage（例如我們不能在百度的頁(yè)面上能讀到騰訊的localStorage）。localStorage只要在相同的協(xié)議、相同的主機(jī)名、相同的端口下，就能讀取/修改到同一份localStorage數(shù)據(jù)。sessionStorage比localStorage更嚴(yán)苛一點(diǎn)，除了協(xié)議、主機(jī)名、端口外，還要求在同一窗口（也就是瀏覽器的標(biāo)簽頁(yè)）下。LocalStorage的生命周期及其有效范圍與Cookie類似，它的生命周期由網(wǎng)頁(yè)程序設(shè)計(jì)者自行制定，不會(huì)隨著瀏覽器的關(guān)閉而消失，適合于在數(shù)據(jù)需要分頁(yè)或跨窗口的場(chǎng)合。關(guān)閉瀏覽器之后除非主動(dòng)清除數(shù)據(jù)，否則localStorage數(shù)據(jù)會(huì)一直存在；sessionStorage在關(guān)閉瀏覽器窗口或分頁(yè)（tab）后數(shù)據(jù)就會(huì)消失，數(shù)據(jù)也僅對(duì)當(dāng)前窗口或分頁(yè)有效，適合于暫時(shí)保存數(shù)據(jù)的場(chǎng)合。6.2.2localStorage和sessionStorage在HTML5標(biāo)準(zhǔn)中，WebStorage只允許存儲(chǔ)字符串?dāng)?shù)據(jù)，不管是

localStorage，還是

sessionStorage，可使用的API都相同，常用的有如下幾個(gè)（以localStorage為例）：1.訪問(wèn)localStorage的方法localStorage對(duì)象存儲(chǔ)的數(shù)據(jù)沒(méi)有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用，訪問(wèn)方式有三種：Storage對(duì)象的setItem和getItem方法、數(shù)組索引方法和屬性操作方法。存儲(chǔ)語(yǔ)法：存儲(chǔ)使用setItem方法，格式如下：window.localStorage.setItem(key,value);例如，我們想指定一個(gè)localStorage變量userdata，并指定它的值為"菲子的個(gè)人主頁(yè)"，程序代碼寫(xiě)為：window.localStorage.setItem(“userdata”,"菲子的個(gè)人主頁(yè)")；數(shù)組索引存儲(chǔ)語(yǔ)法：window.localStorage[“userdata”]="菲子的個(gè)人主頁(yè)";屬性方法存儲(chǔ)語(yǔ)法：window.localStorage.userdata="菲子的個(gè)人主頁(yè)";讀取語(yǔ)法：當(dāng)我們想讀取userdata數(shù)據(jù)時(shí)，使用getItem方法，格式如下：window.localStorage.getItem(key);例如：varvalue1=window.localStorage.getItem(“userdata”);數(shù)組索引讀取語(yǔ)法：varvalue2=window.localStorage[“userdata”];屬性方法讀取語(yǔ)法：varvalue3=window.localStorage.userdata;刪除語(yǔ)法：要?jiǎng)h除一條localStorage數(shù)據(jù)，可以調(diào)用localStorage.removeItem(key)方法或delete屬性進(jìn)行操作，例如：localStorage.removeItem("username");deletelocalStorage.removeItem.username;deletelocalStorage.removeItem("username");要想刪除localStorage全部數(shù)據(jù)，可以使用clear()方法。<!DOCTYPEhtml><html><head><title>訪問(wèn)localStorage的方法實(shí)例</title><linkrel=stylesheettype="text/css"href="color.css"><scripttype="text/javascript">functionisLoad(){ if(typeof(Storage)=="undefined") { alert("Sorry!!我們的瀏覽器不支持WebStorage"); }else{ btn_save.addEventListener("click",saveToLocalStorage); btn_load.addEventListener("click",loadFromLocalStorage); btn_clear.addEventListener("click",clearLocalStorage); }}functionsaveToLocalStorage(){ localStorage.username=inputname.value;}functionloadFromLocalStorage(){ show_LocalStorage.innerHTML=localStorage.username+"我們好~歡迎來(lái)我的網(wǎng)站~";}functionclearLocalStorage(){ localStorage.clear(); show_LocalStorage.innerHTML=localStorage.username;}</script></head><body><bodyonload="isLoad()"><imgsrc="images/welcome.jpg"/><br/>

請(qǐng)輸入我們的姓名：<inputtype="text"id="inputname"value=""><br/><divid="show_LocalStorage"></div><br/><buttonid="btn_save">保存至localstorage</button><buttonid="btn_load">從localstorage獲取資料</button><buttonid="btn_clear">清除localstorage資料</button></body></html>【案例6-9】訪問(wèn)localStorage的方法開(kāi)發(fā)實(shí)例【實(shí)例解析】當(dāng)用戶輸入姓名，并單擊“保存至localStorage”按鈕時(shí)，代碼

localStorage.username=inputname.value;數(shù)據(jù)就會(huì)被存儲(chǔ)localStorage列表中，打開(kāi)Chrome瀏覽器開(kāi)發(fā)者工具中“Application”中的localStorage選項(xiàng)可以看到保存的所有l(wèi)ocalStorage數(shù)據(jù)的key和value的鍵值對(duì)信息；當(dāng)單擊“從localStorage獲取資料”按鈕時(shí)，代碼localStorage.username就會(huì)將名字顯示出來(lái)，如圖6-11所示：

請(qǐng)讀者將瀏覽器窗口關(guān)閉，重新打開(kāi)該HTML文件，再當(dāng)單擊“從localStorage獲取資料”按鈕時(shí)，會(huì)發(fā)現(xiàn)存儲(chǔ)的localStorage數(shù)據(jù)一直都在，不會(huì)因?yàn)殛P(guān)閉瀏覽器而消失，如圖6-12所示：點(diǎn)擊“清除localstorage資料”按鈕，存儲(chǔ)localStorage列表中的"username"數(shù)據(jù)就被清除了，打開(kāi)Chrome瀏覽器開(kāi)發(fā)者工具中“Application”中的localStorage選項(xiàng)可以看到保存在localStorage數(shù)據(jù)的key和value的鍵值對(duì)信息中已經(jīng)沒(méi)有"username"的數(shù)據(jù)了；頁(yè)面中"username"顯示的位置變?yōu)椤皍ndefined”，如圖6-13所示：sessionStorage只能保存在單一的瀏覽器或分頁(yè)（tab），關(guān)閉瀏覽器后存儲(chǔ)的數(shù)據(jù)就消失了，其最大的用途在于保存一些臨時(shí)的數(shù)據(jù)，防止用戶重新整理網(wǎng)頁(yè)時(shí)不小心丟失這些數(shù)據(jù)，sessionStorage的操作方法和localStorage相同，下面列出sessionStorage方法語(yǔ)法，以供讀者參考，只是不再重復(fù)說(shuō)明：存儲(chǔ)語(yǔ)法：window.sessionStorage.setItem(“userdata”,"菲子的個(gè)人主頁(yè)")；window.sessionStorage[“userdata”]="菲子的個(gè)人主頁(yè)";window.sessionStorage.userdata="菲子的個(gè)人主頁(yè)";讀取語(yǔ)法：varvalue1=window.sessionStorage.getItem(“userdata”);varvalue2=window.sessionStorage[“userdata”];varvalue3=window.sessionStorage.userdata;刪除語(yǔ)法：sessionStorage.removeItem("username");deletesessionStorage.removeItem.username;deletesessionStorage.removeItem("username");要想刪除sessionStorage全部數(shù)據(jù)，可以使用clear()方法。2．訪問(wèn)sessionStorage的方法在已經(jīng)了解WebStorage基本語(yǔ)法之后，本小節(jié)使用localStorage和sessionStorage制作一個(gè)網(wǎng)頁(yè)中常見(jiàn)并且實(shí)用的功能，即“登錄/注銷(xiāo)”和“計(jì)數(shù)器”?！景咐?-10】WebStorage實(shí)例-登錄頁(yè)面開(kāi)發(fā)實(shí)例。設(shè)計(jì)說(shuō)明：利用localStorage數(shù)據(jù)保存的特性，我們做一個(gè)登錄/注銷(xiāo)的界面并統(tǒng)計(jì)用戶的進(jìn)站次數(shù)（計(jì)數(shù)器）。當(dāng)用戶單擊“登錄”按鈕時(shí)，出現(xiàn)“請(qǐng)輸入你的姓名”的文本框讓用戶輸入姓名；單擊“發(fā)送”按鈕后，將姓名存儲(chǔ)到localStorage；重載頁(yè)面，將進(jìn)入網(wǎng)站次數(shù)存儲(chǔ)于localStorage，并將用戶姓名以及進(jìn)站次數(shù)顯示在<div>標(biāo)記中；單擊“注銷(xiāo)”按鈕后，<div>標(biāo)記顯示已注銷(xiāo)，并清空l(shuí)ocalStorage。顯示頁(yè)面如圖6-14到圖6-16所示，完整代碼查閱書(shū)本所附代碼：6.2.3WebStorage實(shí)例-登錄頁(yè)面案例代碼：設(shè)置頁(yè)面HTML5標(biāo)簽，<bodyonLoad="isLoad()">說(shuō)明網(wǎng)站body頁(yè)面加載完成后執(zhí)行isLoad()函數(shù)內(nèi)容：<!DOCTYPEhtml><html><head><title>WebStorage開(kāi)發(fā)實(shí)例</title><metacharset="utf-8"/><linkrel=stylesheettype="text/css"href="color.css"><scripttype="text/javascript">functionisLoad(){ inputSpan.style.display='none';/*隱藏輸入框及發(fā)送按鈕*/ if(typeof(Storage)=="undefined") { alert("Sorry!!我們的瀏覽器不支持WebStorage"); }else{ /*判斷姓名是否已存入localStorage，已存入時(shí)才執(zhí)行{}內(nèi)的指令*/ if(localStorage.username){ /*localStorage.counter資料不存在時(shí)才執(zhí)行傳回undefined*/ if(!localStorage.counter){ localStorage.counter=1;/*初始值設(shè)為1*/ }else{ localStorage.counter++;/*遞增*/ } btn_login.style.display='none';/*隱藏登錄按鈕*/ show_LocalStorage.innerHTML=localStorage.username+"您好，這是我們的第"+localStorage.counter+"次來(lái)到網(wǎng)站~"; } btn_login.addEventListener("click",login); btn_send.addEventListener("click",sendok); btn_logout.addEventListener("click",clearLocalStorage); }}functionsendok(){ localStorage.username=inputname.value; location.reload();/*重新載入網(wǎng)頁(yè)*/ }functionlogin(){ inputSpan.style.display=''; /*顯示姓名輸入框及發(fā)送按鈕*/}functionclearLocalStorage(){ localStorage.clear();/*清空l(shuí)ocalStorage*/ show_LocalStorage.innerHTML="已成功退出!!"; btn_login.style.display='';/*顯示登錄按鈕*/ inputSpan.style.display='';/*顯示姓名輸入框及發(fā)送按鈕*/}</script></head><bodyonLoad="isLoad()"><buttonid="btn_login">登錄</button><buttonid="btn_logout">退出</button><br/><imgsrc="images/welcome.jpg"/><br/><spanid="inputSpan">請(qǐng)輸入我們的姓名：<inputtype="text"id="inputname"value=""><buttonid="btn_send">發(fā)送</button></span><br/><divid="show_LocalStorage"></div><br/></body></body></html>【設(shè)計(jì)說(shuō)明】：演示效果如圖所示，當(dāng)點(diǎn)擊網(wǎng)頁(yè)中的“選項(xiàng)1”、“選項(xiàng)2”或“選項(xiàng)3”按鈕時(shí)，分別將其折疊起來(lái)的選項(xiàng)框具體內(nèi)容展現(xiàn)，出現(xiàn)如圖所示的效果，再次點(diǎn)擊，則具體內(nèi)容又折疊起來(lái)。該效果可應(yīng)用到一些菜單顯示和新聞文章顯示等實(shí)際應(yīng)用場(chǎng)景中。6.3手風(fēng)琴菜單設(shè)計(jì)圖

手風(fēng)琴菜單折疊效果圖手風(fēng)琴菜單展開(kāi)效果步驟1：設(shè)計(jì)HTML5頁(yè)面顯示，設(shè)計(jì)三組class為accordion的選項(xiàng)button和class為panel的div元素，其中div中使用p元素來(lái)設(shè)計(jì)對(duì)應(yīng)的折疊框具體內(nèi)容信息，：<h2>手風(fēng)琴動(dòng)畫(huà)</h2><p>點(diǎn)擊以下選項(xiàng)顯示折疊內(nèi)容</p><buttonclass="accordion">選項(xiàng)1</button><divclass="panel"><p>選項(xiàng)1內(nèi)容.</p></div><buttonclass="accordion">選項(xiàng)2</button><divclass="panel"><p>選項(xiàng)2內(nèi)容</p></div><buttonclass="accordion">選項(xiàng)3</button><divclass="panel"><p>選項(xiàng)3內(nèi)容</p></div>其中<buttonclass="accordion">選項(xiàng)1</button>定義選項(xiàng)1-3的class屬性為accordion；<divclass="panel"></div>標(biāo)簽中包含的是折疊隱藏的菜單內(nèi)容。步驟2：定義CSS屬性，實(shí)現(xiàn)class為accordion的選項(xiàng)button和class為panel的div元素，、div中的p元素的樣式：button.accordion{background-color:#eee; //背景顏色

color:#444; //字體顏色

cursor:pointer; //鼠標(biāo)顯示外觀為手型

padding:18px; //填充為18像素

width:100%; //寬度為100%border:none; //無(wú)邊框

text-align:left; //文字為左對(duì)齊

outline:none; //沒(méi)有外線框

font-size:15px; //字體大小15像素

transition:0.4s; //運(yùn)動(dòng)速度為0.4秒}button.accordion.active,button.accordion:hover{background-color:#ddd; //鼠標(biāo)激活和懸停狀態(tài)的背景顏色}div.panel{padding:018px; //內(nèi)容的上下填充為0像素，左右填充為18像素，

background-color:white; //背景顏色

max-height:0; //最大高度為自動(dòng)高度

overflow:hidden; //隱藏超出寬度的內(nèi)容

transition:max-height0.2sease-out; //動(dòng)畫(huà)為0.2逐漸漸出的方式顯示文本內(nèi)容}其中button.accordion定義class為accordion的button標(biāo)簽的顯示樣式；button.accordion.active,button.accordion:hover定義class為accordion的button標(biāo)簽的點(diǎn)擊后和懸停顯示樣式；div.panel定義class為panel的div標(biāo)簽的顯示樣式；步驟3：用JavaScript代碼實(shí)現(xiàn)點(diǎn)擊后的效果：varacc=document.getElementsByClassName("accordion");//獲取class名為accordion的標(biāo)簽對(duì)象vari;for(i=0;i<acc.length;i++){//對(duì)獲取的標(biāo)簽1-3對(duì)象都添加onclick事件監(jiān)聽(tīng)對(duì)象

acc[i].onclick=function(){this.classList.toggle("active");//切換當(dāng)前點(diǎn)擊的標(biāo)簽active屬性

varpanel=this.nextElementSibling;//尋找當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)

if(panel.style.maxHeight){//如果兄弟節(jié)點(diǎn)有maxHeight（即當(dāng)前panel對(duì)象是顯示的狀態(tài)）

panel.style.maxHeight=null;//則將panel對(duì)象maxHeight設(shè)為null（即設(shè)置為隱藏狀態(tài)）

}else{panel.style.maxHeight=panel.scrollHeight+"px";//如果panel對(duì)象maxHeight為null（即設(shè)置為隱藏狀態(tài)），則將其maxHeight設(shè)置為滾動(dòng)高度（即通過(guò)設(shè)置高度來(lái)實(shí)現(xiàn)顯示效果）

}}}【設(shè)計(jì)說(shuō)明】：本實(shí)例演示了如何結(jié)合CSS和JavaScript來(lái)一起渲染圖片。首先，我們使用CSS來(lái)創(chuàng)建modal窗口（對(duì)話框），默認(rèn)是隱藏的，左圖是模塊窗口隱藏時(shí)的狀態(tài)；然后，我們使用JavaScript來(lái)顯示模態(tài)窗口，當(dāng)我們點(diǎn)擊圖片時(shí)，圖片會(huì)在彈出的窗口中顯示，右圖是模塊窗口顯示時(shí)的狀態(tài)：6.4圖片Modal（模態(tài)）效果設(shè)計(jì)圖

模塊窗口隱藏時(shí)狀態(tài)圖10.7模塊窗口顯示時(shí)狀態(tài)步驟1：HTML5頁(yè)面設(shè)計(jì)，使用一個(gè)img標(biāo)簽放入一個(gè)圖片，并設(shè)置圖片的高為200像素，寬為300像素；設(shè)計(jì)一個(gè)div作為模塊框，其id為myModal，類名為modal，模態(tài)框中定義了span、img和div標(biāo)簽，用來(lái)部署模態(tài)框的內(nèi)容：<body><imgid="myImg"src="images/lights600x400.jpg"alt="NorthernLights,Norway"width="300"height="200"><divid="myModal"class="modal"><spanclass="close">×</span><imgclass="modal-content"id="img01"><divid="caption"></div></div>步驟2：CSS頁(yè)面渲染，實(shí)現(xiàn)id為myImg的圖片、id為caption當(dāng)前狀態(tài)和鼠標(biāo)懸停狀態(tài)的樣式；實(shí)現(xiàn)類名為modal和.modal-content的樣式等，并且還實(shí)現(xiàn)了窗口的自適應(yīng)設(shè)計(jì)，具體如下：#myImg{ /*設(shè)置id為*myImg的圖片的樣式/border-radius:5px; /*設(shè)置半徑為5像素的圓角邊框*/cursor:pointer; /*設(shè)置鼠標(biāo)狀態(tài)*/transition:0.3s; /*設(shè)置動(dòng)畫(huà)變化的持續(xù)時(shí)間為0.3秒*/}#myImg:hover{opacity:0.7;} /*設(shè)置圖片的鼠標(biāo)懸停狀態(tài)樣式：透明度為原圖的0.7*/.modal{ /*設(shè)置class為modal的模態(tài)框樣式*/display:none; /*默認(rèn)隱藏*/position:fixed; /*位置為：固定定位*/z-index:1; /*模態(tài)框在頂層*/padding-top:100px; /*模態(tài)框的填充效果為100像素*/left:0; /*居左0像素*/top:0; /*居上0像素*/width:100%; /*寬度為100%，滿屏顯示*/height:100%; /*高度為100%，滿屏顯示*/overflow:auto; /*如果文字不夠顯示則出現(xiàn)滾動(dòng)條*/background-color:rgb(0,0,0); /*設(shè)置背景色*/background-color:rgba(0,0,0,0.9); /*設(shè)置有透明度的背景色*/}.modal-content{ /*設(shè)置class為modal-content的狀態(tài)*/margin:auto; /*外邊距為自動(dòng)邊距*/display:block; /*塊狀顯示*/width:80%; /*寬度為80%*/max-width:700px; /*最大寬度為700像素*/}#caption{ /*設(shè)置id為caption的圖片的樣式*/margin:auto; /*外邊距為自動(dòng)邊距*/display:block; /*塊狀顯示*/width:80%; /*寬度為80%*/max-width:700px; /*最大寬度為700像素*/text-align:center; /*文字為居中對(duì)齊*/color:#ccc; /*顏色為#ccc*/padding:10px0; /*填充為上下10像素，左右0像素*/height:150px; /*高度為150像素*/}.modal-content,#caption{ /*設(shè)置classmodal-content和idcaption的元素的

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論