Js 百分比进度条

思索

发布于 2024-08-16 09:27:23

1.1K0

【构想】

　　　　　　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();
        }

第二种:

　　　　　　进入不下载,点击下载开始下载,暂停则暂停,原理控制setInterval和cleanInterval

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>进度条</title>
        <style type="text/css">
            #pro {
                width: 0px;
                height: 20px;
                background-color: #cea;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <button onclick="down()">下载</button>
        <button onclick="stop()">暂停</button>
        <br />
        <div id="pro"></div>
    </body>
    <script>
        var count = 0;
        var tid;

        function Progress() {
            count++;
            if (count == 101) {
                Fn();
            } else {
                var oPro = document.getElementById("pro")
                oPro.innerText = count + "%";
                oPro.style.width = 3 * count + "px";
            }
        }

        function down() {
            oStria = setInterval("Progress()", 100)
        }
        function stop(){
            clearInterval(oStria)
        }

        function Fn() {
            clearInterval(oStria)
            alert("下载完成")
        }
    </script>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-08-26，如有侵权请联系 cloudcommunity@tencent.com 删除

width