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

滑块验证码

效果图:

实现思路:

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

html代码:

<!DOCTYPE html>
<html>

<head>
  <title>滑动图片验证码</title>
  <style>
    .captcha-container {
      position: relative;
      width: 300px;
      height: 300px;
      overflow: hidden;
    }

    #captcha-image {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #f2f2f2;
      background-image: url('./img/text.png');
      background-size: cover;
    }

    #slider {
      position: absolute;
      top: 48%;
      left: 0;
      transform: translateY(-50%);
      width: 80px;
      height: 80px;
      background-color: #007bff;
      border-radius: 50%;
      cursor: pointer;
      z-index: 999;
    }
  </style>
</head>

<body>
  <div class="captcha-container">
    <div id="captcha-image"></div>
    <div id="slider"></div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="./js/captcha.js"></script>
</body>

</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
}

浏览器打印

一开始编写的代码如下:

<!DOCTYPE html>
<html>

<head>
  <title>打印页面</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
  <button id="printButton">打印</button>

  <!-- 页面内容 -->
  <h1>欢迎打印该页面</h1>
  <p>这是要打印的页面内容。</p>
  <script>
    $(document).ready(function () {
      // 点击按钮触发打印事件
      $("#printButton").click(function () {
        window.print(); // 调用window.print()方法打印页面
      });
    });

  </script>
</body>

</html>

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

后来进行改进,打印指定的div下的内容:

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

<!DOCTYPE html>
<html>

<head>
  <title>打印页面</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
  <button id="printButton">打印</button>

  <!-- 指定内容 -->
  <div id="customDiv">
    <h1 style="color: red;">欢迎打印该页面</h1>
    <p style="background-color: aqua; font-size: 88px;">这是要打印的页面内容。</p>
  </div>
  <script>
    $(document).ready(function () {
      // 点击按钮触发打印事件
      $("#printButton").click(function () {
        var printContents = $("#customDiv").html(); // 获取要打印的内容

        var printWindow = window.open("", "_blank"); // 打开一个新窗口
        printWindow.document.write('<html><head>');
        printWindow.document.write('<title>打印</title>');
        printWindow.document.write('</head><body>');
        printWindow.document.write(printContents); // 将要打印的内容写入新窗口
        printWindow.document.write('</body></html>');
        printWindow.document.close();

        printWindow.print(); // 在新窗口中调用 print() 方法打印内容
        printWindow.close(); // 关闭新窗口
      });
    });
  </script>
</body>

</html>

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

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

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

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

<!DOCTYPE html>
<html>

<head>
    <title>截屏并打印</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.0/html2canvas.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div id="customDiv" style="background-color: #f1f1f1; padding: 10px;">
        <h2 style="color: red;">要截屏和打印的内容</h2>
        <p style="background-color: chocolate;">这是示例文本</p>
    </div>

    <button id="printButton">截屏并打印</button>

    <script>
        $(document).ready(function () {
            // 点击按钮触发截屏和打印事件
            $("#printButton").click(function () {
                var targetDiv = document.getElementById("customDiv");
                var printWindow = window.open("", "_blank"); // 打开一个新窗口

                html2canvas(targetDiv).then(function (canvas) {
                    var imageData = canvas.toDataURL(); // 获取截图数据
                    var imageElement = new Image();
                    imageElement.src = imageData;

                    printWindow.document.write('<html><head>');
                    printWindow.document.write('<title>打印</title>');
                    printWindow.document.write('</head><body>');
                    printWindow.document.write(imageElement.outerHTML); // 将截图添加到新窗口
                    printWindow.document.write('</body></html>');
                    printWindow.document.close();

                    setTimeout(function () {
                        printWindow.print(); // 在新窗口中调用 print() 方法打印内容
                        printWindow.close(); // 关闭新窗口
                    }, 1000); // 延迟 1 秒等待图像加载完成(可根据需要调整延迟时间)
                });
            });
        });
    </script>
</body>

</html>

效果如下:

注解:

引入了 html2canvas 库,它可以将指定元素(这里是 <div>)转换为 <canvas>,从而实现截屏功能

