经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 软件/图像 » SVG » 查看文章
JS SVG获取验证码的玩法示例
来源：jb51　　时间：2022/7/25 19:15:43　　对本文有异议

介绍

之前在抖音上看的某个脑洞大开的产品设想的几种别具特色的后端看了抓狂前端看了想打人的阴间交互效果，其中一个脑洞是让用户拉一下拉杆如同抽奖的形式获取到验证码，本期就咱们就还原出这个交互效果看看它到底有多疯狂。

演示

效果就是这样喵~

Markup

  1. <div id="app">
  2.   <div class="code-dialog">
  3.     <h5>获取验证码</h5>
  4.     <p>请您拉动或点击拉杆，验证码即可出现哦~</p>
  5.     <div class="code-content">
  6.       <ul class="code-list">
  7.         <li></li>
  8.         <li></li>
  9.         <li></li>
  10.         <li></li>
  11.       </ul>
  12.       <div class="submit-btn">
  13.         <div class="btn-ball"></div>
  14.         <div class="btn-rod"></div>
  15.         <div class="btn-stand"></div>
  16.       </div>
  17.     </div>
  18.     <div class="code-btns">
  19.       <div>取消</div>
  20.       <div>提交</div>
  21.     </div>
  22.   </div>
  23. </div>

style

  1. @import url("https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap");
  2. * {
  3.   -webkit-tap-highlight-color: transparent !important;
  4. }
  5. #app{
  6.   width:100%;
  7.   height: 100vh;
  8.   position: relative;
  9.   overflow: hidden;
  10.   background-color: #fff3ef;
  11.   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%23ed5c5c' fill-opacity='0.4' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E");
  12. }
  13. .code-dialog{
  14.   width:360px;
  15.   height:220px;
  16.   background:#ffffff;
  17.   position:absolute;
  18.   top: 50%;
  19.   left: 50%;
  20.   transform: translate(-50%,-50%);
  21.   border-radius: 10px;
  22.   box-shadow: 1px 1px 8px rgba(0,0,0,.3);
  23.   box-sizing: border-box;
  24.   padding: 15px 20px 42px;
  25.   h5{
  26.     text-align: center;
  27.     font-size:16px;
  28.     color:#333333;
  29.     font-weight: 700;
  30.     letter-spacing: .1px;
  31.   }
  32.   p{
  33.     font-size: 14px;
  34.     color: #999999;
  35.     margin: 15px 0 20px;
  36.     line-height: 1.3;
  37.     letter-spacing: .6px;
  38.   }
  39.   .code-btns{
  40.     position: absolute;
  41.     bottom: 0;
  42.     left: 0;
  43.     width:100%;
  44.     display: flex;
  45.     align-items: center;
  46.     border-top: 1px solid #f2f2f2;
  47.     height: 42px;
  48.     &>div{
  49.       flex: 1;
  50.       font-size: 14px;
  51.       color: #999999;
  52.       height: 100%;
  53.       justify-content: center;
  54.       display: flex;
  55.       align-items: center;
  56.       cursor: pointer;
  57.       &:last-of-type{
  58.         color: rgb(102, 168, 255);
  59.         border-left: 1px solid #f2f2f2;
  60.       }
  61.     }
  62.   }
  63.   .code-content{
  64.       display: flex;
  65.       align-items:center;
  66.       box-sizing: border-box;
  67.       margin-top: 15px;
  68.       ul{
  69.         display: flex;
  70.         align-items: center;
  71.         li{
  72.           width:45px;
  73.           height:60px;
  74.           position: relative;
  75.           background-color: #ddd;
  76.           border-radius: 3px;
  77.           overflow: hidden;
  78.           background-repeat: repeat-y;
  79.           background-size:100% auto;
  80.           background-position-y:0px;
  81.           &:not(:last-of-type){
  82.             margin-right: 12px;
  83.           }
  84.         }
  85.       }
  86.       .submit-btn{
  87.         width: 70px;
  88.         height: 70px;
  89.         margin-left: 21px;
  90.         top: -10px;
  91.         display: flex;
  92.         align-items: center;
  93.         justify-content: center;
  94.         position:relative;
  95.         .btn-stand{
  96.           width:36px;
  97.           height:36px;
  98.           background:#333333;
  99.           border-radius: 50%;
  100.           box-shadow: 0 6px #666666;
  101.           position:absolute;
  102.           bottom:0;
  103.         }
  104.         .btn-ball{
  105.           position: absolute;
  106.           width:20px;
  107.           height: 20px;
  108.           border-radius: 50%;
  109.           background-color: #e50;
  110.           z-index: 9;
  111.           top: 0px;
  112.           cursor: pointer;
  113.         }
  114.         .btn-rod{
  115.           z-index: 8;
  116.           width:5px;
  117.           height: 36px;
  118.           background:#e9af30;
  119.           border-radius: 2px;
  120.           margin-left:1px;
  121.           position:absolute;
  122.           bottom:18px;
  123.           transform: scaleY(1);
  124.           transform-origin: center bottom;
  125.         }
  126.         &.active{
  127.           .btn-rod{
  128.             animation:rod-down .32s linear;
  129.           }
  130.           .btn-ball{
  131.             animation:ball-down .32s linear;
  132.           }
  133.         }
  134.       }
  135.   }
  136. }
  137. @keyframes rod-down{
  138.    0%{
  139.      transform: scaleY(1);
  140.    }
  141.    60%{
  142.      transform: scaleY(0);
  143.    }
  144.    80%{
  145.      transform:scaleY(-.2);
  146.    }
  147.    100%{
  148.      transform:scaleY(1);
  149.    }
  150. }
  151. @keyframes ball-down{
  152.    0%{
  153.      transform: translateY(0);
  154.    }
  155.    60%{
  156.      transform: translateY(40px);
  157.    }
  158.    80%{
  159.      transform: translateY(60px);
  160.    }
  161.    100%{
  162.      transform: translateY(0);
  163.    }
  164. }

