纯代码CSS动态绘画百分比扇形
2019-03-05 本文已影响0人
shyizne
先上效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="css/mui.min.css" rel="stylesheet" />
<style>
html,
body {}
.content {
display: block;
float: right;
margin-right: 10px;
color: rgb(102, 102, 102);
}
.title {
color: rgb(80, 80, 80);
font-weight: bold;
}
#title_text {
margin: 18px;
font-size: 28px;
}
#create_time {
margin-top: 0px;
margin-left: 18px;
color: #555555;
}
#username {
margin-left: 10px;
color: #0062CC;
}
#video-wrapper {
margin: 0 auto;
margin-top: 10px;
}
#contant_text {
margin: 0 auto;
margin-top: 20px;
width: 90%;
margin-left: 18px;
}
.baseDiv{
background-color: #FFFFFF;
width: 44vw;
height: 70vw;
display: inline-block;
margin-top: 20px;
margin-left: 4vw;
border-radius: 8px;
box-shadow:0 0 3px #ACACB4;
}
.imagediv{
/* background-color: #EC971F;
*/ width: 38vw;
height: 38vw;
/* margin: 3vw;
*//* background-color: #00BFFF;
*/ position:relative;
display:inline-block;
}
.textdiv{
/* background-color: #FFFF00;
*/ width: 40vw;
height: 5vw;
text-align: center;
margin-left: 2vw;
font-size: 15px;
display: inline-block;
}
.textdiv1{
/* background-color: #FFFF00;
*/ width: 40vw;
height: 5vw;
text-align: center;
margin-left: 2vw;
margin-top: -2vw;
font-size: 22px;
display: block;
}
.con {
position:relative;
display:inline-block;
margin: 3vw;
width: 38vw;
height: 38vw;
}
.percent-circle {
position:absolute;
height:100%;
background:#00BFFF;
overflow: hidden;
transition: all .5s ease;
}
.percent-circle-right {
right:0;
width:19vw;
border-radius: 0 19vw 19vw 0/0 19vw 19vw 0;
}
.percent-circle-right .right-content{
position: absolute;
content: '';
width: 100%;
height: 100%;
transform-origin:left center;
transform: rotate(0deg);
border-radius: 0 19vw 19vw 0/0 19vw 19vw 0;
background:#F7F7F7;
}
.percent-circle-left {
width:19vw;
border-radius: 19vw 0 0 19vw/19vw 0 0 19vw;
}
.percent-circle-left .left-content {
position: absolute;
content: '';
width: 100%;
height: 100%;
transform-origin:right center;
transform: rotate(0deg);
border-radius: 19vw 0 0 19vw/19vw 0 0 19vw;
background:#F7F7F7;
}
.text-circle {
position: absolute;
display:flex;
align-items: center;
justify-content: center;
height:80%;
width:80%;
left:10%;
top:10%;
border-radius:100%;
background:#FFFFFF;
color:#0062CC;
font-size: 40px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title" style="color: rgb(39, 171, 231);" id="title"></h1>
</header>
<div class="mui-content" id="contentAll">
<ul class="mui-table-view" id="list" style="height: 100vh;margin-top: -3px;background-color: #E8E8E8;">
</ul>
</div>
<script src="js/mui.min.js"></script>
<script>
mui.init();
document.addEventListener("plusready", onPlusReady, false);
function onPlusReady() {
baseURL = plus.storage.getItem("XCBaseURL");
userInfo = JSON.parse(plus.storage.getItem("userInfo"));
mui.ajax(baseURL+'GetRealTimeVideos', {
data: {
qyid: userInfo[0].Qyid,
userid: userInfo[0].ID,
jym: userInfo[0].jym
},
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function(data) {
plus.nativeUI.closeWaiting();
console.log("--"+data);
var companyData = JSON.parse(data);
if(companyData.result == 0) {
plus.nativeUI.toast(companyData.message);
return;
}
if(companyData.result == 1){
document.getElementById('title').innerText = "实时视频监测";
if(companyData.data.Videos.length==0){
plus.nativeUI.toast("本企业暂未安装摄像头监控！");
}
initListView(companyData.data.Videos);
}
},
error: function(xhr, type, errorThrown) {
plus.nativeUI.closeWaiting();
//异常处理；
plus.nativeUI.toast("网络异常,请稍后再试");
}
});
}
function initListView(data) {
var list = document.getElementById('list');
list.innerHTML = "";
for (var index =0;index<data.length;index++) {
var div = document.createElement('div');
div.id = index;
div.className = "baseDiv";
var div1 = document.createElement('div');
div1.className = "con";
div.appendChild(div1);
var divleftL = document.createElement('div');
divleftL.className = 'percent-circle percent-circle-left';
divleftL.id = index + 200;
div1.appendChild(divleftL);
var divleft = document.createElement('div');
divleft.className = 'left-content';
divleft.id = index + 100;
console.log("leftdiv="+divleft.id);
divleftL.appendChild(divleft);
var divrightL = document.createElement('div');
divrightL.className = 'percent-circle percent-circle-right';
divrightL.id = index + 2000;
div1.appendChild(divrightL);
var divright = document.createElement('div');
divright.className = 'right-content';
divright.id = index + 1000;
console.log("rightdiv="+divright.id);
divrightL.appendChild(divright);
var divtext = document.createElement("div");
divtext.className = 'text-circle';
divtext.id = index + 10000;
console.log("textdiv="+divtext.id);
div1.appendChild(divtext);
//浓度
var divnd = document.createElement('span');
divnd.className = "textdiv1";
div.appendChild(divnd);
divnd.innerText = "60%";
//地址
var div2 = document.createElement('span');
div2.className = "textdiv";
div.appendChild(div2);
div2.innerText = data[index].VideoDescription+"不起围墙外IE去玩叶倩文叶倩文";
//经度
var divjd = document.createElement('span');
divjd.className = "textdiv";
div.appendChild(divjd);
divjd.innerText = "经度：39.42";
//纬度
var divwd = document.createElement('span');
divwd.className = "textdiv";
div.appendChild(divwd);
divwd.innerText = "经度：123.23";
list.appendChild(div);
setPercent(0.6,index);
}
}
function setPercent(percentage,index) {
var leftContentId = index +100;
var rightContentId = index + 1000;
var textCircle = index + 10000;
var leftdivId = index + 200;
var rightdivId = index + 2000;
console.log("leftdiv="+leftContentId+",rightdiv="+rightContentId+",textdiv="+textCircle);
var leftContent = document.getElementById(leftContentId);
var rightContent = document.getElementById(rightContentId);
var textCircle = document.getElementById(textCircle);
var leftdiv = document.getElementById(leftdivId);
var rightdiv = document.getElementById(rightdivId);
var angle = percentage*360;
textCircle.innerHTML = percentage;
leftdiv.style.backgroundColor = "#CF2D28";
rightdiv.style.backgroundColor = "#CF2D28";
// leftdiv.style.backgroundColor = "#F0AD4E";
// rightdiv.style.backgroundColor = "#F0AD4E";
//
// leftdiv.style.backgroundColor = "#4CD964";
// rightdiv.style.backgroundColor = "#4CD964";
//
if (angle > 360) {
textCircle.innerHTML = "数据有误";
plus.nativeUI.toast("数据有误");
} else {
if (angle > 180) {
rightContent.setAttribute('style', 'transform: rotate(' + 180 + 'deg)');
leftContent.setAttribute('style', 'transform: rotate(' + (angle - 180) + 'deg)');
} else {
rightContent.setAttribute('style', 'transform: rotate(' + angle + 'deg)');
}
}
}
</script>
</body>
</html>
