欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript+html实现前端页面滑动验证(2)

程序员文章站 2022-07-03 17:31:09
本文实例为大家分享了炫酷的前端页面滑动验证的具体代码,供大家参考,具体内容如下分享炫酷的前端页面滑动验证前面已经发过,这里再发一种,只是特效不一样还是直接上代码:<%@ page content...

本文实例为大家分享了炫酷的前端页面滑动验证的具体代码,供大家参考,具体内容如下

分享炫酷的前端页面滑动验证

前面已经发过,这里再发一种,只是特效不一样

还是直接上代码:

<%@ page contenttype="text/html;charset=utf-8" language="java" %>
<html>
<head>
    <title>title</title>
    <style>
        /* 滑动控件容器,灰色背景 */
        #dragcontainer {
            position: relative;
            display: inline-block;
            background: #e8e8e8;
            width: 300px;
            height: 33px;
            border: 2px solid #e8e8e8;
        }
        /* 滑块左边部分,绿色背景 */
        #dragbg {
            position: absolute;
            background-color: #7ac23c;
            width: 0px;
            height: 100%;
        }
        /* 滑动验证容器文本 */
        #dragtext {
            position: absolute;
            width: 100%;
            height: 100%;
            /* 文字水平居中 */
            text-align: center;
            /* 文字垂直居中,这里不能用百分比,因为百分比是相对原始line-height的,而非div高度 */
            line-height: 33px;
            /* 文本不允许选中 */
            user-select: none;
            -webkit-user-select: none;
        }
        /* 滑块 */
        #draghandler {
            position: absolute;
            width: 40px;
            height: 100%;
            cursor: move;
        }
        /* 滑块初始背景 */
        .draghandlerbg {
            background: #fff no-repeat center url("data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaa3hpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduuns1jmdixidc5lje1ntc3miwgmjaxnc8wms8xmy0xoto0ndowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wtu09imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9tbs8iihhtbg5zonn0umvmpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljavc1r5cguvumvzb3vyy2vszwyjiib4bwxuczp4bxa9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc8iihhtce1nok9yawdpbmfsrg9jdw1lbnrjrd0ieg1wlmrpzdo0zdhlnwy5my05nmi0ltrlnwqtogfjyi03zty4ogyymtu2ztyiihhtce1nokrvy3vtzw50suq9inhtcc5kawq6nteyntvemurgmkvfmtffnei5ndbcmjq2m0exmdq1ouyiihhtce1nokluc3rhbmnlsuq9inhtcc5pawq6nteyntvemungmkvfmtffnei5ndbcmjq2m0exmdq1ouyiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wiendidiwmtqgke1hy2ludg9zackipia8eg1wtu06rgvyaxzlzezyb20gc3rszwy6aw5zdgfuy2vjrd0ieg1wlmlpzdo2mtc5nznmzs02otqxltqyotytytiwni02ndi2ytnkowu5ymuiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ngq4ztvmotmtotzinc00ztvklthhy2itn2u2odhmmje1nmu2ii8+idwvcmrmokrlc2nyaxb0aw9upia8l3jkzjpsrey+idwvedp4bxbtzxrhpia8p3hwywnrzxqgzw5kpsjyij8+yirg4aaaalfjrefuenpi/p//pwmlgimbqka9a+bonfsiiboxkcinh+ycacdubyoswaiopxwjciacfegbqz1avbsis5otk/8tkmnejwwgqiugtquijwaxuf3yx3xygieiflwhpkyawb+i1xgswxuligf9a7mqkbwtlhbxaflhgpgqeactkmncu6al9d8wii4hovk3itkwjaxwumloogqhmse45viq2kubuasoyc4wf+ouyxz6mqkgwaan9mirurecxgaaaabjru5erkjggg==");
        }
        /* 验证成功时的滑块背景 有√*/
        .draghandlerokbg {
            background: #fff no-repeat center url("data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaa3hpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduuns1jmdixidc5lje1ntc3miwgmjaxnc8wms8xmy0xoto0ndowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wtu09imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9tbs8iihhtbg5zonn0umvmpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljavc1r5cguvumvzb3vyy2vszwyjiib4bwxuczp4bxa9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc8iihhtce1nok9yawdpbmfsrg9jdw1lbnrjrd0ieg1wlmrpzdo0zdhlnwy5my05nmi0ltrlnwqtogfjyi03zty4ogyymtu2ztyiihhtce1nokrvy3vtzw50suq9inhtcc5kawq6ndlbrdi3njvgmkq2mtffnei5ndbcmjq2m0exmdq1ouyiihhtce1nokluc3rhbmnlsuq9inhtcc5pawq6ndlbrdi3njrgmkq2mtffnei5ndbcmjq2m0exmdq1ouyiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wiendidiwmtqgke1hy2ludg9zackipia8eg1wtu06rgvyaxzlzezyb20gc3rszwy6aw5zdgfuy2vjrd0ieg1wlmlpzdphnwezmwnhmc1hymviltqxnwetytewzs04y2u5nzrln2q4yteiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ngq4ztvmotmtotzinc00ztvklthhy2itn2u2odhmmje1nmu2ii8+idwvcmrmokrlc2nyaxb0aw9upia8l3jkzjpsrey+idwvedp4bxbtzxrhpia8p3hwywnrzxqgzw5kpsjyij8+k+shwwaaaszjrefuenpi/p//pwmykd8uzw+kuodyeyglomivghg/em/pthx0efk9i8waoez+idupiimy8in1qjwenogj3aco5gnabmbahlgaxa4gq5igannj0mwavtsx7ikyy7l2unujaf+amamj78aedtbiwgyg5gbifcsxfczoabmcy4a4gojnh0d6dpk4ixnsvihafsdoaelrajrjgjp/awpbhmhejiqnwyrmuznq4vqgdqqxk0ia/0i17wjipmqntnbeagmlqiwiqa2vgww7qppbekgxsajiieusbnnsbdweay9mefgmmgbk00e0izta7ahectdq58mrua6wllggfmompig1qfegwaixgzo8guhiysmwqgsazgwhaezhicizoabkjkqym0caaqdgx279jf50aaaaaabjru5erkjggg==");
        }
    </style>
