JS用localStorage存儲天氣數(shù)據(jù)問題

首先localStorage只有在html5中才有，所以要確保瀏覽器支持html5，建議用谷歌瀏覽器。

成都創(chuàng)新互聯(lián)網(wǎng)絡公司擁有十余年的成都網(wǎng)站開發(fā)建設經驗，1000多家客戶的共同信賴。提供網(wǎng)站設計制作、做網(wǎng)站、網(wǎng)站開發(fā)、網(wǎng)站定制、買鏈接、建網(wǎng)站、網(wǎng)站搭建、自適應網(wǎng)站建設、網(wǎng)頁設計師打造企業(yè)風格，提供周到的售前咨詢和貼心的售后服務

其次創(chuàng)建一個js文件如 tempcache.js

//臨時存儲

var TempCache = {

cache: function (value) {

localStorage.setItem("EasyWayTempCache", value);

},

getCache: function () {

return localStorage.getItem("EasyWayTempCache");

},

setItem: function (key, value) {

localStorage.setItem(key, value);

},

getItem: function (key) {

return localStorage.getItem(key);

},

removeItem: function (key) {

return localStorage.removeItem(key);

}

};

調用時先引用該js文件 然后看下面的示例

設置值

TempCache.setItem("name","張三");

取值

var name=TempCache.getItem("name")；

移除設置的值

TempCache.removeItem("name");

希望對你有幫助

html5動畫天氣app怎么實現(xiàn)

首先你要懂html5 canvas，javascript，css3，這樣才能做出漂亮的動畫。

這個鏈接里面有天氣的接口，里面提供了一些天氣的信息，你可以用ajax調用。

具體的你可以參加一下慕課網(wǎng)上面這個jquery mobile的列車時刻表教程。

HTML5 天氣曲線圖

代碼如下：

!DOCTYPE?HTML

html

head

meta?content="text/html;?charset=utf-8"?http-equiv="Content-Type"?/

title天氣實例/title

/head

body

canvas?id="canvas_circle"?width="800"height="600"????

pYour?browserdoes?not?support?the?canvas?element!/p????

/canvas????

script?type="text/javascript"????

//溫度轉換成縱坐標

function?trans(degree){

return?70+(40-degree)*10;

}

//簡單版繪制溫度圖表

function?drawChart(canvasId,?maxArr,?minArr,?dateArr,?weekArr)?{

var?weekString?=?["周一",?"周二",?"周三",?"周四",?"周五",?"周六",?"周日"];

var?pi2?=?Math.PI*2;

var?canvas?=document.getElementById(canvasId);????

var?c?=canvas.getContext("2d");

c.font?="12px?Times?New?Roman";

//設置背景漸變

var?grd=c.createLinearGradient(0,25,0,300);

grd.addColorStop(0,"#000066");

grd.addColorStop(0.4,"#000055");

grd.addColorStop(1,"#000022");

c.fillStyle=grd;

c.fillRect(25,25,410,300);

//繪制文字

c.fillStyle="#ffffff";

c.textAlign?=?"center";

c.fillText("昨天",?50,?50?);?

c.fillText("今天",?110,?50?);?

for(var?i=2;?i?7;?i++){

c.fillText(weekString[weekArr[i]],?50+60*i,?50?);????

}

for(var?i=0;?i?7;?i++){

c.fillText(dateArr[i],?50+60*i,?65?);????

}

//繪制最高溫度

c.moveTo(50,?trans(maxArr[0]));

for(var?i=1;?i?7;?i++){

c.lineTo(50+60*i,?trans(maxArr[i]));

}

c.strokeStyle="#ff4444";

c.stroke();

//繪制最低溫度

c.beginPath();

c.moveTo(50,?trans(minArr[0]));

for(var?i=1;?i?7;?i++){

c.lineTo(50+60*i,?trans(minArr[i]));

}

c.strokeStyle="#4444ff";

c.stroke();

//繪制點

c.fillStyle?=?"ff4444";

c.beginPath();

for(var?i=0;?i?7;?i++){

c.moveTo(50+60*i,?trans(maxArr[i]));

c.arc(50+60*i,?trans(maxArr[i]),?3,?0,?pi2);

}

c.fill();

c.beginPath();

c.fillStyle?=?"4444ff";

for(var?i=0;?i?7;?i++){

c.moveTo(50+60*i,?trans(minArr[i]));

c.arc(50+60*i,?trans(minArr[i]),?3,?0,?pi2);

}

c.fill();

}

function?init()?{

var?maxArr?=?[33,37,38,35,34,29,31];//最高溫度

var?minArr?=?[19,22,23,22,23,20,21];//最低溫低

var?dateArr?=?["5/27",?"5/28",?"5/29",?"5/30",?"5/31",?"6/1",?"6/2"];//日期

var?weekArr?=?[2,3,4,5,6,0,1];//星期

drawChart("canvas_circle",?maxArr,?minArr,?dateArr,?weekArr);

}

window.onload?=?init;

/script????

/body

/html

運行截圖：

本文題目：天氣html5,天氣html
鏈接地址：http://jinyejixie.com/article4/dssdooe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設、外貿建站、品牌網(wǎng)站建設、域名注冊、、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)