美文网首页
纯代码CSS动态绘画百分比扇形

纯代码CSS动态绘画百分比扇形

作者: shyizne | 来源:发表于2019-03-05 14:35 被阅读0次

    先上效果图

    <!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>

    相关文章

      网友评论

          本文标题:纯代码CSS动态绘画百分比扇形

          本文链接:https://www.haomeiwen.com/subject/nuanuqtx.html