script

  1. import anime from "https://cdn.skypack.dev/animejs@3.2.1";
  2.  
  3. (function () {
  4.   let ball = document.querySelector(".btn-ball");
  5.   let submit = document.querySelector(".submit-btn");
  6.   let list = document.querySelector(".code-list");
  7.   let isActive = false;
  8.   let startY,
  9.     isDown = false;
  10.   let w = 45,
  11.     h = 60;
  12.   let backgroundImage = createBackgroundImage(w, h);
  13.   let code = "";
  14.  
  15.   init();
  16.   bindEvent();
  17.  
  18.   function bindEvent() {
  19.     if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
  20.       submit.addEventListener("touchstart", _mouseDown);
  21.       submit.addEventListener("touchmove", _mouseMove);
  22.       submit.addEventListener("touchend", _mouseUp);
  23.     } else {
  24.       ball.addEventListener("mousedown", _mouseDown);
  25.       ball.addEventListener("mousemove", _mouseMove);
  26.       ball.addEventListener("mouseup", _mouseUp);
  27.       ball.addEventListener("mouseout", _mouseUp);
  28.     }
  29.   }
  30.  
  31.   submit.addEventListener("click", action);
  32.  
  33.   function _mouseDown(e) {
  34.     if (isActive) return;
  35.     if (isDown) return;
  36.     let clientY =
  37.       e.offsetY || (e.changedTouches && e.changedTouches[0].clientY);
  38.     startY = clientY;
  39.     isDown = true;
  40.   }
  41.  
  42.   function _mouseMove(e) {
  43.     if (isActive) return;
  44.     if (!isDown) return;
  45.     let clientY =
  46.       e.offsetY || (e.changedTouches && e.changedTouches[0].clientY);
  47.     let d = clientY - startY;
  48.     console.log(d);
  49.     if (d > 3) {
  50.       isDown = false;
  51.       action();
  52.     }
  53.   }
  54.  
  55.   function _mouseUp(e) {
  56.     isDown = false;
  57.   }
  58.  
  59.   ball.addEventListener("animationend", (e) => {
  60.     submit.classList.remove("active");
  61.     play();
  62.   });
  63.  
  64.   function action() {
  65.     if (isActive) return;
  66.     code = "";
  67.     isActive = true;
  68.     submit.classList.add("active");
  69.   }
  70.  
  71.   function play() {
  72.     let nums = createNums();
  73.     code = nums.join("");
  74.     [].forEach.call(list.children, (el, index) => {
  75.       setTimeout(() => {
  76.         let y = parseInt(el.style.backgroundPositionY || "0", 10);
  77.         anime({
  78.           targets: el,
  79.           backgroundPositionY: [y, y + h * 30 + (10 - nums[index]) * h],
  80.           loop: false, // 循环播放
  81.           direction: "normal",
  82.           easing: "easeOutCirc", // 时间曲线
  83.           duration: 2000, // 播放时间2s
  84.           autoplay: true, // 是否立即播放
  85.           complete: (anim) => {
  86.             if (index == 3) isActive = false;
  87.           }
  88.         });
  89.       }, index * 200);
  90.     });
  91.   }
  92.  
  93.   function init() {
  94.     addBackgroundImage();
  95.   }
  96.   function addBackgroundImage() {
  97.     [].forEach.call(list.children, (el) => {
  98.       el.style.backgroundImage = `url(${backgroundImage.src})`;
  99.     });
  100.   }
  101.  
  102.   function createBackgroundImage(w, h) {
  103.     let canvas = document.createElement("canvas");
  104.     let ctx = canvas.getContext("2d");
  105.     canvas.width = ctx.width = w;
  106.     canvas.height = ctx.height = h * 10;
  107.     let BackgroundImage = new Array(10).fill(0);
  108.     BackgroundImage.forEach((n, i) => {
  109.       ctx.save();
  110.       ctx.textAlign = "center";
  111.       ctx.textBaseline = "middle";
  112.       ctx.font = "bold 36px Baloo Bhaijaan";
  113.       ctx.fillText(i, w / 2, h * i + h / 2 + 5, w);
  114.       ctx.restore();
  115.     });
  116.     return convertCanvasToImage(canvas);
  117.   }
  118.  
  119.   function convertCanvasToImage(canvas) {
  120.     var image = new Image();
  121.     image.src = canvas.toDataURL("image/png");
  122.     return image;
  123.   }
  124.  
  125.   function random(min, max) {
  126.     return parseInt(Math.random() * (max - min + 1) + min);
  127.   }
  128.  
  129.   function createNums(l = 4) {
  130.     let num = random(1, 9999);
  131.     let res = (num + "").split("");
  132.     let len = res.length;
  133.     if (len < l) {
  134.       for (let i = 0; i < l - len; i++) {
  135.         res.unshift("0");
  136.       }
  137.     }
  138.     return res;
  139.   }
  140.  
  141. })();

