web前端之行为验证码、不同设备和屏幕尺寸呈现不同大小、元素宽度根据视口宽度进行调整、元素或图片裁剪、图片验证码

2024-03-24 09:52
文章标签 进行 大小 元素 图片 web 行为 裁剪 前端 呈现 frontend 设备 不同 调整 验证码 屏幕 尺寸 宽度 视口

本文主要是介绍web前端之行为验证码、不同设备和屏幕尺寸呈现不同大小、元素宽度根据视口宽度进行调整、元素或图片裁剪、图片验证码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

MENU

  • 前言
  • 版本一(html+JS+css)
  • 版本二(html+JS+css+canvas)

前言

1、版本一的样式比较齐全；
2、版本二的JS逻辑和功能效果比较完善，且是别人的代码，后续会对样式进行完善。[Gitee | 哔哩哔哩]；
3、两个版本各有千秋，主要学习里面的一些技巧，这里主要介绍版本一的样式技巧；
4、行为验证码一般是后端实现，而且大概率是使用第三方插件，因为涉及到的逻辑和内容比较多，前后端实现起来都比较麻烦。

版本一(html+JS+css)

案例公共样式

body {margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;min-height: 100vh;
}

案例一(clip-path裁剪的应用)

<style>.clip_path {width: 300px;height: 300px;background-color: #ff0000;}.clip_path:first-child {float: left;background-color: #0000ff;clip-path: inset(50px 20px 30px 40px round 10px);}
</style><div><div class="clip_path"></div><div class="clip_path"></div>
</div>

案例一解析

代码块中包含两个<div>元素，每个元素都有类名为clip_path。此外，还有一些CSS样式被应用于这些元素。

CSS样式部分
1、clip_path类指定了一个固定的宽度(300像素)、高度(300像素)和背景颜色(红色)的区域。
2、clip_path:first-child选择器用于选择第一个具有类名clip_path的元素，并对其应用特定样式。
2.1、float: left;将第一个元素左浮动，使其在其右侧的元素之前显示。
2.2、background-color: #0000ff;将第一个元素的背景颜色更改为蓝色。
2.3、clip-path: inset(50px 20px 30px 40px round 10px);将剪切路径应用于第一个元素，剪切路径的形状是一个矩形，内边距为50px 20px 30px 40px，并且角是圆形的，半径为10px。

HTML部分
两个<div>元素被包含在一个外部<div>中。
每个<div>元素都有类名为clip_path，因此它们都受到了相同的CSS样式的影响。

综上所述，代码将显示两个相同大小的红色方块，但第一个方块的背景颜色为蓝色，并具有一种剪切路径，使其内部形成一个圆角矩形区域。

案例一效果图

case11

案例二(clamp最大值最小值的应用)

<style>.clamp {width: clamp(300px, 50vw, 600px);height: 300px;background-color: #ff0000;}
</style><div class="clamp"></div>

案例二解析

一段简单的HTML和CSS代码段，用于创建一个具有限制宽度的元素。

1、<style>标签用于在HTML文档中定义CSS样式。
2、.clamp是一个CSS类选择器，它用于选择具有类名为"clamp"的HTML元素。
3、width: clamp(300px, 50vw, 600px);是一个CSS属性，它使用clamp()函数来设置元素的宽度。clamp()函数接受三个参数，分别是最小宽度、首选宽度和最大宽度。在这个例子中，元素的宽度将被限制在300像素、视窗宽度的50%和600像素之间，以保证在不同设备和屏幕尺寸下有不同的大小。
4、height: 300px;设置元素的高度为300像素。
5、background-color: #ff0000;设置元素的背景颜色为红色。

<div class=“clamp”></div>是一个HTML<div>元素，它具有一个类名为"clamp"，因此应用了上述定义的CSS样式。这个<div>元素将具有限制宽度的特性，宽度将根据视窗宽度和定义的最小和最大宽度进行调整，以便在不同设备和屏幕尺寸下呈现出不同的大小。

案例二效果图

case21

case22

功能效果图

imageverificationCodeV11

imageverificationCodeV12

imageverificationCodeV13

html

<div id="captcha"><div id="handle"><span onmousedown="onmousedownFn()" mousemove="mousemoveFn()"></span></div>
</div>

JavaScript

const captcha = document.querySelector('#captcha');
const handle = document.querySelector('#handle');
const button = document.querySelector('#handle span');
const oLeft = handle.getBoundingClientRect().left;
const buttonWidth = button.getBoundingClientRect().width;
let flag = false;function onmousedownFn() {flag = true;
}window.addEventListener('mousemove', ({ clientX }) => {if (flag) {captcha.style.setProperty('--moved', `${clientX - oLeft - buttonWidth / 2}px`);}
});window.addEventListener('mouseup', ({ clientX }) => {if (flag) {const dis = clientX - oLeft;if (dis >= 430 && dis <= 450) {captcha.classList.add('passed');alert('验证通过！');} else {captcha.style.setProperty('--moved', '0px');}flag = false;}
});

style

* {margin: 0;padding: 0;
}body {--width: 400px;--height: 260px;--puzzle-width: 80px;--puzzle-height: 80px;--moved: 0px;background-color: #008b8b;width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;
}#captcha {width: var(--width);height: var(--height);background-image: url('https://cn.bing.com/th?id=OHR.AlmondBloom_ZH-CN9441550492_1920x1080.jpg');background-size: cover;background-position: center;position: relative;border-radius: 4px;box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}#captcha::before,
#captcha::after {display: flex;position: absolute;content: '';width: inherit;height: inherit;background-image: inherit;background-size: inherit;background-position: inherit;clip-path: inset( calc((var(--height) - var(--puzzle-height)) / 2) var(--puzzle-width) calc((var(--height) - var(--puzzle-height)) / 2) calc(var(--width) - var(--puzzle-width) * 2));
}#captcha::after {transform: translateX(clamp( calc(var(--width) * -1), calc(var(--width) * -1 + var(--moved)), var(--puzzle-width)));transition: .25s all ease-in-out;cursor: pointer;
}#captcha:active::after {transition: none;
}#captcha::before {background-color: rgba(0, 0, 0, .6);background-blend-mode: multiply;
}#handle {height: 30px;width: calc(var(--width) + var(--puzzle-width) * 2);border-radius: 18px;background-color: #eeeeee;box-shadow: inset 0 0 12px rgba(0, 0, 0, .2);border: 3px solid #eeeeee;position: absolute;bottom: -50px;left: calc(var(--puzzle-width) * 2 * -1);
}#handle span {width: var(--puzzle-width);height: inherit;display: block;border-radius: inherit;background-color: #fff;box-shadow: 0 0 6px rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .3);cursor: move;transform: translateX( clamp( 0px, var(--moved), calc(var(--width) + var(--puzzle-width))));cursor: pointer;transition: .25s all ease-in-out;
}#captcha:active #handle span {transition: none;
}#captcha.passed::before,
#captcha.passed::after,
#captcha.passed #handle {opacity: 0;
}

