【JavaScript】使用js实现滑块验证码功能与浏览器打印

滑块验证码

效果图：

实现思路：

根据滑块的最左侧点跟最右侧点， 是否在规定的距离内【页面最左侧为原点】，来判断是否通过

html代码：

js代码：

$(document).ready(function() {
    var isDragging = false; // 判断是否正在拖动滑块
    var slider = $("#slider");
    var captchaContainer = $(".captcha-container");
    var captchaWidth = captchaContainer.width();
    var maxOffset = captchaWidth - slider.width(); // 滑块最大可移动距离
  
    // 鼠标按下触发
    slider.mousedown(function(e) {
      isDragging = true;
    });
  
    // 鼠标移动触发
    $(document).mousemove(function(e) {
        // 判断是否可以拖动
      if (isDragging) {
        // e.pageX 是鼠标当前所在位置相对于整个文档（document）左侧的水平位置
        // captchaContainer.offset().left 是容器左侧边界相对于文档左侧的水平位置。
        var leftOffset = e.pageX - captchaContainer.offset().left; 
        // console.log(e.pageX,captchaContainer.offset().left)
        if (leftOffset >= 0 && leftOffset <= maxOffset) {
          slider.css("left", leftOffset);
        }
      }
    });
  
    // 鼠标释放触发
    $(document).mouseup(function(e) {
      if (isDragging) {
        var captchaPassed = false; // 是否通过验证的标志
        var leftOffset = e.pageX - captchaContainer.offset().left; // 滑块距离容器左侧距离
        if (leftOffset >= 195 && leftOffset <= 280) { //滑块要到达的目标位置
          captchaPassed = true;
        }
  
        if (captchaPassed) {
          // 验证通过，执行你的相关操作
          console.log("验证码验证通过！");
        } else {
          // 验证失败，重置滑块位置
          console.log("验证码验证失败！");
          slider.animate({ left: 0 }, 200);
        }
  
        isDragging = false;
      }
    });
  });
  

注解：图片需要自己放一张，然后滑块验证的距离通过下面代码规定：

if (leftOffset >= 195 && leftOffset <= 280) { //滑块要到达的目标位置
      xxxxxxx
}

浏览器打印

一开始编写的代码如下：

  
  



  打印

  
  
欢迎打印该页面
  
这是要打印的页面内容。
  

发现这样会打印整个页面的内容，不符合需求：

后来进行改进，打印指定的div下的内容：

新建一个临时页面，然后将指定内容赋值到临时页面进行打印，打印之后再关闭临时页面，这样就不会打印无关的内容了

  
  



  打印

  
  

    
欢迎打印该页面
    
这是要打印的页面内容。
  
  

但是这样打印，一些样式就无法进行打印了

注解：
printWindow.document.close() 是用于关闭在新窗口中打开的文档流

printWindow.document.write() 方法向新窗口的文档流中写入了 HTML 内容。然而，在将内容添加到文档流后，我们需要调用 printWindow.document.close() 来关闭文档流

于是又进行修改，想着能不能对指定内容进行一个截屏，然后将截屏的图片进行打印，这样就可以保留跟打印内容一样的样式了：

    
    
    



    

        
要截屏和打印的内容
        
这是示例文本
    

    截屏并打印

    

效果如下：

注解：

引入了 html2canvas 库，它可以将指定元素（这里是

）转换为 ，从而实现截屏功能

当我们点击按钮时，使用 html2canvas 函数将指定

（在代码中被称为 targetDiv）转换为 。然后，我们使用 toDataURL() 将 中的图像数据转换为 URL 格式