提前说明下，咱们仅仅实现交互效果不需要考虑后端交互验证和安全这些，所以数字是每次拉动前端随机生成的，也没有加混淆和干扰。

正文

绘制背景

通过上面的演示可以看到，背景svg云纹的效果，那它是怎么实现的呢？不卖关子了，我是用了一个专门生成svg背景的网站来实现的，里面有各种各样的svg背景可以定制颜色，然后拷贝css代码出来就为你所用了。

拉杆绘制

  1. <div class="submit-btn">
  2.     <div class="btn-ball"></div>
  3.     <div class="btn-rod"></div>
  4.     <div class="btn-stand"></div>
  5. </div>

拉杆主要分别由头，杆，底座三个部分组成，而我们触发事件后赋给容器应该 active 样式，然后由他去控制头和杆执行一段css动画来实现其拉动的效果。

  1. .submit-btn{
  2.     &.active{
  3.         .btn-rod{
  4.             animation:rod-down .32s linear;
  5.         }
  6.         .btn-ball{
  7.             animation:ball-down .32s linear;
  8.         }
  9.     }
  10. }
  11. @keyframes rod-down{
  12.    0%{
  13.      transform: scaleY(1);
  14.    }
  15.    60%{
  16.      transform: scaleY(0);
  17.    }
  18.    80%{
  19.      transform:scaleY(-.2);
  20.    }
  21.    100%{
  22.      transform:scaleY(1);
  23.    }
  24. }
  25. @keyframes ball-down{
  26.    0%{
  27.      transform: translateY(0);
  28.    }
  29.    60%{
  30.      transform: translateY(40px);
  31.    }
  32.    80%{
  33.      transform: translateY(60px);
  34.    }
  35.    100%{
  36.      transform: translateY(0);
  37.    }
  38. }

至于，事件的绑定则非常容易，就说判断鼠标点击滑动抬起事件，看看两点间的变化量是否大于3px，如果大于则向容器赋予 active 样式触发css动画。

生成条带

