当前位置： 首页 > news >正文

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

news 2026/2/3 18:57:34

滑块验证码

效果图：

实现思路：

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

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

相关文章：

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

滑块验证码 效果图&#xff1a; 实现思路&#xff1a; 根据滑块的最左侧点跟最右侧点&#xff0c; 是否在规定的距离内【页面最左侧为原点】&#xff0c;来判断是否通过 html代码&#xff1a; <!DOCTYPE html> <html><head><title>滑动图片验证码&…...

编程日记 2023/8/18 23:40:00

【使用群晖远程链接drive挂载电脑硬盘】

文章目录 前言1.群晖Synology Drive套件的安装1.1 安装Synology Drive套件1.2 设置Synology Drive套件1.3 局域网内电脑测试和使用 2.使用cpolar远程访问内网Synology Drive2.1 Cpolar云端设置2.2 Cpolar本地设置2.3 测试和使用 3. 结语 前言 群晖作为专业的数据存储中心&…...

编程日记 2023/8/18 23:38:59

easyx图形库基础4：贪吃蛇

贪吃蛇 一实现贪吃蛇&#xff1a;1.绘制网格&#xff1a;1.绘制蛇&#xff1a;3.控制蛇的默认移动向右&#xff1a;4.控制蛇的移动方向&#xff1a;5.生成食物6.判断蛇吃到食物并且长大。7.判断游戏结束&#xff1a;8.重置函数&#xff1a; 二整体代码&#xff1a; 一实现贪吃蛇…...

编程日记 2023/8/18 23:37:57

哈夫曼树（赫夫曼树、最优树）详解

目录 哈夫曼树&#xff08;赫夫曼树、最优树&#xff09;详解 哈夫曼树相关的几个名词 什么是哈夫曼树 构建哈夫曼树的过程 哈弗曼树中结点结构 构建哈弗曼树的算法实现 哈夫曼树&#xff08;赫夫曼树、最优树&#xff09;详解 哈夫曼树相关的几个名词 路径&#xff1a;…...

编程日记 2023/8/18 23:36:56

智慧建筑工地平台，通过信息化技术、物联网、人工智能技术，实现对施工全过程的实时监控、数据分析、智能管理和优化调控

智慧工地是指通过信息化技术、物联网、人工智能技术等手段&#xff0c;对建筑工地进行数字化、智能化、网络化升级&#xff0c;实现对施工全过程的实时监控、数据分析、智能管理和优化调控。智慧工地的建设可以提高工地的安全性、效率性和质量&#xff0c;降低施工成本&#xf…...

编程日记 2023/8/18 23:35:53

Springboot 实践（8）springboot集成Oauth2.0授权包，对接spring security接口

此文之前&#xff0c;项目已经添加了数据库DAO服务接口、资源访问目录、以及数据访问的html页面&#xff0c;同时项目集成了spring security&#xff0c;并替换了登录授权页面&#xff1b;但是&#xff0c;系统用户存储代码之中&#xff0c;而且只注册了admin和user两个用户。在…...

编程日记 2023/8/18 23:34:51

OpenCV-Python中的图像处理-GrabCut算法交互式前景提取

OpenCV-Python中的图像处理-GrabCut算法交互式前景提取 Python-OpenCV中的图像处理-GrabCut算法交互式前景提取 Python-OpenCV中的图像处理-GrabCut算法交互式前景提取 cv2.grabCut(img: Mat, mask: typing.Optional[Mat], rect, bgdModel, fgdModel, iterCount, mode…) img…...

编程日记 2023/8/18 23:33:49

leetcode原题 后继者：找出二叉搜索树中指定节点的“下一个”节点

题目&#xff1a; 设计一个算法&#xff0c;找出二叉搜索树中指定节点的“下一个”节点&#xff08;也即中序后继&#xff09;。 如果指定节点没有对应的“下一个”节点&#xff0c;则返回null。 示例&#xff1a; 输入: root [2,1,3], p 1 2 / \ 1 3 输出: 2 解题思路…...

编程日记 2023/8/18 23:32:48

pyqt5 QlineEdit 如何设置只能输入数字

在 PyQt&#xff08;Python中的一个GUI库&#xff09;中&#xff0c;可以使用QLineEdit小部件的setValidator()方法来限制用户输入的内容。要让QLineEdit只能输入数字&#xff0c;你可以使用QIntValidator或QDoubleValidator。下面是一个示例代码&#xff0c;展示如何设置只能输…...

