【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 格式

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python爬虫常用:谷歌浏览器驱动——Chromedriver 插件安装教程

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 我们在做爬虫的时候经常要使用谷歌浏览器驱动&#xff0c;今天分享下这个Chromedriver 插件的安装方法。 话不多说&#xff0c;直接开搞&#xff0c;如果有什么疑惑/资料需要的可以点击文章末尾名片领取源码 第一步、打开谷…

使用Dockker创建vwas容器时报错的解决方法

执行命令 docker run -it -d -p 13443:3443 --cap-add LINUX_IMMUTABLE secfa/docker-awvs没有详细看报错之前找了各种各样的解决办法&#xff0c;都无法解决。因此以后在看报错提示的时候耐心一点看关键词Error 后来才发现启动vwas时docker报了这个错&#xff1a; OSError: …

CANoe自动化工程的搭建

基于XMLCAPL建立自动化工程 1、导入ini文件2、新建 Test Environment3、报告类型4、代码编写 1、导入ini文件 工程的配置的文件&#xff0c;配置DUT相关信息&#xff0c;具体视工程而编写内容。 2、新建 Test Environment 1、新建XML测试用例环境 2、导入XML测试用例文件 …

Jmeter常用功能-参数化介绍

JMeter也有像LR中的参数化&#xff0c;本篇就来介绍下JMeter的参数化如何去实现。 参数化&#xff1a;录制脚本中有登录操作&#xff0c;需要输入用户名和密码&#xff0c;假如系统不允许相同的用户名和密码同时登录&#xff0c;或者想更好的模拟多个用户来登录系统。 这个时…

mac M1安装opencv方法及类型报错解决

安装opencv: pip install opencv-python pip install --user opencv-contrib-python pip install opencv-python 4.5.2.54 numpy 1.25.2 安装过程中报错如下&#xff1a; python-类型错误&#xff1a;“numpy._DTypeMeta”对象不可下标 TypeError: ‘numpy._DTypeMeta’ obje…

虚拟机/双系统Ubuntu扩容

虚拟机Ubuntu扩容 1.需要删除所有的快照 2.扩展虚拟机磁盘大小 虚拟机(M)→设置(s)→硬盘(SCSI)→扩展磁盘容量 3.Ubuntu内调整分区大小 安装gparted分区工具&#xff1a;sudo apt-get install gparted 启动gparted并resize分区 4.最后最好建一个快照&#xff0c;不然gg了…

WinPlan经营大脑垂直大模型行业报告

一、引言 在当前高度信息化的时代,企业经营管理决策的重要性已经得到了广泛的认可。然而,在实际操作中,许多企业仍然在凭经验、拍脑袋进行经营决策,缺乏数据工具与专职分析团队,导致决策难、效率低等问题。针对这一问题,近年来,一种名为“WinPlan”的经营决策产品逐渐崭…

[测试报告] 爱搜Blog 自动化测试报告

目录 项目背景 项目功能 测试详情 一、设计测试用例 二、功能测试步骤结果 1. 登录页面 2. 个人博客页面 3. 博客详情页 4. 博客编辑页 三、自动化测试及测试结果 1. 测试环境 2. 登录测试用例&#xff1a; 3. 个人详情页测试用例&#xff1a; 4. 写博客并发布测试…

Android免打包多渠道统计如何实现

摘要&#xff1a; 实际上只要完成1-2步即可实现多渠道打包&#xff0c;这也意味着&#xff0c;只要每次更新App时给出一个原始包&#xff0c;运营人员就能在后台自己进行操作管理&#xff0c;简单快捷到全程无需开发人员参与。 我们都知道&#xff0c;Android 市场被分割成几十…

Go学习笔记之数据类型

文章目录 GO数据类型数组array切片slice集合map结构体make和new GO数据类型 在go语言中&#xff0c;定义的全局数据结构不使用不会报错&#xff0c;定义的局部数据结构必须使用&#xff0c;否则报错&#xff1b;建议定义的数据类型就要使用&#xff0c;要么不定义。 数组array …

使用Alien对.deb包与.rpm包相互转换