让数字转动之前我们先要生成一下条带，当然我们可以直接使用图片，但是咱们没有设计，所以前端自己动手丰衣足食吧。就用 canvas 拼接出一个图片数字条带出来。

  1. function createBackgroundImage(w, h) {
  2.     let canvas = document.createElement("canvas");
  3.     let ctx = canvas.getContext("2d");
  4.     canvas.width = ctx.width = w;
  5.     canvas.height = ctx.height = h * 10;
  6.     let BackgroundImage = new Array(10).fill(0);
  7.     BackgroundImage.forEach((n, i) => {
  8.         ctx.save();
  9.         ctx.textAlign = "center";
  10.         ctx.textBaseline = "middle";
  11.         ctx.font = "bold 36px Baloo Bhaijaan";
  12.         ctx.fillText(i, w / 2, h * i + h / 2 + 5, w);
  13.         ctx.restore();
  14.     });
  15.     return convertCanvasToImage(canvas);
  16. }
  17. function convertCanvasToImage(canvas) {
  18.     var image = new Image();
  19.     image.src = canvas.toDataURL("image/png");
  20.     return image;
  21. }

在项目初始化的时候，就会执行这个方法，利用 canvas 绘制出0到9，10个数字纵向排列出来，最后用 toDataURL 方法导出图片，赋给需要转动区域内的做背景图。

数字转动

上一步操作背景图都生成出来了，不难想到我们将会通过改变 backgroundPositionY 的形式来实现转动。当然，我们还要让动画不停加速最后在慢慢停下来，所以要加入缓动，这里推荐一个动画库 animejs ,它非常的小巧且灵活好用。

  1. import anime from "https://cdn.skypack.dev/animejs@3.2.1";
  2. function play() {
  3.     let nums = createNums();
  4.     code = nums.join("");
  5.     [].forEach.call(list.children, (el, index) =&gt; {
  6.         setTimeout(() =&gt; {
  7.             let y = parseInt(el.style.backgroundPositionY || "0", 10);
  8.             anime({
  9.                 targets: el,
  10.                 backgroundPositionY: [y, y + h * 30 + (10 - nums[index]) * h],
  11.                 loop: false, // 循环播放
  12.                 direction: "normal",
  13.                 easing: "easeOutCirc", // 时间曲线
  14.                 duration: 2000, // 播放时间2s
  15.                 autoplay: true, // 是否立即播放
  16.                 complete: (anim) =&gt; {
  17.                     if (index == 3) isActive = false;
  18.                 }
  19.             });
  20.         }, index * 200);
  21.     });
  22. }
  23. function createNums(l = 4) {
  24.     let num = random(1, 9999);
  25.     let res = (num + "").split("");
  26.     let len = res.length;
  27.     if (len &lt; l) {
  28.         for (let i = 0; i &lt; l - len; i++) {
  29.             res.unshift("0");
  30.         }
  31.     }
  32.     return res;
  33. }

先获取到要返回来的验证码，我这里用随机数来模拟，然后遍历那四个转动区域，生成好 anime 动画，其backgroundPositionY 最后的结果以刚刚获取到的验证码的数字获取到对应位置来计算得到，当然遍历的同时为了效果更好，我们是用 setTimeout 定时器每隔200ms再让开启下一个转动块执行的。

以上就是JS SVG获取验证码的玩法示例的详细内容，更多关于JS SVG获取验证码的资料请关注w3xue其它相关文章！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

SVG热门文章

  • css animation配合SVG制作能量流动效果_CSS教程_CSS
  • html2 canvas svg不能识别的解决方案_HTML/Xhtml
  • 在vue项目中优雅的使用SVG的方法实例详解
  • 今天，小程序正式支持 SVG
  • svg+css3做一个动感的波浪效果实现_CSS教程_CSS
  • HTML5如何使用SVG的方法示例
  • Angular实现svg和png图片下载实现
  • 浅谈SVG（可缩放的矢量图形）
  • JS&nbsp;SVG获取验证码的玩法示例
  • 5 分钟速通 SVG

    • SVG推荐文章

  • 《最新出炉》系列初窥篇-Python+Playwright自动化测试-64 - Canvas和SVG元素推拽 - 北京-宏哥
  • 前端使用 Konva 实现可视化设计器（9）- 另存为SVG
  • 【动画进阶】巧用 CSS/SVG 实现复杂线条光效动画
  • JS&nbsp;SVG获取验证码的玩法示例
  • Angular实现svg和png图片下载实现
  • 今天，小程序正式支持 SVG
  • HTML5如何使用SVG的方法示例

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号