Untitled
unknown
plain_text
2 years ago
5.0 kB
5
Indexable
<!DOCTYPE html> <html> <head> <title>MA Dashboard</title> <style type="text/css"> #button-wrapper { display: flex; } .button { padding: 10px; margin: 8px 0 8px 0; width: 75px; background-color: #3f7cf5; outline: none; color: white; font-weight: bold; font-size: 20px; border: none; cursor: pointer; } .circle-wrap { margin: 150px auto; width: 150px; height: 150px; background: #fefcff; border-radius: 50%; border: 1px solid #cdcbd0; } .circle-wrap .circle .mask, .circle-wrap .circle .fill { width: 150px; height: 150px; position: absolute; border-radius: 50%; } .mask .fill { clip: rect(0px, 75px, 150px, 0px); background-color: #227ded; } .circle-wrap .circle .mask { clip: rect(0px, 150px, 150px, 75px); } .mask.full, .circle .fill { /* animation: fill ease-in-out 3s; */ transform: rotate(0deg); } /*@keyframes fill{ 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } }*/ .circle-wrap .inside-circle { width: 122px; height: 122px; border-radius: 50%; background: #d2eaf1; line-height: 120px; text-align: center; margin-top: 14px; margin-left: 14px; color: #1e51dc; position: absolute; z-index: 100; font-weight: 700; font-size: 2em; } </style> </head> <body> <h1>MA Dashboard</h1> <div id="button-wrapper"> <button class="button" onclick="addMA()">+</button> <button class="button" onclick="subtractMA()">-</button> </div> <!-- <meter style="height:200px;" min="4" max="20" low="7" high="15" optimum="8" value="4"></meter> --> <!-- <div id="output">4 mA</div> --> <div class="circle-wrap"> <div class="circle"> <div class="mask full"> <div class="fill"></div> </div> <div class="mask half"> <div class="fill"></div> </div> <!----> <div class="inside-circle" id="output"> 4 mA </div> </div> </div> <script type="text/javascript"> //let mA, degreeTotal; let mA = 4; let span = 16; let degreeTotal = 180; let saveData = 0; //dataDegree = (mA-4)/span*degreeTotal; const outputText = document.getElementById("output"); const meterElem = document.querySelector('meter'); //const circularProgress = document.getElementById("elemen-meter"); const maskFull = document.querySelectorAll(".mask.full, .circle .fill"); //const circleFill = document.querySelector(".circle .fill"); function addMA() { if (mA < 20) { mA++; dataDegree = (mA-4)/span*degreeTotal; minus = dataDegree - dataDegree; //saveData = saveData + dataDegree; outputText.innerHTML = mA + " mA"; //maskFull.style.transform = ("rotate(" + dataDegree + "deg)"); [].forEach.call(maskFull, function(element) {element.style.transform = ("rotate(" + dataDegree + "deg)")}); //circleFill.style.transform = ("rotate(" + dataDegree + "deg)"); } } function subtractMA(){ if(mA > 4){ mA--; dataDegree = (mA-4)/span*degreeTotal; outputText.innerHTML = mA + " mA"; //maskFull.style.transform = ("rotate(" + dataDegree + "deg)"); [].forEach.call(maskFull, function(element) {element.style.transform = ("rotate(" + dataDegree + "deg)")}); //circleFill.style.transform = ("rotate(" + dataDegree + "deg)"); } } </script> </body> </html>
Editor is loading...