php画拼图滑动验证,JS实现滑动拼图验证功能完整示例
时间: 2023-08-14 07:07:21 浏览: 51
以下是一个简单的 PHP 和 JS 实现滑动拼图验证的示例：
1. 创建拼图图片和背景图片
首先，我们需要创建两张图片：一张是包含不规则拼图形状的 PNG 图片（可以使用 Photoshop 或其他图像编辑软件创建），另一张是包含背景图案的 JPG 或 PNG 图片。这两张图片需要放在服务器上的某个目录下。
2. 编写 PHP 代码
在 PHP 文件中，我们需要生成一个随机的拼图位置，并将其保存在 session 中，以便在提交表单时进行验证。以下是一个示例代码：
```php
<?php
session_start();
// 随机生成拼图位置
$pos_x = rand(10, 90);
$pos_y = rand(10, 90);
// 保存拼图位置到 session
$_SESSION['pos_x'] = $pos_x;
$_SESSION['pos_y'] = $pos_y;
// 输出 HTML，包含拼图图片和背景图片
echo '<div id="captcha">';
echo '<img src="captcha.png" alt="captcha" id="captcha-img">';
echo '<div id="captcha-block" style="background-image:url(background.jpg);background-position:'.$pos_x.'% '.$pos_y.'%;"></div>';
echo '</div>';
?>
```
此代码将在页面上显示一个包含拼图图片和背景图片的 div 元素，其中包含一个 id 为 “captcha-img” 的 img 元素和一个 id 为 “captcha-block” 的 div 元素。拼图图片的位置是随机生成的，背景图片的位置则根据拼图位置设置。
3. 编写 JS 代码
在 JS 文件中，我们需要添加拖动事件，使用户可以移动拼图，并在提交表单时进行验证。以下是一个示例代码：
```javascript
// 获取拼图图片和拼图块元素
var captchaImg = document.getElementById('captcha-img');
var captchaBlock = document.getElementById('captcha-block');
// 设置拼图块的初始位置
captchaBlock.style.left = '0px';
// 添加拖动事件
var dragging = false;
var dragStartX, dragStartY;
var dragCurrentX, dragCurrentY;
captchaBlock.addEventListener('mousedown', function(e) {
dragging = true;
dragStartX = e.clientX;
dragStartY = e.clientY;
}, false);
document.body.addEventListener('mousemove', function(e) {
if (dragging) {
captchaBlock.style.left = (dragCurrentX + e.clientX - dragStartX) + 'px';
}
}, false);
document.body.addEventListener('mouseup', function(e) {
if (dragging) {
dragging = false;
dragCurrentX += e.clientX - dragStartX;
dragCurrentY += e.clientY - dragStartY;
// 验证拼图位置
var pos_x = <?php echo $_SESSION['pos_x']; ?>;
var pos_y = <?php echo $_SESSION['pos_y']; ?>;
if (Math.abs(dragCurrentX - pos_x * captchaImg.width / 100) < 5 && Math.abs(dragCurrentY - pos_y * captchaImg.height / 100) < 5) {
alert('验证通过！');
} else {
alert('验证失败，请重试！');
captchaBlock.style.left = '0px';
}
}
}, false);
```
此代码将添加一个 mousedown 事件监听器，用于开始拖动拼图块。当用户移动鼠标时，mousemove 事件将触发，拼图块将跟随鼠标移动。当用户释放鼠标时，mouseup 事件将触发，我们将验证拼图块的位置是否正确，并显示相应的提示消息。
4. 创建 HTML 表单
最后，我们需要创建一个包含上述 PHP 和 JS 代码的 HTML 页面，并在其中添加一个表单元素，以便用户可以提交验证结果。以下是一个示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滑动拼图验证</title>
<style>
#captcha {
position: relative;
width: 300px;
height: 200px;
margin: 50px auto;
border: 1px solid #ccc;
}
#captcha-img {
width: 100%;
height: 100%;
}
#captcha-block {
position: absolute;
width: 100px;
height: 100px;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid #ccc;
cursor: pointer;
}
</style>
</head>
<body>
<form action="verify.php" method="post">
<?php include('captcha.php'); ?>
<input type="submit" value="提交">
</form>
<script src="captcha.js"></script>
</body>
</html>
```
此代码将在页面上显示一个包含拼图和提交按钮的表单元素。当用户提交表单时，verify.php 文件将验证拼图块的位置是否正确，并返回相应的结果。
注意：以上代码仅作为示例，实际应用中需要进行更多的安全验证和优化。
相关推荐
最新推荐
JS实现滑动拼图验证功能完整示例
主要介绍了JS实现滑动拼图验证功能,结合完整实例形式分析了JS滑动拼图验证相关原理、实现步骤与操作注意事项,需要的朋友可以参考下
六首页数字藏品NFT交易网React NextJS网站模板 六首页数字藏品nft交易网反应NextJS网站模板
六首页数字藏品NFT交易网React NextJS网站模板 六首页数字藏品nft交易网反应NextJS网站模板
wireshark安装教程入门
wireshark安装教程入门
基于C++负数据库的隐私保护在线医疗诊断系统
【作品名称】：基于C++负数据库的隐私保护在线医疗诊断系统
【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
【项目介绍】：
基于负数据库的隐私保护在线医疗诊断系统
NDBMedicalSystem 客户端及服务器端
本项目是在保护用户隐私的前提下，完成了对新冠肺炎、乳腺癌、眼疾等多种疾病的智能诊断。
基本的嵌入式操作系统给
任务管理
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
2． 通过python绘制y=e-xsin(2πx)图像
可以使用matplotlib库来绘制这个函数的图像。以下是一段示例代码：
```python
import numpy as np
import matplotlib.pyplot as plt
def func(x):
return np.exp(-x) * np.sin(2 * np.pi * x)
x = np.linspace(0, 5, 500)
y = func(x)
plt.plot(x, y)
plt.xlabel('x')
plt.ylabel('y')
plt.title('y = e^{-x} sin(2πx)')
plt.show()
```
运行这段
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。