您正在使用IPV4(54.161.98.96)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年74元      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 情人节 18
2022年 元宵节 19
2023年 元 旦 339
2022年 春 节 5
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    JavaScript实现滑块验证案例
    内容摘要: !DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'metahttp-equiv='X-UA-Compatible'content='IE=edge'metaname='viewport'content='width=device-width,initial-scale=1.0'titleDocument/titl......
    <!DOCTYPEhtml>

    <htmllang="en">

    <head>

    <metacharset="UTF-8">

    <metahttp-equiv="X-UA-Compatible"content="IE=edge">

    <metaname="viewport"content="width=device-width,initial-scale=1.0">

    <title>Document</title>

    <style>

    *{

    margin:0;

    padding:0;

    }

    .box{

    position:relative;

    width:500px;

    height:40px;

    border:1pxsolid#000;

    }

    p{

    position:relative;

    z-index:5;

    font:20px/40px'楷体';

    text-align:center;

    color:rgba(95,90,90,0.479);

    }

    .btn{

    width:40px;

    height:40px;

    border:1pxsolid#ccc;

    box-sizing:border-box;

    background-color:#fff;

    cursor:pointer;

    z-index:6;

    position:absolute;

    top:0;

    left:0;

    background-position:center;

    background-repeat:no-repeat;

    background-size:50%auto;

    background-image:url(./图1.png);

    }

    .bg{

    height:100%;

    position:absolute;

    top:0;

    left:0;

    background-color:#7ac23c;

    }

    </style>

    </head>

    <body>

    <divclass="box">

    <divclass="btn"></div>

    <p>拖动滑块验证</p>

    <divclass="bg"></div>

    </div>

    </body>

    <script>

    //获取事件

    varbox=document.querySelector('.box')

    varp=document.querySelector('p')

    varbtn=document.querySelector('.btn')

    varbg=document.querySelector('.bg')

    //选中文字就会触发这个事件

    this.box.onselectstart=function(){

    returnfalse//阻止默认行为

    }

    //默认没有验证成功

    varflag=false;

    //按下事件

    btn.onmousedown=function(){

    vare1=window.event;

    varx1=e1.offsetX;

    //移动事件

    btn.onmousemove=function(){

    vare2=window.event;

    varx2=e2.clientX

    //计算left的值

    varleft=x2-x1

    if(left>0){

    //设置滑动块的距离

    this.style.left=left+'px';

    //设置背景的宽度

    bg.style.width=left+'px';

    if(left>box.offsetWidth-this.offsetWidth){

    //验证成功

    flag=true;

    p.innerText='通过验证'

    p.style.color='#000'

    //事件清除

    this.onmousedown=null;

    this.onmousemove=null;

    }

    }

    }

    //鼠标松开

    btn.onmouseup=function(){

    //事件清除

    this.onmousemove=null;

    //判断验证是否成功

    if(flag){

    return

    }

    this.style.left=0;//设置滑动块的距离

    bg.style.width=0;//设置背景的宽度

    };

    }

    </script>

    </html>

    上一篇:Select列表左右内容交换的JS代码,支持同时多选 下一篇:JavaScript实现钟表案例
    发布日期:2022/1/13
    手机扫二维码直达本页
    发布时间:12:04:46
    点击:151
    录入:壹家怡园
    相关文章
    Baidu
    YiJiaCMS 6.1.0.10988 Build 21.12.28(MSSQL) 闽ICP备05000814号-1
    本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护

    Copyright©2000-2022