progress和setInterval定时器实现简单的进度条

HTML5 新标签—进度条标签，可以在需要的时候用进度条让用户了解当前状态和提升满意度，后续会提供更多更好玩的进度条！
本文是只用纯原生DOM的来实现的进度条，当然如果您项目中引入Jquery，也可以用Jquery实现，下面是代码。
html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Progress</title>
</head>
<body>
<div style="position: relative">
    <progress value="0" max="100" id="pro"></progress>
    <span id="sp" style="color: orangered"></span>
</div>
</body>
</html>

js部分：

let proObj = document.getElementById('pro')
    const myTimer = setInterval(() => {
    
    
        if (proObj.value < 100) {
    
    
            proObj.value += 1
            const spanobj = document.getElementById("sp")
            spanobj.innerHTML = proObj.value + '%'
            // 参数3为 width/ max的值，这样就可以让百分比数字跟随进度条移动了
            spanobj.style.left = proObj.value * 3 + "px"
        } else {
    
    
            alert('进度100%，下载完成！') // 在完成后可进行后续操作
            clearInterval(myTimer)
        }
    }, 100)

css样式部分：

progress {
    
    
            width: 300px;
            height: 30px;
            color: #f00;
            background: #EFEFF4;
            border-radius: 0.5rem;
            position: absolute;
            left: 0;
            top: 0;
        }

        /* 1表示总长度背景色 */
        progress::-webkit-progress-bar {
    
    
            background-color: #f2f2f2;
            border-radius: 0.5rem;
        }

        /* 2表示已完成进度背景色 */
        progress::-webkit-progress-value {
    
    
            background: lawngreen;
            /*background-image: linear-gradient(to right, green , lawngreen);*/
            border-radius: 0.5rem;
        }

        #sp {
    
    
            position: absolute;
            left: 0;
            top: 0;
            line-height: 30px;
        }

实现的效果图：在这里插入图片描述

progress和setInterval定时器实现简单的进度条

猜你喜欢