天气html5,天气html

JS用localStorage存储天气数据问题

首先localStorage只有在html5中才有，所以要确保浏览器支持html5，建议用谷歌浏览器。

成都创新互联网络公司拥有十余年的成都网站开发建设经验，1000多家客户的共同信赖。提供网站设计制作、做网站、网站开发、网站定制、买链接、建网站、网站搭建、自适应网站建设、网页设计师打造企业风格，提供周到的售前咨询和贴心的售后服务

其次创建一个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怎么实现

首先你要懂html5 canvas，javascript，css3，这样才能做出漂亮的动画。

这个链接里面有天气的接口，里面提供了一些天气的信息，你可以用ajax调用。

具体的你可以参加一下慕课网上面这个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

运行截图：