jQuery实现验证码控制按钮及图片放大功能分析

最新推荐文章于 2021-06-04 04:36:29 发布

多读书多看报！

最新推荐文章于 2021-06-04 04:36:29 发布

阅读量228

点赞数

分类专栏： JavaScript jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/shaxiaobai/article/details/115281348

版权

JavaScript 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

jQuery

16 篇文章 0 订阅

订阅专栏

本文分享了前端实现发送验证码按钮禁用功能的步骤，包括定时倒计时和后端图片切换的代码示例。通过jQuery操作DOM，展示了如何控制用户体验和元素交互。同时介绍了图片切换的逻辑，涉及CSS选择器和自定义属性的应用。

摘要由CSDN通过智能技术生成

下面分享两个小案例：

1、实现发送验证码控制按钮禁用

主要步骤及代码思路是，

添加点击按钮事件
按钮被禁用
替换按钮内的内容
每隔1s进行倒计时的变换
倒计时到0时，停止倒计时，按钮恢复发送
按钮内容更改，禁用取消

<body>
    <input type="text" id="txt">
    <input type="button" id="btn" value="发送">

    <script src="../jq/jquery-1.12.4.min.js"></script>
    <script>
        var $btn = $("#btn");

        $btn.click(function(){
            var n = 5;
            $(this).prop("disabled",true).val(n + "s 后重新发送")

            var timmer = setInterval(() => {
            //这里如果使用function的话，$(this)指向的是window，需要将$(this)指向btn，那就直接使用箭头含税即可
                n--;
                $(this).val(n + "s 后重新发送")
                if(n == 0){
                    $(this).prop("disabled",false).val("重新发送");
                    clearInterval(timmer);
                }
            },1000)
        })
    </script>
</body>

2、放大镜切换项

主要步骤及代码思路是，

首先要获取元素
给小图加上鼠标移上事件，切换类名
排他思想，切换类名，给图片的父级添加类名，父级的兄弟取消选中的样式的类名
更改中图和大图的路径
①提前存储好图片路径的前缀（方便后期进行更改路径什么的）
②关于大图、中图前缀后面的路径，存储在类小图img的自定义属性中，这样方便后期取路径
进行对应图片路径的设置

<style>
   *{
     margin: 0;
     padding: 0;
    }
   ul{
      list-style: none;
    }
   .leftbox{
       float: left;
       width: 400px;
    }
    .leftbox .top{
       width: 400px;
       border: 1px solid rgb(224, 224, 224);
    }
   .leftbox .tpo img{
      width: 400px;
    }
   .leftbox ul{
      width: 188px;
      margin: 10px auto;
    }
   .leftbox ul li{
      float: left;
      width: 54px;
      height: 54px;
      border: 1px solid rgb(255, 255, 255);
    }
    .leftbox ul li.current{
       border-color:  red;
     }
    .leftbox ul li + li{
       margin-left: 10px;
     }
     .rightbox{
        float: left;
        margin-left: 10px;
        width: 500px;
        height: 500px;
        border: 1px solid #eee;
        overflow: hidden;
     }      
</style>
  
<body>
   <div class="leftbox">
     <div class="top">
         <img src="img/m1.jpg" alt="">
   </div>
   <ul>
        <li class="current">
           <img src="img/s1.jpg" mrc="m1.jpg" brc="b1.jpg">
        </li>
        <li>
           <img src="img/s2.jpg" mrc="m2.jpg" brc="b2.jpg">
        </li>
        <li>
            <img src="img/s3.jpg" mrc="m3.jpg" brc="b3.jpg">
        </li>
    </ul>
</div>
  
 <div class="rightbox">
    <img src="img/b1.jpg" alt="">
 </div>
  
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
   //获取元素
   var $imgs = $(".leftbox ul li img");
   var $mimg = $(".leftbox .top img");
   var $bimg = $(".rightbox img");
   //添加鼠标移上事件
   $imgs.mouseenter(function(){
   // 1 排他思想，添加类名
             $(this).parent().addClass("current").siblings().removeClass("current");
   //2 更改中图、大图的路径
   // 获取路径
   var path = "img/"//图片路径前缀
   // 从小图的自定义属性中 获取路径
   var mrc = path + $(this).attr("mrc");
   var brc = path + $(this).attr("brc");
   // 设置路径
   $mimg.attr("src",mrc);
   $bimg.attr("src",brc);
})
</script>
</body>