版本二(html+JS+css+canvas)

效果图

imageverificationCodeV21

imageverificationCodeV22

imageverificationCodeV23

html

<div class="container"><div id="captcha" style="position: relative;"></div><div id="msg"></div>
</div><script src="./indexV2.js"></script>
<script>captcha.init(document.getElementById('captcha'), function() {document.getElementById('msg').innerHTML = '验证成功';setTimeout(() => {document.getElementById('msg').innerHTML = '';}, 2000);}, function() {document.getElementById('msg').innerHTML = '验证失败';setTimeout(() => {document.getElementById('msg').innerHTML = '';}, 1000);})
</script>

JavaScript

(function(win) {// 滑块边长let l = 42,// 滑块半径r = 10,// canvas宽度w = 310,//canvas高度h = 155,PI = Math.PI;// 滑块的实际边长const ll = l + r * 2;// 获取指定区间内的随机数function getRandomNumberByRange(start, end) {return Math.round(Math.random() * (end - start) + start);}// 创建元素function createElement(tagName) {return document.createElement(tagName);}// 创建画布function createCanvas(width, height) {const canvas = createElement('canvas');canvas.width = width;canvas.height = height;return canvas;}// 获取随机图片function getRandomImg() {// 这个网站可以生成随机图片return 'https://picsum.photos/300/150/?image=' + getRandomNumberByRange(0, 100);}// 创建图片function createImg(onload) {const img = createElement('img');img.crossOrigin = 'Anonymous';img.onload = onload;img.onerror = () => {img.src = getRandomImg();}img.src = getRandomImg();return img;}// 添加样式function addClass(tag, className) {tag.classList.add(className);}// 移除样式function removeClass(tag, className) {tag.classList.remove(className);}// 绘制function draw(ctx, operation, x, y) {ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(x + l / 2, y);ctx.arc(x + l / 2, y - r + 2, r, 0, 2 * PI);ctx.lineTo(x + l / 2, y);ctx.lineTo(x + l, y);ctx.lineTo(x + l, y + l / 2);ctx.arc(x + l + r - 2, y + l / 2, r, 0, 2 * PI);ctx.lineTo(x + l, y + l / 2);ctx.lineTo(x + l, y + l);ctx.lineTo(x, y + l);ctx.lineTo(x, y);ctx.fillStyle = '#fff';ctx[operation]();ctx.beginPath();ctx.arc(x, y + l / 2, r, 1.5 * PI, 0.5 * PI);ctx.globalCompositeOperation = 'xor';ctx.fill();}// 求和function sum(x, y) {return x + y;}// 求平方function square(x) {return x * x;}// 验证码类class captcha {// 构造器constructor(el, success, fail) {this.el = el;this.success = success;this.fail = fail;}// 初始化init() {this.initDOM();this.initImg();this.draw();this.bindEvents();}// 初始化DOMinitDOM() {const canvas = createCanvas(w, h),block = canvas.cloneNode(true),sliderContainer = createElement('div'),sliderMask = createElement('div'),slider = createElement('div'),refreshIcon = createElement('div'),sliderIcon = createElement('span'),text = createElement('span');block.className = 'block';sliderContainer.className = 'slider-container';sliderMask.className = 'slider-mask';slider.className = 'slider';refreshIcon.className = 'refresh-icon';sliderIcon.className = 'slider-icon';text.className = 'slider-text';text.innerHTML = '向右滑动滑块填充拼图';const el = this.el;el.appendChild(canvas);el.appendChild(refreshIcon);el.appendChild(block);slider.appendChild(sliderIcon);sliderMask.appendChild(slider);sliderContainer.appendChild(sliderMask);sliderContainer.appendChild(text);el.appendChild(sliderContainer);Object.assign(this, {canvas,block,sliderContainer,refreshIcon,slider,sliderMask,sliderIcon,text,canvasCtx: canvas.getContext('2d'),blockCtx: block.getContext('2d')});}// 初始化图像initImg() {const img = createImg(() => {this.canvasCtx.drawImage(img, 0, 0, w, h);this.blockCtx.drawImage(img, 0, 0, w, h);const y = this.y - r * 2 + 2;const imageData = this.blockCtx.getImageData(this.x, y, ll, ll);this.block.width = ll;this.blockCtx.putImageData(imageData, 0, y);});this.img = img;}// 绘画draw() {this.x = getRandomNumberByRange(ll + 10, w - (ll + 10));this.y = getRandomNumberByRange(10 + r * 2, h - (ll + 10));draw(this.canvasCtx, 'fill', this.x, this.y);draw(this.blockCtx, 'clip', this.x, this.y);}// 清除clean() {this.canvasCtx.clearRect(0, 0, w, h);this.blockCtx.clearRect(0, 0, w, h);this.block.width = w;}// 绑定事件bindEvents() {this.el.onselectstart = () => false;this.refreshIcon.onclick = () => {this.reset();}let originX, originY, trail = [],isMouseDown = false;this.slider.addEventListener('mousedown', function(e) {originX = e.x;originY = e.y;isMouseDown = true;});document.addEventListener('mousemove', (e) => {if (!isMouseDown) return false;const moveX = e.x - originX;const moveY = e.y - originY;if (moveX < 0 || moveX + 38 >= w) return false;this.slider.style.left = moveX + 'px';var blockLeft = (w - 40 - 20) / (w - 40) * moveX;this.block.style.left = blockLeft + 'px';addClass(this.sliderContainer, 'slider-container-active');this.sliderMask.style.width = moveX + 'px';trail.push(moveY);});document.addEventListener('mouseup', (e) => {if (!isMouseDown) return false;isMouseDown = false;if (e.x == originX) return false;removeClass(this.sliderContainer, 'slider-container-active');this.trail = trail;const spliced = this.verify();if (spliced) {addClass(this.sliderContainer, 'slider-container-success');this.success && this.success();} else {addClass(this.sliderContainer, 'slider-container-fail');this.fail && this.fail();setTimeout(() => {this.reset();}, 1000);}});}// 重置reset() {this.sliderContainer.className = 'slider-container';this.slider.style.left = 0;this.block.style.left = 0;this.sliderMask.style.width = 0;this.clean();this.img.src = getRandomImg();this.draw();}// 验证verify() {const left = parseInt(this.block.style.left);//10表示容错率，值越小，需要拼得越精确return Math.abs(left - this.x) < 10;}}win.captcha = {init: function(element, success, fail) {new captcha(element, success, fail).init();}}
}(window));