目录 1、切换到root 2、更新yum&#xff08;更新比较耗时&#xff0c;不更新没试行不&#xff0c;自行斟酌是否跳过这一步&#xff09; 3、卸载ibus 4、安装Alien及其依赖包 5、安装Alien 6、将.deb转换成.rpm包 7、安装RPM包 8、如果报错 9、将.rpm转换成.deb包 10、安…

在 Visual Studio 中编译 Qt 资源文件和 UI 文件教程

在 Visual Studio 中编译 Qt 资源文件和 UI 文件教程 Qt 是一个跨平台的 C 库&#xff0c;用于开发图形界面和应用程序。在 Qt 开发中&#xff0c;资源文件和 UI 文件是常见的两种资源&#xff0c;需要将它们编译成可用的形式&#xff0c;以便在应用程序中使用。本教程将指导您…

MongoDB(三十九)

目录 一、概述 &#xff08;一&#xff09;相关概念 &#xff08;二&#xff09;特性 二、应用场景 三、安装 &#xff08;一&#xff09;编译安装 &#xff08;二&#xff09;yum安装 1、首先制作repo源 2、软件包名&#xff1a;mongodb-org 3、启动服务&#xff1a…

Java工程师修炼手册:Java数据结构面试题

Java数据结构面试题一直都是面试官喜欢问到的问题&#xff0c;在我们去面试Java的相关岗位时&#xff0c;肯定会被提问到&#xff0c;所以我们就需要提前做好准备&#xff0c;轻松的去应对&#xff1a; 1. 数据结构定义 数据结构是计算机存储、组织数据的方式。数据结构是指相…

asp.net core读取request内容

在Startup.cs中定义Middleware&#xff0c;设置缓存Http请求的Body数据。代码如下。自定义Middleware请放到Configure方法的最前面。 app.Use(next > new RequestDelegate(async context > {context.Request.EnableBuffering();await next(context);})); GET请求 HttpC…

详解23种设计模式优缺点以及解决方案

1. 单例模式&#xff08;Singleton Pattern&#xff09;&#xff1a; 优点&#xff1a;确保一个类只有一个实例&#xff0c;提供全局访问点&#xff0c;节省资源。缺点&#xff1a;可能引入全局状态&#xff0c;难以扩展和测试。解决方法&#xff1a;使用依赖注入来替代直接访…

通过 Amazon SageMaker JumpStart 部署 Llama 2 快速构建专属 LLM 应用

来自 Meta 的 Llama 2 基础模型现已在 Amazon SageMaker JumpStart 中提供。我们可以通过使用 Amazon SageMaker JumpStart 快速部署 Llama 2 模型&#xff0c;并且结合开源 UI 工具 Gradio 打造专属 LLM 应用。 Llama 2 简介 Llama 2 是使用优化的 Transformer 架构的自回归语…

【JavaEE基础学习打卡04】JDBC之MySQL数据库安装

目录 前言一、JDBC与数据库二、MySQL数据库1.MySQL数据库2.MySQL服务下载安装3.MySQL服务启动停止4.MySQL命令 三、MySQL客户端安装总结 前言 &#x1f4dc; 本系列教程适用于JavaWeb初学者、爱好者&#xff0c;小白白。我们的天赋并不高&#xff0c;可贵在努力&#xff0c;坚持…

【 Cocos Creator 项目实战】益智游戏《2048》(附带完整源码工程)

本文乃Siliphen原创&#xff0c;转载请注明出处 目录 游戏介绍 概述 游戏整体流程 游戏框架设计 主要流程控制类 本文项目的代码组织结构 构建游戏世界 数字方块 地图 触摸手势识别 防触摸抖动 判断用户输入的方向 地图 任意大小的地图 初始化地图大小 地图绘制…

数据结构----结构--线性结构--栈,队列

数据结构----结构–线性结构–栈&#xff0c;队列 一.栈&#xff1a;Stack 1.栈的特点&#xff1a; ​ 先进后出&#xff1a;FILO&#xff08;对一组数据有倒叙要求时可以用栈&#xff09; 2.栈的实现 顺序存储&#xff1a;数组实现&#xff1a; ​ 缺点&#xff1a;空间…