Border scale display percentage
Border scale display percentage
can I use canvas? I have a plug-in
this is the same as the circular progress bar, except that the border-radius is smaller.
write it casually, and realize the principle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rect Percent</title>
<style type="text/css">
.cp {position:relative;width:100px;height:100px;border-radius:10px;box-shadow:0 0 2px 0 -sharp000;overflow:hidden;}
.cp .half-bg {position:absolute;width:50px;height:100px;background-color:-sharpFFC300;box-sizing:border-box;overflow:hidden;}
.cp .half-bg-l {left:0;}
.cp .half-bg-r {left:50px;}
.cp .half-bg .half {width:200%;height:200%;margin-top:-100%;background-color:-sharpCCC;}
.cp .half-bg .half-l {margin-left:-100%;transform-origin:right center;transform:rotate(0deg);}
.cp .half-bg .half-r {transform-origin:left center;transform:rotate(60deg);}
.cp .num {position:absolute;top:10px;left:10px;width:80px;height:80px;font-family:Consolas, monospace;text-align:center;line-height:80px;border-radius:10px;background-color:rgba(255,255,255,0.9);}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
let domCp = document.querySelector('.cp');
function update()
{
let percent = parseInt(domCp.getAttribute('data-percent'), 10);
if(isNaN(percent) === true || percent > 100)
percent = 0;
console.log(percent);
if(percent < 50)
{
domCp.querySelector('.half-r').style.transform = 'rotate('+(percent/50 * 180)+'deg)';
domCp.querySelector('.half-l').style.transform = 'rotate(0deg)';
}
else
{
domCp.querySelector('.half-r').style.transform = 'rotate(180deg)';
domCp.querySelector('.half-l').style.transform = 'rotate('+(((percent-50)/50 * 180))+'deg)';
}
domCp.querySelector('.num').innerHTML = percent + '%';
domCp.setAttribute('data-percent', percent+1);
setTimeout(update, 100);
}
setTimeout(update, 10);
});
</script>
</head>
<body>
<div class="cp" data-percent="0">
<div class="half-bg half-bg-l">
<div class="half half-l"></div>
</div>
<div class="half-bg half-bg-r">
<div class="half half-r"></div>
</div>
<div class="num">60%</div>
</div>
</body>
</html> 
Previous: Can webpack extract common styles? Using webpak4
Next: About vue component scope style penetrating writing >, how to solve this compilation error problem?
o ...
the onclick (), that clicks the arrow wants to call oil.prototype.createChart=function (oilRealtable,objId,meteId) {}, Please let me know ...
I use electron to package my parking program. linuxwindowscpu windows ...
although there is no pc page written on the mobile phone page, why is there so much blank space? there is nothing . https: mamba-working.github. preview address is here ...
as shown in the figure, add a click event to the three microphone buttons on the right. Previously, you can add a click event to each button, but now you want to add it in the way of event delegation, how to achieve it? The code is as follows: <...
superagent .get( http: passport.chinahr.com ajax m existLoginName ) .query( input + "=" + 15800000000) .end(function (err, response) { console.log( , response.body, err) }); request .get( http: passport.chinah...
I follow the demo code provided by i18next const i18next = require( i18next ); const i18m = require( koa-i18next-middleware ); add custom detector. i18m.LanguageDetector.addDetector({ name: mySessionDetector , lookup(ctx, options)...
the px2rem plug-in is used in vue, and then the picture or icon will be blurred when flexbile, adapts to a specific model. How to deal with this situation ...
recently do a react project, the first contact, there is a left slip event, I would like to ask how to add left slip event for react. The end result is a sideslip deletion. If there is any great god who knows, give me some guidance. Thank you, urgent ...
the data in the score section of ...
on the above plug-in, in order to graphically count, from the big circle, jump to how many small circles, is similar to the timeline plug-in, but this is from one, pointing to multiple branches, the timeline is a back row want to search for a plug...
where can I upload the video, and then take the outer link and put it on the video tag, preferably without advertising? is now uploaded to Qiniu, but the video cache is too slow (because you are using the test domain name), so ask if there are other pla...
recently, there is a project that needs to do an app scan to identify the ID card, which requires that after the first picture is taken, the image is compressed by an asynchronous thread, and then api, is called to be identified by the background ocr and...
var arr = []; arr.toString = = Object.prototype.toString false ...
how does the scroll bar beautification component of element ui set the scroll bar to display one by one? The data update scroll bar becomes? ...
h5 technology achieves this effect. It feels like c3 or jq can be done completely, but the sliding event is not very good. Is there any good way to feel that there will be bug, without using the ui framework? ...
defines a value in the setInterval () method so that x-= 1; secondLength = 60; setInterval(function(){ console.log(secondLength); secondLength -= 1; setDefault(secondtx,secondLength) },1000); looks like this. It is correct in t...
question: in an h5 mobile page, has such a parent-child relationship: sliding elements up and down = > left and right sliding elements = > Click elements if there are sliding up and down (drop-down refresh), left and right sliding (rotation switch...
these data are all sent from the background STATUS 0 indicates auditing STATUS 1 indicates normal STATUS 2 indicates locked status but now I don t know how to change it to Chinese, how to do it? <tr v-for="(item,index) in infoData&quo...
bootstrap-table rendering table, specify the width of the column, more than the width of the ellipsis display, require the mouse up to be similar to title to display the whole content? The rendering table code is as follows ...