版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_35656188/article/details/79737960
一、html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="js/swiper/HxzsSwiper.min.css" />
<link rel="stylesheet" type="text/css" href="css/iconfont.css">
<link rel="stylesheet" href="css/index.css" />
<title>小胡天气</title>
</head>
<style>
</style>
<body>
<p id="currCityName"><img src="img/9.png" /><span>北京市</span></p>
<div class="mylayer" onclick="javascript:mylayer();"></div>
<img src="img/more.png" class="pulse" onclick="javascript:myshow();" />
<div class="downdiv">
<input placeholder="请输入城市名称" id="cityName" />
<span class="select" onclick="javascript:myselect();">查询</span>
</div>
<div id="one"></div>
<div id="two">
<i class="" id="topimg"></i>
<p id="temp"></p>
<p id="dayweather"></p>
<p id="wind"></p>
<p id="date"></p>
</div>
<div class="swiper-container" id="swipercontainer">
<div class="swiper-wrapper" id="swiperHtml">
</div>
</div>
<div id="mapID"></div>
</body>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/swiper/HxzsSwiper.min.js"></script>
<script type="text/javascript" src="js/layer_mobile/layer.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.4&key=写自己的key"></script>
<script type="text/javascript" src="js/index.js" ></script>
</html>
二、css代码
* {
margin: 0;
padding: 0;
}
body,
html {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
color: white;
background-image: linear-gradient( to bottom, deepskyblue, deepskyblue);
-moz-user-select: none;
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: auto;
}
p {
margin: 0px auto 9px;
}
#one {
font-size: 40px;
text-align: center;
margin-top: 20%;
}
#two {
text-align: center;
}
.three {
text-align: center;
overflow: hidden;
}
.swiper-container {
width: 100%;
}
.swiper-slide {
width: 100%;
}
.b {
float: left;
text-align: center;
width: 48%;
/*border-left: solid 1px white;*/
border-right: solid 1px white;
}
.c {
float: left;
text-align: center;
width: 48%;
}
.mylayer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #111;
opacity: 0.8;
z-index: 4;
display: none;
}
.downdiv {
position: absolute;
bottom: 0px;
width: 100%;
background-color: #FFFFFF;
height: 180px;
z-index: 10;
text-align: center;
-webkit-transform: translateY(100%);
-ms-transform: translateY(-100%);
transform: translateY(100%);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.updiv {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.downdiv input {
height: 45px;
width: 60%;
padding-left: 10px;
box-sizing: content-box;
border: 1px solid #179AFF;
color: #179AFF;
border-radius: 10px;
margin: 65px 0px;
outline: none;
}
.select {
width: 75px;
border-radius: 20px;
height: 40px;
line-height: 40px;
text-align: center;
color: #FFFFFF;
background-color: #179AFF;
display: inline-block;
vertical-align: middle;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pulse {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
position: absolute;
top: 4%;
right: 5%;
width: 35px;
}
#two i {
font-size: 65px;
}
section {
text-align: center;
}
section i {
font-size: 25px !important;
}
.layui-m-layercont {
color: red;
}
.layui-m-layer2 .layui-m-layercont p {
color: #FFFFFF;
}
#currCityName {
position: absolute;
top: 3%;
left: 5%;
color: #FFFFFF;
}
#mapID {
display: none;
}
#currCityName img {
width: 26%;
margin-right: 7px;
}
#currCityName img,
#currCityName span {
vertical-align: middle;
}
/* IPhone 5 */
.item_5_1 {
margin-top: 20%;
}
/* IPhone6 529 */
.item_6_1 {
margin-top: 27%;
}
.item_7_1 {
margin-top: 35%;
}
.item_8_1 {
margin-top: 40%;
}
三、js代码
//enter键快捷登录
document.onkeydown = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 13) {
myselect();
}
};
/*地图定位*/
mapObj = new AMap.Map('mapID');
mapObj.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 10000 //超过10秒后停止定位，默认：无穷大
});
geolocation.getCurrentPosition(function(status, result) {//定位
if(status == "complete") {
//alert(result.addressComponent.province)
$("#currCityName span").html(result.addressComponent.province);
}else{
$("#currCityName span").html("定位失败");
}
});
//AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位完成信息
//AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
$(function() {
load("北京市");
h = window.innerHeight;
//alert(h);
StyleMatch(h);
});
$("body").on("touchmove",function(event){
event.preventDefault;
}, false);
/*手机样式适配函数*/
function StyleMatch(_h){
if(_h < 510) {//5S手机高度：h=504
$("#swipercontainer").addClass("item_5_1");
} else if(_h < 530) {//7p手机高度：h=529
$("#swipercontainer").addClass("item_6_1");
} else if(_h < 540) {
$("#swipercontainer").addClass("item_7_1");
} else if(_h < 580) {
$("#swipercontainer").addClass("item_8_1");
} else if(_h < 670) {
$("#swipercontainer").addClass("item_8_1");
} else {
$("#swipercontainer").addClass("item_8_1");
}
}
/*加载函数*/
function load(adcode) {
var loadIndex = layer.open({
type: 2,
content: '加载中'
});
var postData = {
key: 自己申请的key,
city: adcode,//城市名称或者编码
extensions: "all"
};
$.ajax({
type: "get",
url: "https://restapi.amap.com/v3/weather/weatherInfo",
data: postData,
dataType: "jsonp",
success: function(data) {
if(data.status == 1) {
layer.close(loadIndex);
if(data.count == 0) {
layer.open({
content: '未查询到该城市信息，请重新输入！',
btn: '确定'
});
} else {
var obj = data.forecasts[0];
/*加载上部分的数据*/
$("#one").html(obj.city);
var classname = "";
classname = "iconfont " + weatherIcon(obj.casts[0].dayweather);
$("#topimg").attr("class", classname);
$("#temp").html(obj.casts[0].nighttemp + "℃/" + obj.casts[0].daytemp + "℃");
$("#dayweather").html(obj.casts[0].dayweather);
$("#wind").html(obj.casts[0].daywind + "风" + obj.casts[0].daypower + "级");
$("#date").html("" + obj.casts[0].date + " " + formatWeek(obj.casts[0].week));
/*下面的轮播图数据*/
var casts = data.forecasts[0].casts;
var resultStr = "";
$.each(casts, function(i, item) {
resultStr += "<div class=\"swiper-slide\">";
resultStr += " <section>";
resultStr += " <p>" + formatWeek(item.week) + "</p>";
resultStr += " <i class=\"iconfont " + weatherIcon(item.dayweather) + "\"></i>";
resultStr += " <p>" + item.nighttemp + "℃/" + item.daytemp + "℃" + "</p>";
resultStr += " <p>" + item.dayweather + "</p>";
resultStr += " </section>";
resultStr += "</div>";
});
$("#swiperHtml").html(resultStr);
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 2,
spaceBetween: 0
});
$(".mylayer").hide();
$('.downdiv').removeClass("updiv");
}
} else {
layer.close(loadIndex);
layer.open({
content: '未查询到该城市信息，请重新输入！',
btn: '确定'
});
}
}
});
}
/*点击遮罩层函数*/
function mylayer() {
$(".mylayer").hide();
$('.downdiv').removeClass("updiv");
}
/*右上角图标点击函数*/
function myshow() {
$(".mylayer").show();
$('.downdiv').addClass("updiv");
$(".downdiv").show();
}
/*点击查询函数*/
function myselect() {
var cityName = $("#cityName").val();
if(cityName == "") {
layer.open({
content: '请输入城市名称！',
btn: '确定'
});
return;
} else {
load(cityName);
}
}
/*预报图标函数*/
function weatherIcon(str) {
var res = "";
if(/^晴$/.test(str)) {
res = "icon-qing";
} else if(/^小雨$/.test(str)) {
res = "icon-xiaoyu1";
} else if(/^中雨$/.test(str)) {
res = "icon-zhongyu ";
} else if(/^大雨$/.test(str)) {
res = "icon-dayu";
} else if(/^大暴雨$/.test(str)) {
res = "icon-dabaoyu";
} else if(/^阵雨$/.test(str)) {
res = "icon-zhenyu";
} else if(/^雷阵雨$/.test(str)) {
res = "icon-leizhenyu";
} else if(/^雷电$/.test(str)) {
res = "icon-leidian";
} else if(/^冻雨$/.test(str)) {
res = "icon-dongyu";
} else if(/^冰雹$/.test(str)) {
res = "icon-tianqitubiao_bingbao";
} else if(/^大风$/.test(str)) {
res = "icon-tianqitubiao_dafeng";
} else if(/^扬沙$/.test(str)) {
res = "icon-tianqitubiao_yangsha";
} else if(/^浮尘$/.test(str)) {
res = "icon-fuchen";
} else if(/^沙尘暴$/.test(str)) {
res = "icon-shachenbao";
} else if(/^雾霾$/.test(str)) {
res = "icon-wumai";
} else if(/^雾$/.test(str)) {
res = "icon-wu";
} else if(/雪/.test(str)) {
res = "icon-baoxue";
} else if(/^多云$/.test(str)) {
res = "icon-duoyun";
} else if(/^阴$/.test(str)) {
res = "icon-yin";
}
return res;
}
/*判断星期几*/
function formatWeek(k) {
var res = "";
if(k == 1) {
res = "星期一";
} else if(k == 2) {
res = "星期二";
} else if(k == 3) {
res = "星期三";
} else if(k == 4) {
res = "星期四";
} else if(k == 5) {
res = "星期五";
} else if(k == 6) {
res = "星期六";
} else if(k == 7) {
res = "星期日";
}
return res;
}
