js学习进度条

 

 鼠标可以拖动紫色区域来实现滑动，同时通过localStorage来实现记录上次所在位置，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        #main{margin: 100px auto;width: 500px;height: 20px;border: 1px solid red;position: relative;}
        #black{width: 40px;height: 100%;background-color: purple;position: absolute;left:0px;top: 0px;}
        #full{width: 0px;height: 100%;background-color: bisque;position: absolute;left: 0px;top: 0px;}
    </style>
    <script>
        window.onload = function(){
            var full = document.getElementById("full");
            var main = document.getElementById("main");
            var black = document.getElementById("black");
            if(!window.localStorage){
                alert("a");
            }else{
                var l = localStorage.getItem("len")?localStorage.getItem("len"):0;
                black.style.left=l+'px';
                full.style.width=l+'px';
            }
            black.onmousedown = function(ev){
                var offset = ev.clientX-black.offsetLeft;
                document.onmousemove = function(ev){
                    var l = ev.clientX-offset;
                    if(l<0){
                        l=0;            
                    }else if(l>460){
                        l=460;
                    }
                    black.style.left=l+'px';
                    full.style.width=l+'px';
                    if(!window.localStorage){
                        alert("a");
                    }else{
                        localStorage.len=l;
                    }
                }
            }
            document.onmouseup = function(){
                document.onmousemove=null;
            }
        }
    </script>
</head>
<body>
    <!-- 有记忆功能的进度条 -->
    <div id="main">
        <div id="full"></div>
        <div id="black"></div>
    </div>
</body>
</html>

　　

posted @ 2021-09-09 15:16  心懒了♀麻木来了  阅读(44)  评论(0)    收藏  举报