本文主要是对h5样式和动画的熟练应用。要想实时显示天气预报,请自行百度...
实现的界面是
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天气预报</title>
<link rel="stylesheet" href="weather.css">
</head>
<body>
<header>
<h2>郑州</h2>
</header>
<main>
<img src="days/snow4.png" alt=""/>
<p style="font-size:32px;">-13 ~ 2</p>
<p style="font-size:26px;">小雪</p>
<p style="font-size:20px;">微风</p>
<p style="font-size:16px;">实时温度:13度 空气质量 13s 轻度污染</p>
</main>
<footer>
<div>
<p>周二</p>
<img src="days/sleet.png" >
<p>13-5</p>
<p style="font-size:16px;">晴</p>
<p>微风</p>
</div>
<div class="tom1">
<p>周三</p>
<img src="days/zhongyu.png">
<p>13-5</p>
<p style="font-size:16px;">晴</p>
<p>微风</p>
</div>
<div class="tom2">
<p>周四</p>
<img src="days/qing.png">
<p>13-5</p>
<p style="font-size:16px;">晴</p>
<p>微风</p>
</div>
</footer>
<div class="clear"></div>
</body>
<script src="flake.js"></script>
</html>
天气预报的样式
html{
height: 100%;
}
body{
height: 100%;
margin: 0;
background: linear-gradient(to bottom,cornflowerblue,white) no-repeat;
font-family: "微软雅黑";
overflow: hidden;
}
header{
text-align: center;
width: 100%;
height: 100px;
color: #fff;
}
main{
text-align: center;
color: #fff;
}
/*标签的宽度= 边框的宽度+内容的宽度+内边距
其中 设定的宽度为内容的宽度
当设定的box-size:border-box的时候,标签的宽度就等于设定的宽度*/
footer{
width: 70%;
color: #fff;
padding-top: 100px;
margin: 0px auto;
}
p{
line-height: 10px;
}
footer div{
text-align: center;
width: 33.33%;
float: left;
border-right: 1px solid #fff;
box-sizing: border-box;
}
footer div:nth-child(3){
border: 0;
}
/*.tom{
text-align: center;
width: 33.33%;
float: left;
border-right: 1px solid #fff;
box-sizing: border-box;
}
.tom1{
text-align: center;
float: left;
width: 33.33%;
border-right: 1px solio0-d #fff;
box-sizing: border-box;
}
.tom2{
text-align: center;
float: left;
width: 33.33%;
box-sizing: border-box;
}*/
div img{
height: 64px;
width: 64px;
}
.clear{
clear: both;
}
动态雪花的js
function flake(){
// 创建img标签
var f = document.createElement("img");
// 获取浏览器的高度和宽度
var h = document.documentElement.clientHeight;
var w = document.documentElement.clientWidth;
var left =w * Math.random();
var top = h * Math.random();
f.src = "flake.png";
f.style.position = "absolute";
f.style.left = left + "px";
f.style.top = top + "px";
//随机按比例缩放
f.style.transform = "scale(" + Math.random() / 2 +")";
f.style.zIndex = "-100";
// 给body添加img标签
document.body.appendChild(f);
function down(){
top = top + 10;
left = left + 5;
if(top > h ) top = -100;
if(left > w) left = -100;
f.style.left = left + "px";
f.style.top = top + "px";
}
setInterval(down,100);
}
flake();
for(var i=0; i<200;i++){
flake();
}