HTML 进度条

效果截图:

Html页:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>进度条</title>
</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 class="progressBar" id="progressBar">
            <div class="barContent" id="barContent"></div>
        </div>
        <div class="bottomDisplay">
            <input type="button" class="cancelButton" value="CANCEL" />
            <span class="progress">
                <label id="progressShow">0%</label>
                <label>&nbsp;complete</label>
            </span>
        </div>
    </div>
</body>
</html>

css样式:

<style type="text/css">
        .systemUpdates {
            width:780px;
            height:200px;
            background:#eeeeee;
            padding-top:55px;
            padding-left: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: #00ff21;
            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:510px;
            font-size:10px;
        }
    </style>

JS逻辑:
<script type="text/javascript">
        //窗体加载
        window.onload = function () {
            testBegin(0);
        }
        //测试开始
        function testBegin(val) {
            var progressBar = document.getElementById("progressBar");
            var barContent = document.getElementById("barContent");
            var label = document.getElementById("progressShow");
            for (var i = val; i <= 100; i++) {
                barContent.style.width = progressBar.offsetWidth * (i / 100) + "px";
                label.innerText = ((i) + "%");
                window.setTimeout("testBegin(" + ++i + ")", 200)
                break;
            }
        }
    </script>

  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值