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

前言

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样式的影响。

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

案例一效果图

案例二(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>元素将具有限制宽度的特性，宽度将根据视窗宽度和定义的最小和最大宽度进行调整，以便在不同设备和屏幕尺寸下呈现出不同的大小。

案例二效果图

功能效果图

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)

效果图

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;
}