JS实现滑动拼图验证

Dear 丶 2023-05-30 06:03 184阅读 0赞

**先看一下效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 2][]

**设置画布滑块属性**

const l = 42, // 滑块边长
    	r = 10, // 滑块半径
    	w = 310, // canvas宽度
    	h = 155, // canvas高度
    	PI = Math.PI
    const L = l + r * 2 // 滑块实际边长

**设置背景图片：**

图片链接地址可以自行更换

function getRandomImg() {
    	return 'https://picsum.photos/300/150/?image=' + getRandomNumberByRange(0, 100)
    }

**CSS部分代码：**

.container {
    	width: 310px;
    	margin: 100px auto;
    }
    
    #msg {
    	width: 100%;
    	line-height: 40px;
    	font-size: 14px;
    	text-align: center;
    }
    
    a:link,
    a:visited,
    a:hover,
    a:active {
    	margin-left: 100px;
    	color: #0366D6;
    }
    
    .block {
    	position: absolute;
    	left: 0;
    	top: 0;
    }
    
    .sliderContainer {
    	position: relative;
    	text-align: center;
    	width: 310px;
    	height: 40px;
    	line-height: 40px;
    	margin-top: 15px;
    	background: #f7f9fa;
    	color: #45494c;
    	border: 1px solid #e4e7eb;
    }
    
    .sliderContainer_active .slider {
    	height: 38px;
    	top: -1px;
    	border: 1px solid #1991FA;
    }
    
    .sliderContainer_active .sliderMask {
    	height: 38px;
    	border-width: 1px;
    }
    
    .sliderContainer_success .slider {
    	height: 38px;
    	top: -1px;
    	border: 1px solid #52CCBA;
    	background-color: #52CCBA !important;
    }
    
    .sliderContainer_success .sliderMask {
    	height: 38px;
    	border: 1px solid #52CCBA;
    	background-color: #D2F4EF;
    }
    
    .sliderContainer_success .sliderIcon {
    	background-position: 0 0 !important;
    }
    
    .sliderContainer_fail .slider {
    	height: 38px;
    	top: -1px;
    	border: 1px solid #f57a7a;
    	background-color: #f57a7a !important;
    }
    
    .sliderContainer_fail .sliderMask {
    	height: 38px;
    	border: 1px solid #f57a7a;
    	background-color: #fce1e1;
    }
    
    .sliderContainer_fail .sliderIcon {
    	background-position: 0 -83px !important;
    }
    
    .sliderContainer_active .sliderText,
    .sliderContainer_success .sliderText,
    .sliderContainer_fail .sliderText {
    	display: none;
    }
    
    .sliderMask {
    	position: absolute;
    	left: 0;
    	top: 0;
    	height: 40px;
    	border: 0 solid #1991FA;
    	background: #D1E9FE;
    }
    
    .slider {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 40px;
    	height: 40px;
    	background: #fff;
    	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    	cursor: pointer;
    	transition: background .2s linear;
    }
    
    .slider:hover {
    	background: #1991FA;
    }
    
    .slider:hover .sliderIcon {
    	background-position: 0 -13px;
    }
    
    .sliderIcon {
    	position: absolute;
    	top: 15px;
    	left: 13px;
    	width: 14px;
    	height: 10px;
    	background: url(img/tb.png) 0 -26px;
    	background-size: 34px 471px;
    }
    
    .refreshIcon {
    	position: absolute;
    	right: 0;
    	top: 0;
    	width: 34px;
    	height: 34px;
    	cursor: pointer;
    	background: url(img/tb.png) 0 -437px;
    	background-size: 34px 471px;
    }

**页面，页面只用放一个div就可以了**

**js部分代码，包括验证是否正确**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191107161526745.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191107161541607.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/201911071615588.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70