编程日记 2023/8/18 23:31:46

ubuntu中安装python

最简单方便的是 apt 使用第三方的 ppa 源&#xff0c;然后直接 apt 安装 python3.9 安装 software-properties-common 获取add-apt-repository命令&#xff1a;apt install -y software-properties-common添加第三方的 ppa 源&#xff1a;add-apt-repository ppa:deadsnakes/p…...

编程日记 2023/8/18 23:30:46

LeetCode150道面试经典题-- 快乐数(简单)

1.题目 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变不到 1。如果这个过程 结果为 1&am…...

编程日记 2023/8/18 23:29:44

科研论文配图----第一章笔记

第一章笔记 科研论文的绘制基础 科研论文配图的分类与构成 根据呈现方式&#xff0c;科研论文配图可分为线性图、灰度图、照片彩图和综合配图 4 种类型。 其中&#xff0c;线性图是主要和常用的配图类型&#xff0c;也是本书重点介绍的配图类型。 科研论文配图的格式和尺寸 格…...

编程日记 2023/8/18 23:28:43

OpenHarmony Meetup 广州站 OpenHarmony正当时—技术开源

招募令 OpenHarmony Meetup 广州站 火热招募中&#xff0c;等待激情四射的开发者&#xff0c;线下参与OpenHarmonyMeetup线下交流 展示前沿技术、探讨未来可能、让你了解更多专属OpenHarmony的魅力 线下参与&#xff0c;先到先得,仅限20个名额&#xff01; 报名截止时间8月23日…...

编程日记 2023/8/18 23:27:42

如何使用PHP Smarty模板实现静态页面生成

首先&#xff0c;你需要从Smarty官网下载这个神奇的文件。然后&#xff0c;你需要在你的PHP文件中引入Smarty类。就像这样&#xff1a; require_once(Smarty.class.php);现在&#xff0c;我们要创建一个Smarty实例。这就像打开一个新的文件&#xff0c;只不过这个文件是可以和…...

编程日记 2023/8/18 23:26:40

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

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

编程日记 2023/8/18 23:25:39

剑指Offer68-II.二叉树的最近公共祖先 C++

1、题目描述 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个结点 p、q&#xff0c;最近公共祖先表示为一个结点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可能大&#xff08;一个节点也可以…...

编程日记 2023/8/18 23:24:37

【JAVA】我们该如何规避代码中可能出现的错误？（一）

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️初识JAVA】 文章目录 前言三种类型的异常异常处理JAVA内置异常类Exception 类的层次 前言 异常是程序中的一些错误&#xff0c;但并不是所有的错误都是异常&#xff0c;并且错误有时候是可以避免的&…...

编程日记 2023/8/18 23:23:36

openLayers实战(八)：坐标系及其转换

坐标系介绍 EPSG: 3857 --web地图&#xff0c;基于球体的、web墨卡托投影&#xff08;伪墨卡托投影Pseudo-Mercator&#xff09;的投影坐标系&#xff0c;范围为纬度85度以下&#xff0c;由于google地图最先使用而成为事实标准。至今&#xff0c;大多互联网地图都使用EPSG3857&…...

编程日记 2023/8/18 23:22:35

DAY06_SpringBoot—简介基础配置yaml多环境开发配置整合第三方技术

目录 一 SpringBoot简介1. 入门案例问题导入1.1 入门案例开发步骤1.2 基于SpringBoot官网创建项目1.3 SpringBoot项目快速启动 2. SpringBoot概述问题导入2.1 起步依赖2.2 辅助功能 二 基础配置1. 配置文件格式问题导入1.1 修改服务器端口1.2 自动提示功能消失解决方案1.3 Spri…...

编程日记 2023/8/18 23:21:33

无涯教程-Perl - setpwent函数

描述 此功能将枚举设置(或重置)到密码条目集的开头。应该在第一次调用getpwent之前调用此函数。 语法 以下是此函数的简单语法- setpwent返回值 此函数不返回任何值。 例 以下是显示其基本用法的示例代码- #!/usr/bin/perlwhile(($name, $passwd, $uid, $gid, $quota, …...

编程日记 2023/8/18 23:20:32

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2026/2/2 12:11:29

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2026/2/2 21:16:44

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/12/16 4:45:38

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2026/1/28 5:55:15

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2026/1/29 9:12:46

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2026/1/24 13:16:33

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

编程新知 2026/1/26 13:35:42

上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

编程新知 2025/8/18 3:01:22