JS基础：进度条控制背景透明度

佚名 6年前 (2019-05-07) 随笔 2029人围观抢沙发百度已收录

HTML：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="box" id="box">
        <div class="middle">
            透明度：<input type="text" id="text" class="text">%
            <div class="xian" id="xian">
                <div class="yuan" id="yuan"></div>
                <div class="jindu" id="jindu"></div>
            </div>
        </div>
    </div>

    <script src="index.js"></script>
</body>
</html>

CSS：

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

body{
    margin:0;
    padding:0;
    color:rgb(255, 107, 107);
}
.box{
    width:100%;
    min-height:100vh;
    background:rgba(39, 60, 117, 1);
}
.middle{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height:100%;
    width:100%;
}
.text{
    width:60px;
    outline: none;
    border-radius: 15px;
    font-weight: 700;
    color:rgb(255, 107, 107);
}
.xian{
    position: relative;
    margin-left: 20px;
    height:4px;
    width:200px;
    background:#000;
    cursor: pointer;
}
.yuan{
    position: absolute;
    width:10px;
    height:20px;
    background:#4fc3e0;
    overflow: hidden;
    top:-7px;
    cursor: pointer;
}
.jindu{
    position: absolute;
    background:#4fc3e0;
    left:0;
    top:0;
    width:0;
    height:4px;
}

JS：

var text = document.getElementById("text");
var xian = document.getElementById("xian");
var yuan = document.getElementById("yuan");
var jindu = document.getElementById("jindu");
var box = document.getElementById("box");
var yuanLeft = 0;

//拖动进度条事件
yuan.onmousedown = function (event) {
    var event = event || window.event;
    var leftVal = event.clientX - this.offsetLeft;
    var that = this;

    document.onmousemove = function(event){
        var event = event || window.event;
        yuanLeft = event.clientX - leftVal; 

        if (yuanLeft < 0) {
            yuanLeft = 0;
        }else if (yuanLeft > xian.offsetWidth - yuan.offsetWidth) {
            yuanLeft = xian.offsetWidth - yuan.offsetWidth;
        }
        jindu.style.width = yuanLeft + 'px';
        that.style.left = yuanLeft + 'px';
        text.value = parseInt(yuanLeft/(xian.offsetWidth - yuan.offsetWidth) * 100);
        box.style.background = "rgba(39, 60, 117, "+ (1 - text.value *0.01) +")";
        //防止选择内容--当拖动鼠标过快时候，弹起鼠标，yuan也会移动，修复bug
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    }

}

//回车事件
document.onkeydown = keyDown;
function keyDown(event) {
    var event = event || window.event;
    var key=event.keyCode||event.which||event.charCode;

     if(key==0xD){
        if(text.value < 0 ){
            text.value = "";
            yuan.style.left = 0;
            jindu.style.width = 0 + 'px';
            box.style.background = "rgba(39, 60, 117, 1)";
            alert("请输入正确的数值！");
        }else if(text.value > 100){
            text.value = "";
            yuan.style.left = 0;
            jindu.style.width = 0 + 'px';
            box.style.background = "rgba(39, 60, 117, 1)";
            alert("请输入正确的数值！");
        }else{
            jindu.style.width = text.value * 2 + 'px';
            yuan.style.left = text.value * 2 + 'px';
            box.style.background = "rgba(39, 60, 117, "+ (1 - text.value *0.01) +")";
        }

    }
}

//点击进度条事件
xian.onmousedown = function(event){
    var event = event || window.event;
    left =  event.clientX - xian.offsetLeft;
    text.value = left / 2;
    jindu.style.width = left + 'px';
    yuan.style.left = left + 'px';
    box.style.background = "rgba(39, 60, 117, "+ (1 - text.value *0.01) +")";
}

//弹起鼠标不做任何操作
document.onmouseup = function(){
    document.onmousemove = null; 
}