<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>进度条</title> <style> .background_div { width: 65%; border: 1px solid lightgray; border-radius: 20px; height: 10px; margin-top: 2px; margin-left: 13%; } #bar { width: 1%; display: block; background: #14C9A5; float: left; border-radius: 20px; height: 100%; text-align: center; font-size: 0.6em; } </style> </head> <body οnlοad="go();"> <div class="background_div"> <strong id="bar"></strong> </div> <script> function $(obj) { return document.getElementById(obj); } function go() { let a = 1024; let b = 524; let result = Math.floor(b / a * 100); $("bar").style.width = result + "%"; $("bar").innerHTML = result + "%"; //当result大于50,进度条背景色换成红色,小于50为绿色 // if (result > 50) { // $("bar").style.background = "#FF5B5F"; // } } </script> </body> </html>
html js 进度条.html
最新推荐文章于 2024-08-02 18:20:19 发布