<!DOCTYPE html>
<html lang="en">
<head>
<!-- <script type="text/javascript" charset="UTF-8" src="//res.cdn.openinstall.io/openinstall.js"></script> -->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta http-equiv="Pragma" content="no-cache">
<meta charset="UTF-8">
<title>果冻直播</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="layer-v3.1.0/layer.css">
<link rel="stylesheet" href="css/tv.css">
</head>
<body>
<div class="bg">
<div class="tv-top">
<img src="images/tv-icon.png" alt="">
<p class="my-time"></p>
</div>
<div class="tv-content">
<div class="tv-left-box1">
<p class="tv-left-p1">新增用户</p>
<p class="tv-left-p2"></p>
<p class="tv-left-p3">日<img src="images/top1.png" alt=""><span></span></p>
<p class="tv-left-p4">周<img src="images/top1.png" alt=""><span></span></p>
<p class="tv-left-p5">月<img src="images/top1.png" alt=""><span></span></p>
</div>
<div class="tv-left-box2">
<p class="tv-left-p1">DAU</p>
<p class="tv-left-p2"></p>
<p class="tv-left-p3">日<img src="images/top1.png" alt=""><span></span></p>
<p class="tv-left-p4">周<img src="images/top1.png" alt=""><span></span></p>
<p class="tv-left-p5">月<img src="images/top1.png" alt=""><span></span></p>
</div>
<div class="tv-left-box3">
<p class="tv-left-p1">付费用户</p>
<p class="tv-left-p2"></p>
<p class="tv-left-p3">日<img src="images/top1.png" alt=""><span></span></p>
<p class="tv-left-p4">周<img src="images/top1.png" alt=""><span></span></p>
<p class="tv-left-p5">月<img src="images/top1.png" alt=""><span></span></p>
</div>
<div class="tv-right-box1">
<p class="tv-right-title">· 在线人数 ·</p>
<div class="tv-right-content1">用户 <span></span></div>
<div class="tv-right-content2">主播 <span></span></div>
<ul class="tv-right-ul1">
<li>日 <img src="images/top1.png" alt=""> <span></span></li>
<li>周 <img src="images/top1.png" alt=""> <span></span></li>
<li>月 <img src="images/top1.png" alt=""> <span></span></li>
</ul>
<ul class="tv-right-ul2">
<li>日 <img src="images/top1.png" alt=""> <span></span></li>
<li>周 <img src="images/top1.png" alt=""> <span></span></li>
<li>月 <img src="images/top1.png" alt=""> <span></span></li>
</ul>
</div>
<div class="tv-right-box2">
<p class="tv-right-title">· 充值金额 ·</p>
<div class="tv-right-content"><span>--</span> <div class="day-bar"><div></div></div></div>
<ul class="tv-right-ul3">
<li>日 <img src="images/top1.png" alt=""> <span></span></li>
<li>周 <img src="images/top1.png" alt=""> <span></span></li>
<li>月 <img src="images/top1.png" alt=""> <span></span></li>
</ul>
</div>
</div>
</div>
</body>
<script src="lib/jquery-3.1.1.min.js"></script>
<script>
function dataGet(){
$.ajax({
url:'http://ht2.comm.ishuaji.cn/statshow/getviewdata.html',
dataType:'JSON',
success:function(data){
//新增
$(".tv-left-box1 .tv-left-p2").text(data.result[0].num)
if(data.result[0].day>=0)$(".tv-left-box1 .tv-left-p3").html('日<img src="images/top1.png" alt=""><span>'+data.result[0].day+'%</span>')
else $(".tv-left-box1 .tv-left-p3").html('日<img src="images/top2.png" alt=""><span style="color:#3FF4A7">'+data.result[0].day+'%</span>')
if(data.result[0].week>=0)$(".tv-left-box1 .tv-left-p4").html('周<img src="images/top1.png" alt=""><span>'+data.result[0].week+'%</span>')
else $(".tv-left-box1 .tv-left-p4").html('周<img src="images/top2.png" alt=""><span style="color:#3FF4A7">'+data.result[0].week+'%</span>')
if(data.result[0].month>=0)$(".tv-left-box1 .tv-left-p5").html('月<img src="images/top1.png" alt=""><span>'+data.result[0].month+'%</span>')
else $(".tv-left-box1 .tv-left-p5").html('月<img src="images/top2.png" alt=""><span style="color:#3FF4A7">'+data.result[0].month+'%</span>')
//DAU
$(".tv-left-box2 .tv-left-p2").text(data.result[1].num)
if(data.result[1].day>=0)$(".tv-left-box2 .tv-left-p3").html('日<img src="images/top1.png" alt=""><span>'+data.result[1].day+'%</span>')
else $(".tv-left-box2 .tv-left-p3").html('日<img src="images/top2.png" alt=""><span style="color:#3FF4A7">'+data.result[1].day+'%</span>')
if(data.result[1].week>=0)$(".tv-left-box2 .tv-left-p4").html('周<img src="images/top1.png" alt=""><span>'+data.result[1].week+'%</span>')
else $(".tv-left-box2 .tv-left-p4").html('周<img src="images/top2.png" alt=""><span style="color:#3FF4A7">'+data.result[1].week+'%</span>')
if(data.result[1].month>=0)$(".tv-left-box2 .tv-left-p5").html('月<img src="images/top1.png" alt=""><span>'+data.result[1].month+'%</span>')
else $(".tv-left-box2 .tv-left-p5").html('月<img src="images/top2.png" alt=""><span style="color:#3FF4A7">'+data.result[1].month+'%</span>')
//付费用户
$(".tv-left-box3 .tv-left-p2").text(data.result[2].num)
if(data.result[2].day>=0)$(".tv-left-box3 .tv-left-p3").html('日<img src="images/top1.png" alt=""><span>'+data.result[2].day+'%</span>')
else $(".tv-left-box3 .tv-left-p3").html('日<img src="images/top2.png" alt=""><span style="color:#3FF4A7">'+data.result[2].day+'%</span>')
if(data.result[2].week>=0)$(".tv-left-box3 .tv-left-p4").html('周<img src="images/top1.png" alt=""><span>'+data.result[2].week+'%</span>')
else $(".tv-left-box3 .tv-left-p4").html('周<img src="images/top2.png" alt=""><span style="color:#3FF4A7">'+data.result[2].week+'%</span>')
if(data.result[2].month>=0)$(".tv-left-box3 .tv-left-p5").html('月<img src="images/top1.png" alt=""><span>'+data.result[2].month+'%</span>')
else $(".tv-left-box3 .tv-left-p5").html('月<img src="images/top2.png" alt=""><span style="color:#3FF4A7">'+data.result[2].month+'%</span>')
//在线人数
$(".tv-right-content1").html('用户 <span>'+data.uid_count+'</span>')
if(data.result[4].day>=0)$(".tv-right-ul1 li").eq(0).html('日 <img src="images/top1.png" alt=""> <span>'+data.result[4].day+'%</span>')
else $(".tv-right-ul1 li").eq(0).html('日 <img src="images/top2.png" alt=""> <span style="color:#3FF4A7">'+data.result[4].day+'%</span>')
if(data.result[4].week>=0)$(".tv-right-ul1 li").eq(1).html('日 <img src="images/top1.png" alt=""> <span>'+data.result[4].week+'%</span>')
else $(".tv-right-ul1 li").eq(1).html('日 <img src="images/top2.png" alt=""> <span style="color:#3FF4A7">'+data.result[4].week+'%</span>')
if(data.result[4].month>=0)$(".tv-right-ul1 li").eq(2).html('日 <img src="images/top1.png" alt=""> <span>'+data.result[4].month+'%</span>')
else $(".tv-right-ul1 li").eq(2).html('日 <img src="images/top2.png" alt=""> <span style="color:#3FF4A7">'+data.result[4].month+'%</span>')
//主播人数
$(".tv-right-content2").html('主播 <span>'+data.room_count+'</span>')
if(data.result[5].day>=0)$(".tv-right-ul2 li").eq(0).html('日 <img src="images/top1.png" alt=""> <span>'+data.result[5].day+'%</span>')
else $(".tv-right-ul2 li").eq(0).html('日 <img src="images/top2.png" alt=""> <span style="color:#3FF4A7">'+data.result[5].day+'%</span>')
if(data.result[5].week>=0)$(".tv-right-ul2 li").eq(1).html('日 <img src="images/top1.png" alt=""> <span>'+data.result[5].week+'%</span>')
else $(".tv-right-ul2 li").eq(1).html('日 <img src="images/top2.png" alt=""> <span style="color:#3FF4A7">'+data.result[5].week+'%</span>')
if(data.result[5].month>=0)$(".tv-right-ul2 li").eq(2).html('日 <img src="images/top1.png" alt=""> <span>'+data.result[5].month+'%</span>')
else $(".tv-right-ul2 li").eq(2).html('日 <img src="images/top2.png" alt=""> <span style="color:#3FF4A7">'+data.result[5].month+'%</span>')
//付费金额
$(".tv-right-content span").text(data.result[3].num)
if(data.result[3].day>=0)$(".tv-right-ul3 li").eq(0).html('日 <img src="images/top1.png" alt=""> <span>'+data.result[3].day+'%</span>')
else $(".tv-right-ul3 li").eq(0).html('日 <img src="images/top2.png" alt=""> <span style="color:#3FF4A7">'+data.result[3].day+'%</span>')
if(data.result[3].week>=0)$(".tv-right-ul3 li").eq(1).html('日 <img src="images/top1.png" alt=""> <span>'+data.result[3].week+'%</span>')
else $(".tv-right-ul3 li").eq(1).html('日 <img src="images/top2.png" alt=""> <span style="color:#3FF4A7">'+data.result[3].week+'%</span>')
if(data.result[3].month>=0)$(".tv-right-ul3 li").eq(2).html('日 <img src="images/top1.png" alt=""> <span>'+data.result[3].month+'%</span>')
else $(".tv-right-ul3 li").eq(2).html('日 <img src="images/top2.png" alt=""> <span style="color:#3FF4A7">'+data.result[3].month+'%</span>')
}
})
}
dataGet()
setInterval(function() {
dataGet()
}, 8000);
$(".my-time").html(''+timeGet()[0]+'年'+timeGet()[1]+'月'+timeGet()[2]+'日 '+timeGet()[3]+':'+timeGet()[4]+'')
var betEnd = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 00, 00, 00).getTime();
var barNum=Math.floor(((new Date()-betEnd)/'86400000')*100)
$(".day-bar div").css("width",""+barNum+"%")
setInterval(function() {
$(".my-time").html(''+timeGet()[0]+'年'+timeGet()[1]+'月'+timeGet()[2]+'日 '+timeGet()[3]+':'+timeGet()[4]+'')
$(".day-bar div").css("width",""+barNum+"%")
}, 1000);
function timeGet(){
var time = new Date();
var y = time.getFullYear();
var m = time.getMonth()+1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
var timeArr=[y,m,d,add0(h),add0(mm),add0(s)]
return timeArr
}
function add0(m) {
return m < 10 ? '0' + m : m
}
</script>
</html>