</head>
<body>
        <div id="dragcontainer"><!-- 容器初始背景 -->
            <div id="dragbg"></div><!-- 绿色背景 -->
            <div id="dragtext"></div><!-- 滑动容器文本 -->
            <div id="draghandler" class="draghandlerbg"></div>
        </div> <!--    滑块         滑块初始背景 -->
</body>

<script>
    //加载(事件会在页面加载完成后触发)
    window.onload = function() {
        //获取滑动控件容器,灰色背景
        var dragcontainer = document.getelementbyid("dragcontainer");
        //获取滑块左边部分,绿色背景
        var dragbg = document.getelementbyid("dragbg");
        //获取滑动验证容器文本
        var dragtext = document.getelementbyid("dragtext");
        //获取滑块
        var draghandler = document.getelementbyid("draghandler");

        //滑块的最大偏移量                 =     滑动验证容器文本长度                  -      滑块长度
        var maxhandleroffset = dragcontainer.clientwidth - draghandler.clientwidth;
        //是否验证成功的标记
        var isvertifysucc = false;

        initdrag();

        function initdrag() {
            //在滑动验证容器文本写入“拖动滑块验证”
            dragtext.textcontent = "拖动滑块验证";
            //给滑块添加鼠标按下监听
            draghandler.addeventlistener("mousedown", ondraghandlermousedown);
        }

        //选中滑块
        function ondraghandlermousedown() {
            //鼠标移动监听
            document.addeventlistener("mousemove", ondraghandlermousemove);
            //鼠标松开监听
            document.addeventlistener("mouseup",  ondraghandlermouseup);
        }

        //滑块移动
        function ondraghandlermousemove() {
            /*
            html元素不存在width属性,只有clientwidth
            offsetx是相对当前元素的,clientx和pagex是相对其父元素的
            */
            //滑块移动量
            var left = event.clientx - draghandler.clientwidth / 2;
            //
            if(left < 0) {
                left = 0;
                //如果滑块移动量   > 滑块的最大偏移量 ,则调用验证成功函数
            } else if(left > maxhandleroffset) {
                left = maxhandleroffset;
                verifysucc();
            }
            //滑块移动量
            draghandler.style.left = left + "px";
            //绿色背景的长度
            dragbg.style.width = draghandler.style.left;
        }

        //松开滑块函数
        function ondraghandlermouseup() {
            //移除鼠标移动监听
            document.removeeventlistener("mousemove", ondraghandlermousemove);
            //移除鼠标松开监听
            document.removeeventlistener("mouseup", ondraghandlermouseup);
            //初始化滑块移动量
            draghandler.style.left = 0;
            //初始化绿色背景
            dragbg.style.width = 0;
        }

        //验证成功
        function verifysucc() {
            //成功标记,不可回弹
            isvertifysucc = false;
            //容器文本的文字改为白色“验证通过”字体
            dragtext.textcontent = "验证通过";
            dragtext.style.color = "white";
            //验证通过的滑块背景
            draghandler.setattribute("class", "draghandlerokbg");
            //移除鼠标按下监听
            draghandler.removeeventlistener("mousedown", ondraghandlermousedown);
            //移除 鼠标移动监听
            document.removeeventlistener("mousemove", ondraghandlermousemove);
            //移除鼠标松开监听
            document.removeeventlistener("mouseup", ondraghandlermouseup);
            // 匹配成功以后写入你要跳转的页面
            //window.location.href="成功页面.html" rel="external nofollow" ;
        };
    }
</script>
</html>

效果如下

JavaScript+html实现前端页面滑动验证(2)

JavaScript+html实现前端页面滑动验证(2)

JavaScript+html实现前端页面滑动验证(2)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关标签: js 滑动 验证