Js 百分比進度條

標籤：relative   col   animation   初始   position   bar   進度   inner   change   

【構想】

　　　　　　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 百分比進度條