html5天气,html5天气获取

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

JS用localStorage存储天气数据问题

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

其次创建一个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");

希望对你有帮助

[img]

相关问答

Q1: 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

运行截图：

Q2: 怎么把网页的天气添加到桌面ios

iOS中的safri浏览器可以将一个网页添加到桌面，当做一个独立的应用运行。这需要html5的相关知识和开发经验。

这里拓展一些Webapp的相关细节：

全屏显示：meta name="apple-mobile-web-app-capable" content="yes" /

系统顶栏的颜色(黑色和白色)：

meta name="apple-mobile-app-status-bar-style" content="white" /

meta name="apple-mobile-app-status-bar-style" content="black" /

桌面程图标(如果不设置，则图标会显示网页的截图)：

link rel="apple-touch-icon" href="icon.png" /

但是，iOS会自作多情的给这个图标加上高光，如果想图标不被高光，可以这样：

link rel="apple-touch-icon-precomposed" href="icon.png" /

如果想给不同的设备匹配不同的icon，可以加上size属性：

link rel="apple-touch-icon" size="72x72" href="icon-ipad.png" /

link rel="apple-touch-icon" size="114x114" href="icon-iphone4.png" /

程序启动的过程中，需要指定启动画面，否则，白屏或者截图是让人很不愉悦的。

iOS有ipad和iPhone/ipod touch之分。

ipad的启动画面是横竖屏分开的，画面的尺寸必须是1024*768、768*1024。

iPhone和ipod touch虽然都是竖屏的，但是却有Retina屏幕和非Retina屏幕之分；另外它们启动画面的尺寸并不是屏幕的大小，而是(屏幕宽度)*(屏幕高度-20)。也就是说，非Retina的尺寸为320*460，Retina屏幕的尺寸为640*920。

引入启动画面是支持媒体查询的。

因此，可以通过media query给ipad的横竖屏引入不同的图：

link rel="apple-touch-start-image" href="landScape.png" madia="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape)" /

link rel="apple-touch-start-image" href="portait.png" madia="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portait)" /

但是媒体查询却搞不定Retina屏幕，所以通过js来hack：

首先，给普通的分辨率引入320*460的图片：

link rel="apple-touch-start-image" href="start.png"media="screen and (max-device-weidth:320px)" /

Retina屏幕js:

if((app.device.type === "iPhone" || app.device.type === "iPod")

app.device.version = '5'

window.devicePixelRatio = 2){

$('head').append($('link rel="apple-touch-startup-image" href="start-640-920.png" /'));

}

Q3: html5动画天气app怎么实现

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

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