进度条

最新推荐文章于 2024-06-16 15:09:53 发布

Maohei997

最新推荐文章于 2024-06-16 15:09:53 发布

阅读量313

点赞数 1

本文链接：https://blog.csdn.net/Maohei997/article/details/104738304

版权

我们常见页面上的进度条，当你这次进度到这里，下次打开网页还是显示进度到的部分。这是为什么呢？可能会有朋友不晓得是怎么做出来的。今天我们就来一起揭开它的神秘面纱。在这里插入图片描述

第一步在HTML > body部分写好基本结构并写好基本CSS样式

在这里插入图片描述

<style>
	#slider{width: 600px; height: 30px; border: 1px solid black; margin: 150px auto; position: relative;}
    #block{width: 20px; height: 30px; background-color: blue; position: absolute; left: 0px;}
    #full{width: 0px; height: 30px; background-color: orange; position: absolute; left: 0px; top: 0px;}
    #score{font-size: 20px;}

</style>
		<div id = 'slider'>				//最外面的主体带边框的DIV
            <div id = 'full'></div> 	//滚动多少后 填充的部分
            <div id = 'block'></div>   	//拖拽滚动的小方块
        </div>
        <span id = "score">0%</span>	//记录当前滚动到的百分数

第二步写好相应的JS部分

 <script src = 'cookie.js'></script>

 window.onload = function(){
                var oSlider = document.getElementById("slider");
                var oBlock = document.getElementById("block");
                var oFull = document.getElementById("full");
                var oScore = document.getElementById("score");

                //下一次，再加载这个页面的时候，需要重新加载
                var iCur = $cookie("slide") == null ? 0 : $cookie("slide");

                //重设百分比，和当前滑动位置
                oBlock.style.left = iCur + 'px';
                oFull.style.width = iCur + 'px';
                oScore.innerHTML = parseInt(iCur / 580 * 100) + "%";

                //可以实现的水平方向的拖拽
                //【要求】要能够记录上一次拖拽的位置

                oBlock.onmousedown = function(ev){
                    var e = ev || window.event;
                    //记录相对位置
                    var offsetX = e.clientX- oBlock.offsetLeft;

                    //实现mousemove
                    document.onmousemove = function(ev){
                        var e = ev || window.event;
                        var l = e.clientX - offsetX;
                        if(l <= 0){
                            l = 0;
                        }
                        if(l >= 580){
                            l = 580;
                        }
                        oBlock.style.left = l + 'px';
                        //填充部分，跟随滑块进行填充
                        oFull.style.width = l + 'px';
                        oScore.innerHTML = parseInt(l / 580 * 100) + "%";

                        //设置cookie进行存储
                        $cookie("slide", l, {
                            expires: 7
                        });
                    }
                }

                document.onmouseup = function(){
                    document.onmousemove = null;
                }
            }

这里说明一点：JS部分用到了一个新的概念，cookie本地缓存技术，很多地方都会用到它

简单看一下关于cookie.js的代码

//通过一个函数，将三个函数功能合体
function $cookie(name){
    //arguments
    switch(arguments.length){
        case 1:
            return getCookie(name); //获取cookie
            break;
        case 2:
            arguments[1] == null ? removeCookie(name) : setCookie(name, arguments[1], {});
            break;
        case 3:
            setCookie(name, arguments[1], arguments[2]);
            break;
        default:
            break;
    }
}


//设置cookie    expires 用户传入天数
function setCookie(name, value, {expires, path, domain, secure}){
    //1、拼接字符串
    var cookieStr = encodeURIComponent(name) + "=" + encodeURIComponent(value);
    //2、判断可选项是否存在
    if(expires){
        cookieStr += ";expires=" + afterOfDate(expires);
    }
    if(path){
        cookieStr += ";path=" + path;
    }
    if(domain){
        cookieStr += ";domain=" + domain;
    }
    if(secure){
        cookieStr += ";secure";
    }

    //3、将字符串设置cookie
    document.cookie = cookieStr;

}

//封装函数，获取n天后的时间
function afterOfDate(n){
    var d = new Date();
    var day = d.getDate();
    d.setDate(day + n);
    return d;
}





//通过传入name获取对应的值
function getCookie(name){
    var cookieStr = decodeURIComponent(document.cookie);
    //1、先去查找这个name第一次出现的位置
    var start = cookieStr.indexOf(name + "=");
    if(start == -1){
        return null;
    }else{
        //2、找结束的位置
        var end = cookieStr.indexOf(";", start);
        if(end == -1){
            end = cookieStr.length;
        }

        //通过start和end这两个部分，去提取对应的键值对
        var str = cookieStr.substring(start, end);
        var arr = str.split("=");
        return arr[1];
    }
}

//删除cookie
function removeCookie(name){
    document.cookie = encodeURIComponent(name) + "=;expires=" + new Date(0);
}