建站
咨詢
售后
建站咨詢
新聞中心
JS用localStorage存儲天氣數(shù)據(jù)問題
首先localStorage只有在html5中才有，所以要確保瀏覽器支持html5，建議用谷歌瀏覽器。
成都創(chuàng)新互聯(lián)網(wǎng)絡(luò)公司擁有十余年的成都網(wǎng)站開發(fā)建設(shè)經(jīng)驗，1000多家客戶的共同信賴。提供網(wǎng)站設(shè)計制作、做網(wǎng)站、網(wǎng)站開發(fā)、網(wǎng)站定制、買鏈接、建網(wǎng)站、網(wǎng)站搭建、自適應(yīng)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計師打造企業(yè)風(fēng)格，提供周到的售前咨詢和貼心的售后服務(wù)
其次創(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);
}
};
調(diào)用時先引用該js文件 然后看下面的示例
設(shè)置值
TempCache.setItem("name","張三");
取值
var name=TempCache.getItem("name")；
移除設(shè)置的值
TempCache.removeItem("name");
希望對你有幫助
html5動畫天氣app怎么實現(xiàn)
首先你要懂html5 canvas，javascript，css3，這樣才能做出漂亮的動畫。
這個鏈接里面有天氣的接口，里面提供了一些天氣的信息，你可以用ajax調(diào)用。
具體的你可以參加一下慕課網(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"????
//溫度轉(zhuǎn)換成縱坐標(biāo)
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";
//設(shè)置背景漸變
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
運行截圖：
分享標(biāo)題：天氣html5,天氣html
當(dāng)前地址：http://fisionsoft.com.cn/article/dssdooe.html