style

* {margin: 0;padding: 0;background-color: #333333;
}body {/* 方便演示，满屏居中 */height: 100vh;display: flex;justify-content: center;align-items: center;
}/* 小拼图 */.block {position: absolute;left: 0;top: 0;
}/* 滑动条 */.slider-container {position: relative;text-align: center;width: 310px;height: 40px;line-height: 40px;margin-top: 15px;background-color: #f7f9fa;color: #45454c;border: 1px solid #e4e7eb;
}.slider-mask {position: absolute;left: 0;top: 0;height: 40px;border: 0px solid #1991fa;background-color: #d1e9fe;
}.slider {position: absolute;left: 0;top: 0;width: 40px;height: 40px;background: #fff;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);cursor: pointer;transition: background 0.2s linear;
}.slider-icon {position: absolute;left: 13px;top: 15px;width: 14px;height: 10px;background: url(/images/icon_light.png) 0 -26px;background-size: 34px 471px;
}/* 滑动条活动态 */.slider-container-active .slider {height: 38px;top: -1px;border: 1px solid #1991fa;
}.slider-container-active .slider-mask {height: 38px;border-width: 1px;
}/* 滑动条成功态 */.slider-container-success .slider {height: 38px;top: -1px;border: 1px solid #52ccba;background-color: #52ccba !important;
}.slider-container-success .slider-mask {height: 38px;border: 1px solid #52ccba;background-color: #d2f4ef;
}/* 成功图标 */.slider-container-success .slider-icon {background-position: 0 0 !important;
}/* 滑动条失败态 */.slider-container-fail .slider {height: 38px;top: -1px;border: 1px solid #f57a7a;background-color: #f57a7a !important;
}.slider-container-fail .slider-mask {height: 38px;border: 1px solid #f57a7a;background-color: #fce1e1;
}/* 失败图标 */.slider-container-fail .slider-icon {background-position: 0 -83px !important;
}.slider-container-active .slider-text,
.slider-container-success .slider-text,
.slider-container-fail .slider-text {display: none;
}.slider:hover {background: #1991fa;
}.slider:hover .slider-icon {background-position: 0 -13px;
}.refresh-icon {position: absolute;right: 0;top: 0;width: 34px;height: 34px;background: url(/images/icon_light.png) 0 -437px;background-size: 34px 471px;cursor: pointer;
}#msg {height: 20px;line-height: 20px;text-align: center;margin-top: 15px;
}

