用html做个人一进入就弹出需要滑动图片的代码,等于验证码,要滑对才可以使用
时间: 2023-12-03 17:42:43 浏览: 23
以下是一个简单的示例代码,可以实现在页面加载时弹出需要滑动图片的验证码:
```html
<!DOCTYPE html>
<html>
<head>
<title>滑动验证码</title>
<style>
#slider {
background-color: #f2f2f2;
height: 60px;
margin: 50px auto;
position: relative;
width: 300px;
}
#slider div {
background-color: #00bcd4;
color: #fff;
font-size: 24px;
height: 60px;
line-height: 60px;
position: absolute;
text-align: center;
top: 0;
width: 50px;
z-index: 2;
}
#slider img {
height: 60px;
position: absolute;
top: 0;
width: 300px;
z-index: 1;
}
#slider input[type="range"] {
-webkit-appearance: none;
background-color: #f2f2f2;
height: 60px;
margin: 0;
position: absolute;
top: 0;
width: 300px;
z-index: 3;
}
</style>
</head>
<body onload="showSlider()">
<div id="slider">
<div id="handle">>></div>
<img src="https://picsum.photos/300/60" id="slider-img">
<input type="range" min="0" max="250" value="0" step="1" oninput="checkSlider()">
</div>
<script>
var slider = document.getElementById("slider");
var handle = document.getElementById("handle");
var img = document.getElementById("slider-img");
var range = document.querySelector("input[type='range']");
function showSlider() {
slider.style.display = "block";
}
function checkSlider() {
if (range.value >= 250) {
handle.innerHTML = "√";
range.disabled = true;
range.style.display = "none";
img.style.filter = "blur(0)";
alert("验证通过!");
}
}
</script>
</body>
</html>
```
这段代码中,通过 HTML 中的 `onload` 事件,在页面加载时触发 `showSlider` 函数,弹出需要滑动图片的验证码。
滑动条使用 HTML5 中的 `input` 元素,通过设置 `type="range"` 实现滑动效果。在滑动条的 `oninput` 事件中,调用 `checkSlider` 函数,检查滑动条的值是否达到指定的阈值,如果通过验证,则弹出一个提示框。
需要注意的是,这段代码中的图片链接使用的是随机图片链接,实际使用时需要替换成自己的图片链接。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)