html登录写滑块认证

最新推荐文章于 2024-07-26 15:12:30 发布

小四是个程序员

最新推荐文章于 2024-07-26 15:12:30 发布

阅读量1.4k

点赞数

分类专栏：个人笔记文章标签： html jquery js

本文链接：https://blog.csdn.net/weixin_42322648/article/details/105749411

版权

本文介绍了HTML登录时采用的滑块认证机制，旨在防止恶意破解和机器人操作。详细阐述了滑块认证的实现过程，包括HTML页面的编写、jQuery库的使用，以及需要注意的文件引入顺序和图片资源问题。

摘要由CSDN通过智能技术生成

一、作用

我们在登录网站的时候一般会让我们滑动认证或者是验证码认证，这个主要是可以防止恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试，实际上是现在很多网站通行的方式，验证防止你是机器人（程序），属于安全验证，和验证码差不多，又比验证码方便。

二、实现

html页面：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.slider.min.js"></script>
		<style type="text/css">
			body,
			div {
				margin: 0;
				padding: 0;
			}
			
			.ui-slider-wrap {
				background: #e8e8e8;
				position: relative;
			}
			
			.ui-slider-wrap .ui-slider-bg {
				width: 0;
			}
			
			.ui-slider-wrap .ui-slider-btn {
				position: absolute;
				top: 0;
				left: 0;
				cursor: move;
				text-align: center;
				border: 1px solid #ccc;
				background: #fff;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				-ms-box-sizing: border-box;
				-o-box-sizing: border-box;
				box-sizing: border-box;
			}
			
			.ui-slider-wrap .ui-slider-btn {
				background: #fff url(../img/slider.png) no-repeat center;
			}
			
			.ui-slider-wrap .ui-slider-btn.success {
				background-image: url(../img/success.png);
			}
			
			.ui-slider-wrap .ui-slider-text {

最低0.47元/天解锁文章

小四是个程序员

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
html登录写滑块认证

一、作用我们在登录网站的时候一般会让我们滑动认证或者是验证码认证，这个主要是可以防止恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试，实际上是现在很多网站通行的方式，验证防止你是机器人（程序），属于安全验证，和验证码差不多，又比验证码方便。二、实现html页面：<!DOCTYPE html><html>...
复制链接

扫一扫

专栏目录