当我们点击按钮时,使用 html2canvas 函数将指定 <div>(在代码中被称为 targetDiv)转换为 <canvas>。然后,我们使用 toDataURL()<canvas> 中的图像数据转换为 URL 格式

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/78566.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于docker搭建pytest自动化测试环境(docker+pytest+jenkins+allure)

pytest搭建自动化测试环境&#xff08;dockerpytestjenkinsallure&#xff09; 这里我以ubuntu18为例 如果有docker环境&#xff0c;可以直接拉取我打包好的镜像docker pull ziyigun/jenkins:v1.0 1 搭建Docker 1.1 安装docker # 配置docker安装环境 sudo apt-get install ap…

【C语言】深度剖析数据在内存中的存储

一、数据类型详细介绍 1、数据类型介绍 &#xff08;1&#xff09;基本的内置类型 //内置类型就是C语言自带的类型char //字符数据类型 short //短整型 int //整形 long //长整型 long long //更长的整形 float //单精度浮点数 double …

Baumer工业相机堡盟工业相机如何通过BGAPISDK设置相机的固定帧率(C#)

Baumer工业相机堡盟工业相机如何通过BGAPI SDK设置相机的固定帧率&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机的固定帧率功能的技术背景CameraExplorer如何查看相机固定帧率功能在BGAPI SDK里通过函数设置相机固定帧率 Baumer工业相机通过BGAPI SDK设置相机固定帧…

图解算法--排序算法

目录 1.冒泡排序算法 2.选择排序算法 3.插入排序算法 4.希尔排序算法 5.归并排序算法 6.快速排序算法 1.冒泡排序算法 原理讲解&#xff1a; 从待排序的数组中的第一个元素开始&#xff0c;依次比较当前元素和它相邻的下一个元素的大小。如果当前元素大于相邻元素&#x…

【Elasticsearch】spring-boot-starter-data-elasticsearch的使用以及Elasticsearch集群的连接

更多有关博主写的往期Elasticsearch文章 标题地址【ElasticSearch 集群】Linux安装ElasticSearch集群&#xff08;图文解说详细版&#xff09;https://masiyi.blog.csdn.net/article/details/131109454基于SpringBootElasticSearch 的Java底层框架的实现https://masiyi.blog.c…

【Linux命令详解 | ssh命令】 ssh命令用于远程登录到其他计算机,实现安全的远程管理

文章标题 简介一&#xff0c;参数列表二&#xff0c;使用介绍1. 连接远程服务器2. 使用SSH密钥登录2.1 生成密钥对2.2 将公钥复制到远程服务器 3. 端口转发3.1 本地端口转发3.2 远程端口转发 4. X11转发5. 文件传输与远程命令执行5.1 文件传输5.1.1 从本地向远程传输文件5.1.2 …

时序预测 | MATLAB实现WOA-CNN-GRU鲸鱼算法优化卷积门控循环单元时间序列预测

时序预测 | MATLAB实现WOA-CNN-GRU鲸鱼算法优化卷积门控循环单元时间序列预测 目录 时序预测 | MATLAB实现WOA-CNN-GRU鲸鱼算法优化卷积门控循环单元时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 时序预测 | MATLAB实现WOA-CNN-GRU鲸鱼算法优化卷积…

Linux 网络发包流程

哈喽大家好&#xff0c;我是咸鱼 之前咸鱼在《Linux 网络收包流程》一文中介绍了 Linux 是如何实现网络接收数据包的 简单回顾一下&#xff1a; 数据到达网卡之后&#xff0c;网卡通过 DMA 将数据放到内存分配好的一块 ring buffer 中&#xff0c;然后触发硬中断CPU 收到硬中…

nn.embedding会被反向传播更新吗?

https://developer.aliyun.com/article/1191215 这样是不可更新&#xff0c;但被我注释掉了。

[oneAPI] 手写数字识别-VAE

[oneAPI] 手写数字识别-VAE oneAPIVAE模型实现手写数字识别任务定义使用包定义参数加载数据VAE模型与介绍训练过程结果 比赛&#xff1a;https://marketing.csdn.net/p/f3e44fbfe46c465f4d9d6c23e38e0517 Intel DevCloud for oneAPI&#xff1a;https://devcloud.intel.com/one…

记录一下基于jeecg-boot3.0的待办消息移植记录

因为之前没有记录&#xff0c;所以还要看代码进行寻找&#xff0c;比较费劲&#xff0c;所以今天记录一下&#xff1a; 1、后端 SysAnnouncementController 下面函数增加待办的几个显示内容给前端用 具体代码如下&#xff1a; /*** 功能&#xff1a;补充用户数据&#xff0c…

Nginx 解决api跨域问题

环境: nginx 1.22.1 宝塔8.0 php lavarel 在nginx里加入下面的设置 #这里填*就是任何域名都允许跨域add_header Access-Control-Allow-Origin "*";#CORS请求默认不发送Cookie和HTTP认证信息。但是如果要把Cookie发到服务器&#xff0c;要服务器同意&#xff0c…

JVM——类的生命周期

文章目录 类加载过程加载验证准备解析初始化 卸载 一个类的完整生命周期如下&#xff1a; 类加载过程 Class 文件需要加载到虚拟机中之后才能运行和使用&#xff0c;那么虚拟机是如何加载这些 Class 文件呢&#xff1f; 系统加载 Class 类型的文件主要三步:加载->连接->…

微服务实战项目-学成在线-项目部署

微服务实战项目-学成在线-项目部署 1 什么是DevOps 一个软件的生命周期包括&#xff1a;需求分析阶、设计、开发、测试、上线、维护、升级、废弃。 通过示例说明如下&#xff1a; 1、产品人员进行需求分析 2、设计人员进行软件架构设计和模块设计。 3、每个模块的开发人员…

软考笔记——10.项目管理

进度管理 进度管理就是采用科学的方法&#xff0c;确定进度目标&#xff0c;编制进度计划和资源供应计划&#xff0c;进行进度控制&#xff0c;在与质量、成本目标协调的基础上&#xff0c;实现工期目标。 具体来说&#xff0c;包括以下过程&#xff1a; (1) 活动定义&#…

MES生产管理系统如何与ERP系统集成

MES生产管理系统和ERP企业管理系统是制造企业信息化的重要组成部分&#xff0c;它们在生产管理、资源计划和业务流程等方面发挥着重要作用。实现MES与ERP系统的集成&#xff0c;可以更好地优化企业生产流程&#xff0c;提高生产效率和降低成本。本文将探讨MES管理系统解决方案如…

传感网应用开发实训室建设方案

传感网应用开发实训室概述 物联网是我国战略性新兴产业的重要组成部分&#xff0c;《物联网“十二五”发展规划》圈定了10大领域重点示范工程&#xff0c;第一个关键技术创新工程提出“充分发挥企业主体作用&#xff0c;积极利用高校和研究所实验室的现有研究成果&#xff0c;在…

Vue 根据Upload组件的before-upload方法,限制用户上传文件的类型及大小

文章目录 一、前端 Vue Upload组件的before-upload方法二&#xff0c;使用方法 一、前端 Vue Upload组件的before-upload方法 判断用户上传的文件是否符合要求&#xff0c;可以根据文件类型或者大小做出限制。 文件类型值docapplication/msworddocxapplication/vnd.openxmlform…

VS2019+Qt5.15.2 编译 QtWebEngine(带音视频解码)

前言 QtWebEngine 是 Qt 框架的一部分&#xff0c;用于构建现代 Web 浏览器功能。本篇教程将向您展示如何在 Visual Studio 2019 中编译 QtWebEngine 5.15.2 源码&#xff0c;并配置以支持音视频解码功能。 准备工作 1、源码下载 2、源码修改&#xff0c;参考Qt Code Review…

【Python】使用python解析someip报文,以someip格式打印报文

文章目录 1.安装scapy库2.示例 1.安装scapy库 使用 pip 安装 scapy 第三方库&#xff0c;打开 cmd&#xff0c;输入以下命令&#xff1a; pip install scapy出现如图所示&#xff0c;表示安装成功&#xff1a; 2.示例 要解析someip格式报文&#xff0c;需要导入someip模块&a…