🍅 作者主頁：Java李楊勇
🍅 簡介：Java領域優質創作者🏆、Java李楊勇公號作者? 簡歷模板、學習資料、面試題庫、技識訓助【關注我，都給你】
🍅 歡迎點贊 👍 收藏 ?留言 📝
動圖演示： 文末獲取原始碼
代碼目錄：
主要代碼實作：
主頁HTML布局：
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/default.css"/>
<link rel="stylesheet" type="text/css" href="css/mobile.css"/>
<link rel='stylesheet' href='css/jquery-ui.css'>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,maximum-scale=1.0,user-scalable=no">
<title>大資料智慧能力 - 網路能力 </title>
</head>
<body>
<div id="wrapper">
<h1>大資料智慧能力 - 網路能力 </h1>
<h2><strong>重點關注</strong><sub>Focus on the indicators</sub><b class="logoline"></b><b class="logoline1"></b><b class="logoline2"></b><b class="logoline3"></b><b class="logoline4"></b></h2>
<!--時間區-->
<div class="date-timer">
<p>
<strong id="H"></strong>
<strong>:</strong>
<strong id="M"></strong>
<strong id="S" class="hide"></strong>
</p>
<em id="D"></em>
<ul>
<li id="Y"></li>
<li id="MH"></li>
<li id="TD"></li>
</ul>
</div>
<div class="big-index-1">
<ul>
<li>
<b class="animation-1"></b><b class="animation-2"></b><b class="animation-3"></b>
<p>VLR登記用戶數</p>
<strong>174.6069</strong>
</li>
<li>
<b class="animation-1"></b><b class="animation-2"></b><b class="animation-3"></b>
<p>VLR登記用戶數</p>
<strong>174.6069</strong>
</li>
<li>
<b class="animation-1"></b><b class="animation-2"></b><b class="animation-3"></b>
<p>VLR登記用戶數</p>
<strong>174.6069</strong>
</li>
<li>
<b class="animation-1"></b><b class="animation-2"></b><b class="animation-3"></b>
<p>VLR登記用戶數</p>
<strong>174.6069</strong>
</li>
<li>
<b class="animation-1"></b><b class="animation-2"></b><b class="animation-3"></b>
<p>VLR登記用戶數</p>
<strong>174.6069</strong>
</li>
<li>
<b class="animation-1"></b><b class="animation-2"></b><b class="animation-3"></b>
<p>VLR登記用戶數</p>
<strong>174.6069</strong>
</li>
</ul>
</div>
<div class="submenu">
<ul>
<li><a href="#this"><b>68</b><span>無線專業<em></em></span></a> </li>
<li><a href="#this" class="active"><b>69</b><span>交換專業<em></em></span></a> </li>
<li><a href="#this"><b>70</b><span>資料專業<em></em></span></a> </li>
<li><a href="#this"><b>71</b><span>輸出專業<em></em></span></a> </li>
</ul>
</div>
<div class="center-area">
<div class="pandect-area">
<h3>
<p>當前08時<sub>8 points</sub></p>
<strong>總覽</strong>
<em> 11時：29.742 Erl</em>
</h3>
<span class="pandect-area-left">
<b></b>
</span>
<div class="pandect-area-center">
<img src="images/charts.png" />
</div>
<span class="pandect-area-right">
<b></b>
</span>
</div>
<div class="details1-area">
<span class="detailsl-area-left"></span>
<div class="details1-area-center">
<h3>VLR登錄用戶數</h3>
<dl>
<dt>上月平均值</dt>
</ul>
448875
</dd>
<dt>昨日語音網路接通率</dt>
<dd>
<ul>
</dl>
<b></b>
</div>
<span class="detailsl-area-right"></span>
</div>
<div class="details2-area">
<span class="details2-area-left"></span>
<div class="details2-area-center">
<h3>A口話務量</h3>
<dl>
<dt>上月平均值</dt>
448875
</dd>
<dt>昨日語音網路接通率</dt>
<dt>今日語音網路接通率 </dt>
<dd>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="red"></li>
<li class="red"></li>
<li class="red"></li>
<li class="red"></li>
<li class="red"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
448875
</dd>
</dl>
<b></b>
</div>
<span class="details2-area-right"></span>
</div>
</div>
<div class="right-area">
<h3>語音網路接通率 <b></b></h3>
<div class="area-inbox-1">
<dl>
<dt>上月平均值</dt>
<dd class="font12"><span>76.525%</span><b></b></dd>
<dt class="ml-20">今日語音網路接通率</dt>
<dd class="font-red ml-20"><span>74.113%</span><b></b></dd>
<dt>今日語音網路接通率</dt>
<dd><span>68.113%</span><b></b></dd>
</dl>
<div class="round-1"></div>
<div class="round-2"></div>
<div class="round-3">30%</div>
<div class="round-4"></div>
</div>
<div class="area-inbox-2">
<ul>
<li><strong>12</strong>74.23%<b></b><em></em></li>
<li><strong>16</strong>71.19%<b></b><em></em></li>
<li><strong>18</strong>68.02%<b></b><em></em></li>
</ul>
<div class="area-text">
<b class="animation-line1"></b>
<h4>口徑說明：</h4>
<p class="text_container">
<script>var s = '（當日VLR登記用戶數、昨日VLR登記用戶數、上月平均值當日語音網路接通率、昨日語音網路接通'; var con = $('.text_container'); var index = 0; var length = s.length; var tId = null; function start(){ con.text(''); tId=setInterval(function(){ con.append(s.charAt(index)); if(index++ === length){ clearInterval(tId); index = 0; start() } },100); } start();</script>
</p>
<b class="animation-line2"></b>
</div>
</div>
</div>
<div class="time-base-outer">
<b class="line1"></b>
<div class="time-base">
<div class="slider2"></div>
<script src="js/jquery_and_jqueryui.js"></script>
<script src="js/index.js"></script>
</div>
<b class="line2"></b>
</div>
</div>
</body>
</html>
CSS樣式：
@import url('http://fonts.googleapis.com/css?family=Bitter:400,700,400italic');
/* ui slider pips */
.ui-slider-horizontal.ui-slider-pips {
margin-bottom: 2.8em;
}
.ui-slider-pips .ui-slider-number,
.ui-slider-pips .ui-slider-pip-hide {
display: none;
}
.ui-slider-pips .ui-slider-pip-number .ui-slider-number {
display: block;
}
.ui-slider-pips .ui-slider-pip {
width: 2em;
height: 1em;
line-height: 1em;
position: absolute;
font-size: 0.8em;
color: #999;
overflow: visible;
text-align: center;
top: 20px;
left: 20px;
margin-left: -1em;
cursor: pointer;
}
.ui-slider-pips .ui-slider-line {
background: #999;
width: 1px;
height: 3px;
position: absolute;
left: 50%;
}
.ui-slider-pips .ui-slider-number {
position: absolute;
top: 5px;
left: 50%;
margin-left: -1em;
width: 2em;
}
.ui-slider-pip:hover .ui-slider-number {
color: white;
font-weight: bold;
}
.ui-slider-vertical.ui-slider-pips {
margin-bottom: 0;
margin-right: 2em;
}
.ui-slider-vertical.ui-slider-pips .ui-slider-pip {
text-align: left;
top: 20px;
left: 20px;
margin-left: 0;
margin-top: -0.5em;
}
.ui-slider-vertical.ui-slider-pips .ui-slider-line {
width: 3px;
height: 1px;
position: absolute;
top: 50%;
left: 0;
}
.ui-slider-vertical.ui-slider-pips .ui-slider-number {
top: 50%;
left: 0.5em;
margin-left: 0;
margin-top: -0.5em;
width: 2em;
}
.ui-slider-vertical.ui-slider-pip:hover .ui-slider-number {
color: white;
font-weight: bold;
}
.ui-slider-float .ui-slider-tip,
.ui-slider-float .ui-slider-tip-number {
position: absolute;
visibility: hidden;
top: -40px;
display: block;
width: 34px;
margin-left: -17px;
left: 50%;
height: 20px;
line-height: 20px;
background: white;
border-radius: 3px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
text-align: center;
font-size: 12px;
opacity: -1;
transition: all 0.4s ease;
color: #333;
}
.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-number {
opacity: 0.9;
top: -30px;
color: #333;
visibility: visible;
}
.ui-slider-float .ui-slider-pip .ui-slider-tip-number {
top: 15px;
}
.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-number {
top: 5px;
font-weight: normal;
}
.ui-slider-float .ui-slider-tip:after,
.ui-slider-float .ui-slider-pip .ui-slider-tip-number:after {
content: " ";
width: 0;
height: 0;
border: 5px solid rgba(255, 255, 255, 0);
border-top-color: #ffffff;
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -5px;
}
.ui-slider-float .ui-slider-pip .ui-slider-tip-number:after {
border: 5px solid rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
top: -10px;
}
/* ------------------------- */
/* demo stuff */
body {
font-family: 'bitter';
padding: 20px 50px;
text-align: center;
background: url('http://wallpaperswa.com/thumbnails/detail/20120313/abstract%20blue%20lights%20orange%20bokeh%20gaussian%20blur%201920x1200%20wallpaper_www.wallpaperhi.com_43.jpg');
background-size: cover;
color: white;
}
h1,
h3 {
margin: 0 0 10px ;
}
h3 {
font-weight: 200;
margin-bottom: 10px;
}
h4 {
font-weight: 300;
font-style: italic;
color: black;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.7);
display: inline-block;
border-radius: 4px;
}
a {
color: #2cafe3;
}
.wrapper {
padding: 40px 40px 0;
border: 1px dotted rgba(200, 200, 255, 0.6);
background: rgba(0, 10, 20, 0.7);
border-radius: 10px;
}
.ui-slider {
box-shadow: inset 0 2px 1px #aaa;
border-color: #000;
}
.ui-slider-horizontal {
height: 10px;
background: #ddd;
}
上面的圖片檔案以及js檔案等需要引入進來
原始碼獲取
大家點贊、收藏、關注、評論啦 、查看👇🏻👇🏻👇🏻微信公眾號獲取👇🏻👇🏻👇🏻
打卡 文章 更新 58/ 100天
專欄推薦閱讀：
ECharts+HTML5大資料模板《100套》
HTML5大作業實戰案例《100套》
Java畢設專案精品實戰案例《100套》
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/301467.html
標籤：其他
下一篇：hive SQL