这篇关于web前端之行为验证码、不同设备和屏幕尺寸呈现不同大小、元素宽度根据视口宽度进行调整、元素或图片裁剪、图片验证码的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/841239。

相关文章

SpringBoot结合Docker进行容器化处理指南

SpringBoot结合Docker进行容器化处理指南

《SpringBoot结合Docker进行容器化处理指南》在当今快速发展的软件工程领域,SpringBoot和Docker已经成为现代Java开发者的必备工具,本文将深入讲解如何将一个SpringBo... 目录前言一、为什么选择 Spring Bootjavascript + docker1. 快速部署与
阅读更多...
linux解压缩 xxx.jar文件进行内部操作过程

linux解压缩 xxx.jar文件进行内部操作过程

《linux解压缩xxx.jar文件进行内部操作过程》：本文主要介绍linux解压缩xxx.jar文件进行内部操作,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、解压文件二、压缩文件总结一、解压文件1、把 xxx.jar 文件放在服务器上，并进入当前目录#
阅读更多...
SpringBoot中如何使用Assert进行断言校验

SpringBoot中如何使用Assert进行断言校验

《SpringBoot中如何使用Assert进行断言校验》Java提供了内置的assert机制,而Spring框架也提供了更强大的Assert工具类来帮助开发者进行参数校验和状态检查,下... 目录前言一、Java 原生assert简介1.1 使用方式1.2 示例代码1.3 优缺点分析二、Spring Fr
阅读更多...
基于Python实现一个图片拆分工具

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片，默认是输出到项目文件夹中，可以自己选择其他的文件夹，选择需要拆分的行数和列数，可以通过
阅读更多...
C# 比较两个list 之间元素差异的常用方法

C# 比较两个list 之间元素差异的常用方法

《C#比较两个list之间元素差异的常用方法》：本文主要介绍C#比较两个list之间元素差异,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. 使用Except方法2. 使用Except的逆操作3. 使用LINQ的Join,GroupJoin
阅读更多...
Golang如何对cron进行二次封装实现指定时间执行定时任务

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》：本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景
阅读更多...
利用Python脚本实现批量将图片转换为WebP格式

利用Python脚本实现批量将图片转换为WebP格式

《利用Python脚本实现批量将图片转换为WebP格式》Python语言的简洁语法和库支持使其成为图像处理的理想选择,本文将介绍如何利用Python实现批量将图片转换为WebP格式的脚本,WebP作为... 目录简介1. python在图像处理中的应用2. WebP格式的原理和优势2.1 WebP格式与传统
阅读更多...
python3如何找到字典的下标index、获取list中指定元素的位置索引

python3如何找到字典的下标index、获取list中指定元素的位置索引

《python3如何找到字典的下标index、获取list中指定元素的位置索引》：本文主要介绍python3如何找到字典的下标index、获取list中指定元素的位置索引问题,具有很好的参考价值,... 目录enumerate()找到字典的下标 index获取list中指定元素的位置索引总结enumerat
阅读更多...
前端如何通过nginx访问本地端口

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》：本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载（1）下载地址（2）系统选择（3）版本选择2、安装部署（1）解压（2）配置文件修改（3）启动（4）
阅读更多...
如何使用Maven创建web目录结构

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》：本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2