投稿
  1. 极客之音首页
  2. 技术随笔

下班进度条（ HTML 附源码

小半 • • 技术随笔 • 阅读 321

导读：本篇文章讲解 下班进度条（ HTML 附源码，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

在线demo :

http://www.longsong.xyz/time/xiaban

使用规则：

下班进度条（ HTML 附源码

左上角的是自己取得标题，我这边显示的是更新

右边的选择版本，第一个的时间是下午六点，点击之后

再点download开始进度 

 源代码

复制就能直接用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    body, div, p, ul ,li {
        padding: 0;
        margin: 0;
    }
    body {

        line-height: 1.8rem;

    }
    #drop-down {
        width: 350px;
    }
    #drop-down>p {
        width: 100%;
        background-color: #868383;
        color: white;
        text-align: center;
    }
    #drop-down>ul {
        display: none;
        background-color: #d3e2e5;
        color: white;
        list-style-type: none;
        text-align: center;
        box-shadow: 5px 5px 5px #6e6e6e;
    }
    #drop-down:hover ul {
        display: block;
    }
    .shen:hover {
         background-color: rgba(76, 201, 240, 1);
         -webkit-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
         -moz-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
         box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
         transition: all 0.5s ease-out 0s;
     }

</style>

    <style type="text/css">
        .systemUpdates {

            background:#eeeeee;
            padding-top:55px;
            padding-left:50px;
            padding-right:55px;
            padding-bottom:50px;
        }
        .newSystem {
        color:#5e5454;
            font-size:28px;
            font-weight:bold;
        }
        .tips {
        font-size:8px;
        }
        .progressBar {
        margin-top:30px;
            width:720px;
            height:8px;
            background:#ffffff;
            border-radius:5px;
        }
        .barContent {
        height: 8px;
            background: #a3d0ef;
            border-radius: 5px;
        }
        .bottomDisplay {
        width: 720px;
            height: 100px;
            margin-top: 18px;
        }
        .cancelButton {
        width: 110px;
            height: 40px;
            background: #ffffff;
            border: none;
            border-radius: 50px;
            font-weight: bold;
            outline: none;
        }
        .cancelButton:hover {
        color: white;
            background: #343238;
        }
        .progress {
        margin-left:500px;
            font-size:10px;
        }
    </style>

</head>
<body>
<div class="systemUpdates">
    <label class="newSystem">An up-to-date system is a healthy system</label><br>
    <label class="tips">please wait while system update searches for new updates for your system</label>
    <div id="drop-down" style="position: absolute ;right:40px">
        <p id = "haha">Download version</p>
        <ul>
<!--            //剩下的一些自己添加吧-->
            <div id="div" class = "shen">pygame‑2.1.2‑pypy38_pp73‑win_amd64.whl</div>
            <div id="div1" class = "shen">pygame‑2.1.2‑cp310‑win_amd64.whl</div>
            <div id="div2" class = "shen">pygame‑2.1.2‑cp310‑win32.whl</div>
            <div id="div3" class = "shen">pygame‑2.1.2‑cp39‑win_amd64.whl</div>
            <div id="div4">pygame‑2.1.2‑cp39‑win32.whl</div>
            <div id="div5">pygame‑2.1.2‑cp38‑win_amd64.whl</div>
            <div id="div6">pygame‑2.1.2‑cp38‑win32.whl</div>
            <div id="div7">pygame‑2.1.2‑cp37m‑win_amd64.whl</div>
            <div id="div8">pygame‑2.1.2‑cp37m‑win32.whl</div>
            <div id="div9">pygame‑2.0.3‑pypy38_pp73‑win_amd64.whl</div>
            <div id="div0">pygame‑2.0.3‑pypy37_pp73‑win_amd64.whl</div>

        </ul>
    </div>
    <div class="progressBar" id="progressBar">
        <div class="barContent" id="barContent"></div>
    </div>

    <div class="bottomDisplay">
        <input type="button" class="cancelButton" value="CANCEL" />
        <input type="button" onclick="startsss()"  class="cancelButton" value="DOWNLOAD" />
        <span class="progress">
                <label id="progressShow">0%complete</label>

            </span>
    </div>
    <textarea id="progressShows" style="width: 780px;height: 400px">
        C:\Program Files (x86)\Microsoft\EdgeUpdate\Download\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\99.0.1150.39
        C:\Windows\assembly\NativeImages_v2.0.50727_64\Microsoft.VisualBas#\eff0669314921f3ebfd4b8fb9ccf7f8e
    </textarea>
</div>
<script type="text/javascript">
    //窗体加载
    var flag = 0;
    var z = 17;
    var oDiv = document.getElementById("div");
    var haha = document.getElementById("haha");
    oDiv.onclick = function(){
        if(flag != 1){
            haha.innerText = "pygame‑2.1.2‑pypy38_pp73‑win_amd64.whl";
            flag = 1;
            z = z-0;
        }
    }
    function startsss() {
        var time = new Date();
        window.onload = function () {undefined
            testBegin(0);
        }
        var a = 59 - parseInt(time.getSeconds()); //获取当前时间(从1970.1.1开始的毫秒数)
        var b = 3600 * (z - parseInt(time.getHours())); //获取当前小时数(0-23)
        var c = 60 * (59 - parseInt(time.getMinutes()));
        var d = a + b + c;
        var x = 0;
        //测试开始
        setInterval(function(){undefined
            x++;
            var time = new Date();
            var progressBar = document.getElementById("progressBar");
            var barContent = document.getElementById("barContent");
            var label = document.getElementById("progressShow");
            var label1 = document.getElementById("progressShows");
            var e = 59 - parseInt(time.getSeconds()); //获取当前时间(从1970.1.1开始的毫秒数)
            var f = 3600 * (z - parseInt(time.getHours())); //获取当前小时数(0-23)
            var g = 60 * (59 - parseInt(time.getMinutes()));
            var t = e + f + g;


            barContent.style.width = progressBar.offsetWidth * ((d-t)/d) + "px";
            label.innerText = (Math.floor(((d-t)*100000/d))/1000 + "% complete");
            if(x%2==0)    //这里就是加载出来的假装下载的东西
                label1.innerText = ("C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.3+"+String(e)+"\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+"+
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+");
            else
                label1.innerText = (    "C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+"+
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+" +
                    "C:\\Program Files (x86)\\Microsoft\\EdgeUpdate\\Download\\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062}\\99.0.1150.39\n" +
                    "        C:\\Windows\\assembly\\NativeImages_v2.0.50727_64\\Microsoft.VisualBas#\\eff0669314921f3ebfd4b8fb9ccf7f8e\n+");

        },100)
    }

</script>

</body>
</html>

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/73529.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！