//ajax请求api获取天气数据
function getWeather() {
$.ajax({
type: "get",
dataType: "json",
url: "http://wthrcdn.etouch.cn/weather_mini?city=合肥",
success: function (data) {
var tips = data.data.ganmao;
var today = data.data.forecast[0];
var tomorrow = data.data.forecast[1];
var afterTomorrow = data.data.forecast[2];
//填充数据
$("#tips").html("Tips:" + tips);
//填充天气数据
setWeather(".today", today);
setWeather(".tomorrow", tomorrow);
setWeather(".afterTomorrow", afterTomorrow);
//设置天气img的src
matchType(today.type, ".today");
matchType(tomorrow.type, ".tomorrow");
matchType(afterTomorrow.type, ".afterTomorrow");
}
});
}
//提取json数据并填充到标签中
function setWeather(date,data) {
$(date).find('p').eq(0).html(data.date);
$(date).find('p').eq(1).html(data.type);
$(date).find('p').eq(2).html(data.high);
$(date).find('p').eq(3).html(data.low);
}
//正则匹配天气类型，修改天气img的src
function matchType(type,date) {
var rain = /\u96e8/;
var sun = /\u6674/;
var cloud = /\u4e91/;
//var overcast = /\u9634/;
var imgName = rain.test(type)?"rain":(sun.test(type)?"sun":(cloud.test(type)?"cloud":"overcast"));
$(date).find('img').attr('src','__STATIC__/admin/images/'+imgName+'.png');
//console.log(imgName);
}
{include file="public/head" /}
<style>
.am-comment-footer{margin:5px 10px;color: #999;padding:0 2px;border-left:5px solid #ccc}
.am-comment-footer a{color: #999;}
.comment{border: 1px solid #dedede;margin-top: 10px}
.am-comment-bd{padding: 5px 10px}
.solid{border-left: 1px solid #ccc}
.message{display: inline-block;margin-left: 50px}
.weather img{margin-top: -150px}
</style>
<title>首页</title>
</head>
<body>
<header class="am-topbar am-topbar-fixed-top wos-header">
<div class="am-container">
<h1 class="am-topbar-brand">
<a href="http://www.anhuihym.top" target="_blank"><img src="__STATIC__/images/logo.png"></a>
</h1>
{include file="public/nav" /}
</div>
</header>
<div class="banner">
<div class="am-g am-container">
<!--轮播图-->
<div class="am-u-sm-12 am-u-md-12 am-u-lg-8">
<div data-am-widget="slider" class="am-slider am-slider-c1" data-am-slider='{"directionNav":false}' >
<ul class="am-slides">
{volist name="Slide" id="vo"}
<li>
<a href="{:url('index/NewsDetailController/index',array('id'=>$vo['id']))}"><img src="__STATIC__/news_imgs/{$vo.img}" class="am-u-sm-12 am-u-md-12 am-u-md-8" style="max-height: 455px;"></a>
<div class="am-slider-desc">{$vo.title}</div>
</li>
{/volist}
</ul>
</div>
</div>
<!--主要部门-->
<div class="am-u-sm-0 am-u-md-0 am-u-lg-4 padding-none">
<div class="star am-container"><span><img src="__STATIC__/images/star2.png">主要部门</span></div>
<ul class="padding-none am-gallery am-avg-sm-2 am-avg-md-4 am-avg-lg-2 am-gallery-overlay" data-am-gallery="{ pureview: true }" >
{volist name="mainDep" id="vo"}
<li>
<div class="am-gallery-item">
<a href="{:url('index/NewsListController/index',array('id'=>$vo['id']))}">
<img src="__STATIC__/images/lins.png"/>
<h3 class="am-gallery-title">{$vo.name}</h3>
</a>
</div>
</li>
{/volist}
</ul>
</div>
</div>
</div>
<div class="am-g am-container newatype">
<div class="am-u-sm-12 am-u-md-12 am-u-lg-8 oh">
<div data-am-widget="titlebar" class="am-titlebar am-titlebar-default" style="margin-bottom: 10px">
<h2 class="am-titlebar-title ">最新发布</h2>
</div>
{volist name="newsList" id="vo"}
<ul class="am-list am-list-static am-list-border">
<li>
<span class="am-badge am-badge-danger">NEW</span>
<span class="am-badge am-badge-success am-radius">{$vo.type}</span>
<span class="am-badge am-badge-secondary am-radius">{$vo.dep}</span>
<span class="am-badge am-badge-error am-radius">{$vo.create_time}</span>
<a href="{:url('index/NewsDetailController/index',array('id'=>$vo['id']))}" style="padding: 0">{$vo.title}</a>
</li>
</ul>
{/volist}
</div>
<div class="am-u-sm-12 am-u-md-12 am-u-lg-4">
<div data-am-widget="titlebar" class="am-titlebar am-titlebar-default" style="margin-bottom: 10px">
<h2 class="am-titlebar-title ">最新评论</h2>
</div>
{volist name="commentList" id="vo"}
<div class="comment">
<header class="am-comment-hd">
<div class="am-comment-meta">
<span class="am-comment-author">{$vo.staff_name}</span>
评论于 <time>{$vo.create_time}</time>
</div>
</header>
<div class="am-comment-bd">{$vo.comment}</div>
<div class="am-comment-footer">
<a href="{:url('index/NewsDetailController/index',array('id'=>$vo['id']))}" title="点击查看新闻详情">{$vo.title}</a>
</div>
</div>
{/volist}
</div>
<div class="am-u-sm-12 am-u-md-12 am-u-lg-12 oh">
<div data-am-widget="titlebar" class="am-titlebar am-titlebar-default" style="margin-bottom: 10px">
<h2 class="am-titlebar-title ">合肥天气 </h2>
</div>
<div class="am-u-md-12 weather">
<div class="today am-u-md-4">
<img src="__STATIC__/admin/images/sun.png" alt="">
<div class="message">
<p>今天</p>
<p>天气</p>
<p>最高</p>
<p>最低</p>
</div>
</div>
<div class="tomorrow solid am-u-md-4">
<img src="__STATIC__/admin/images/sun.png" alt="" >
<div class="message">
<p>明天</p>
<p>天气</p>
<p>最高</p>
<p>最低</p>
</div>
</div>
<div class="afterTomorrow solid am-u-md-4">
<img src="__STATIC__/admin/images/sun.png" alt="" >
<div class="message">
<p>后天</p>
<p>天气</p>
<p>最高</p>
<p>最低</p>
</div>
</div>
</div>
</div>
<div class="am-alert am-alert-secondary am-u-sm-12 am-u-md-12 am-u-lg-12" data-am-alert>
<button type="button" class="am-close">×</button>
<p id="tips"></p>
</div>
</div>
<div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
<a href="#top" title="回到顶部">
<span class="am-gotop-title">回到顶部</span>
<i class="am-gotop-icon am-icon-chevron-up"></i>
</a>
</div>
{include file="public/footer" /}
</body>
<script>
//仪表盘数据 ajax定时获取
window.onload = function () {
getWeather();
};
//ajax请求api获取天气数据
function getWeather() {
$.ajax({
type: "get",
dataType: "json",
url: "http://wthrcdn.etouch.cn/weather_mini?city=合肥",
success: function (data) {
var tips = data.data.ganmao;
var today = data.data.forecast[0];
var tomorrow = data.data.forecast[1];
var afterTomorrow = data.data.forecast[2];
//填充数据
$("#tips").html("Tips:" + tips);
//填充天气数据
setWeather(".today", today);
setWeather(".tomorrow", tomorrow);
setWeather(".afterTomorrow", afterTomorrow);
//设置天气img的src
matchType(today.type, ".today");
matchType(tomorrow.type, ".tomorrow");
matchType(afterTomorrow.type, ".afterTomorrow");
}
});
}
//提取json数据并填充到标签中
function setWeather(date,data) {
$(date).find('p').eq(0).html(data.date);
$(date).find('p').eq(1).html(data.type);
$(date).find('p').eq(2).html(data.high);
$(date).find('p').eq(3).html(data.low);
}
//正则匹配天气类型，修改天气img的src
function matchType(type,date) {
var rain = /\u96e8/;
var sun = /\u6674/;
var cloud = /\u4e91/;
//var overcast = /\u9634/;
var imgName = rain.test(type)?"rain":(sun.test(type)?"sun":(cloud.test(type)?"cloud":"overcast"));
$(date).find('img').attr('src','__STATIC__/admin/images/'+imgName+'.png');
//console.log(imgName);
}
</script>
</html>
评论