Js 百分比进度条

匿名 (未验证) 提交于 2019-12-02 21:53:52

【构想】

      CSS3 + JS

      CSS3控制进度

        利用CSS3中的 @keyframes

      JS实现百分比

        根据CSS来调整,时间

【页面代码】

  

  CSS代码

  

body {         background-color: #f5f7f9;         color: #6c6c6c;         font: 300 1em/1.5em;     }      .container {         left: 50%;         position: absolute;         top: 40%;         transform: translate(-50%, -50%);         -webkit-transform: translate(-50%, -50%);     }     /* PROGRESS */      .progress {         background-color: #e5e9eb;         height: 0.25em;         position: relative;         width: 24em;     }      #progress-bar {         animation-duration: 3s;         animation-name: width;         background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);         background-image: -webkit-linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);         background-size: 24em 0.25em;         height: 100%;         position: relative;     }      @keyframes width {         0%,         100% {             transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);         }         0% {             width: 0;         }         100% {             width: 100%;         }     }      .container .notice {         animation: change 5s linear 0s infinite;         font-size: 15px;         margin: 10px;     }      @keyframes change {         0% {             color: #4cd964;         }         25% {             color: #5ac8fa;         }         50% {             color: #007aff;         }         75% {             color: #5856d6;         }         100% {             color: #ff2d55;         }     }

 

  HTML代码

 

<div class="container">         <div class="notice"id="notice">             奴家,正在~客官不要急啦~(づ ̄ 3 ̄)づ         </div>         <div class="progress">             <div id="progress-bar">             </div>         </div>   </div>

 

   JS代码

  window.onload = function() {             var progressBar = {                 //初始化                 init: function() {                     var oBar = document.getElementById('progress-bar');                     var oNotice = document.getElementById('notice');                     var count = 0;                     //百分比计算,根据css的来                     var timer = setInterval(function() {                         count++;                         oBar.innerHTML = count + '%';                         if (count === 100) {                             oNotice.innerHTML =                              clearInterval(timer);                         }                     }, 30);                 }             };             progressBar.init();         }

 

转载请标明出处:Js 百分比进度条
文章来源: Js 百分比进度条
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!