|
|
@@ -0,0 +1,67 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ .progress-border{
|
|
|
+ width: 600px;
|
|
|
+ height: 100px;
|
|
|
+ border:4px solid black;
|
|
|
+ border-radius: 10px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ }
|
|
|
+ .progress-bar{
|
|
|
+ width: 0;
|
|
|
+ height: 100px;
|
|
|
+ background-color: blue;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .progress-border .progress-num{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 50px;
|
|
|
+ z-index: 1;
|
|
|
+ font-size: 40px;
|
|
|
+ font-weight: bolder;
|
|
|
+ height: 100px;
|
|
|
+ line-height: 100px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="progress-content">
|
|
|
+ <div class="progress-border">
|
|
|
+ <div class="progress-num">0%</div>
|
|
|
+ <div class="progress-bar"></div>
|
|
|
+ </div>
|
|
|
+ <button id="btn">start</button>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ var oNum = document.getElementsByClassName("progress-num")[0];
|
|
|
+ var oBar = document.getElementsByClassName("progress-bar")[0];
|
|
|
+ var oBtn = document.getElementById("btn");
|
|
|
+ var i = 0;
|
|
|
+ var timer = null;
|
|
|
+ oBtn.onclick = function(){
|
|
|
+ // oBar.style.width = "10px";
|
|
|
+ timer = setInterval(function(){
|
|
|
+ // if(oBar.offsetWidth >= 600){
|
|
|
+
|
|
|
+ // }
|
|
|
+ if(i >= 100){
|
|
|
+ clearInterval(timer);
|
|
|
+ }else{
|
|
|
+ oBar.style.width = oBar.offsetWidth + 6 + "px";
|
|
|
+ oNum.innerText = ++i + "%";
|
|
|
+ }
|
|
|
+ },16);
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
