JavaScript+html实现前端页面滑动验证（2）
程序员文章站
2022-07-03 17:31:09
本文实例为大家分享了炫酷的前端页面滑动验证的具体代码，供大家参考，具体内容如下分享炫酷的前端页面滑动验证前面已经发过，这里再发一种，只是特效不一样还是直接上代码：<%@ page content...
本文实例为大家分享了炫酷的前端页面滑动验证的具体代码，供大家参考，具体内容如下
分享炫酷的前端页面滑动验证
前面已经发过，这里再发一种，只是特效不一样
还是直接上代码：
<%@ page contenttype="text/html;charset=utf-8" language="java" %>
<html>
<head>
<title>title</title>
<style>
/* 滑动控件容器,灰色背景 */
#dragcontainer {
position: relative;
display: inline-block;
background: #e8e8e8;
width: 300px;
height: 33px;
border: 2px solid #e8e8e8;
}
/* 滑块左边部分,绿色背景 */
#dragbg {
position: absolute;
background-color: #7ac23c;
width: 0px;
height: 100%;
}
/* 滑动验证容器文本 */
#dragtext {
position: absolute;
width: 100%;
height: 100%;
/* 文字水平居中 */
text-align: center;
/* 文字垂直居中,这里不能用百分比,因为百分比是相对原始line-height的,而非div高度 */
line-height: 33px;
/* 文本不允许选中 */
user-select: none;
-webkit-user-select: none;
}
/* 滑块 */
#draghandler {
position: absolute;
width: 40px;
height: 100%;
cursor: move;
}
/* 滑块初始背景 */
.draghandlerbg {
background: #fff no-repeat center url("data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaa3hpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduuns1jmdixidc5lje1ntc3miwgmjaxnc8wms8xmy0xoto0ndowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wtu09imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9tbs8iihhtbg5zonn0umvmpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljavc1r5cguvumvzb3vyy2vszwyjiib4bwxuczp4bxa9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc8iihhtce1nok9yawdpbmfsrg9jdw1lbnrjrd0ieg1wlmrpzdo0zdhlnwy5my05nmi0ltrlnwqtogfjyi03zty4ogyymtu2ztyiihhtce1nokrvy3vtzw50suq9inhtcc5kawq6nteyntvemurgmkvfmtffnei5ndbcmjq2m0exmdq1ouyiihhtce1nokluc3rhbmnlsuq9inhtcc5pawq6nteyntvemungmkvfmtffnei5ndbcmjq2m0exmdq1ouyiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wiendidiwmtqgke1hy2ludg9zackipia8eg1wtu06rgvyaxzlzezyb20gc3rszwy6aw5zdgfuy2vjrd0ieg1wlmlpzdo2mtc5nznmzs02otqxltqyotytytiwni02ndi2ytnkowu5ymuiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ngq4ztvmotmtotzinc00ztvklthhy2itn2u2odhmmje1nmu2ii8+idwvcmrmokrlc2nyaxb0aw9upia8l3jkzjpsrey+idwvedp4bxbtzxrhpia8p3hwywnrzxqgzw5kpsjyij8+yirg4aaaalfjrefuenpi/p//pwmlgimbqka9a+bonfsiiboxkcinh+ycacdubyoswaiopxwjciacfegbqz1avbsis5otk/8tkmnejwwgqiugtquijwaxuf3yx3xygieiflwhpkyawb+i1xgswxuligf9a7mqkbwtlhbxaflhgpgqeactkmncu6al9d8wii4hovk3itkwjaxwumloogqhmse45viq2kubuasoyc4wf+ouyxz6mqkgwaan9mirurecxgaaaabjru5erkjggg==");
}
/* 验证成功时的滑块背景 有√*/
.draghandlerokbg {
background: #fff no-repeat center url("data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaa3hpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduuns1jmdixidc5lje1ntc3miwgmjaxnc8wms8xmy0xoto0ndowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wtu09imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9tbs8iihhtbg5zonn0umvmpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljavc1r5cguvumvzb3vyy2vszwyjiib4bwxuczp4bxa9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc8iihhtce1nok9yawdpbmfsrg9jdw1lbnrjrd0ieg1wlmrpzdo0zdhlnwy5my05nmi0ltrlnwqtogfjyi03zty4ogyymtu2ztyiihhtce1nokrvy3vtzw50suq9inhtcc5kawq6ndlbrdi3njvgmkq2mtffnei5ndbcmjq2m0exmdq1ouyiihhtce1nokluc3rhbmnlsuq9inhtcc5pawq6ndlbrdi3njrgmkq2mtffnei5ndbcmjq2m0exmdq1ouyiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wiendidiwmtqgke1hy2ludg9zackipia8eg1wtu06rgvyaxzlzezyb20gc3rszwy6aw5zdgfuy2vjrd0ieg1wlmlpzdphnwezmwnhmc1hymviltqxnwetytewzs04y2u5nzrln2q4yteiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ngq4ztvmotmtotzinc00ztvklthhy2itn2u2odhmmje1nmu2ii8+idwvcmrmokrlc2nyaxb0aw9upia8l3jkzjpsrey+idwvedp4bxbtzxrhpia8p3hwywnrzxqgzw5kpsjyij8+k+shwwaaaszjrefuenpi/p//pwmykd8uzw+kuodyeyglomivghg/em/pthx0efk9i8waoez+idupiimy8in1qjwenogj3aco5gnabmbahlgaxa4gq5igannj0mwavtsx7ikyy7l2unujaf+amamj78aedtbiwgyg5gbifcsxfczoabmcy4a4gojnh0d6dpk4ixnsvihafsdoaelrajrjgjp/awpbhmhejiqnwyrmuznq4vqgdqqxk0ia/0i17wjipmqntnbeagmlqiwiqa2vgww7qppbekgxsajiieusbnnsbdweay9mefgmmgbk00e0izta7ahectdq58mrua6wllggfmompig1qfegwaixgzo8guhiysmwqgsazgwhaezhicizoabkjkqym0caaqdgx279jf50aaaaaabjru5erkjggg==");
}
</style>
</head>
<body>
<div id="dragcontainer"><!-- 容器初始背景 -->
<div id="dragbg"></div><!-- 绿色背景 -->
<div id="dragtext"></div><!-- 滑动容器文本 -->
<div id="draghandler" class="draghandlerbg"></div>
</div> <!-- 滑块 滑块初始背景 -->
</body>
<script>
//加载（事件会在页面加载完成后触发）
window.onload = function() {
//获取滑动控件容器,灰色背景
var dragcontainer = document.getelementbyid("dragcontainer");
//获取滑块左边部分,绿色背景
var dragbg = document.getelementbyid("dragbg");
//获取滑动验证容器文本
var dragtext = document.getelementbyid("dragtext");
//获取滑块
var draghandler = document.getelementbyid("draghandler");
//滑块的最大偏移量 = 滑动验证容器文本长度 - 滑块长度
var maxhandleroffset = dragcontainer.clientwidth - draghandler.clientwidth;
//是否验证成功的标记
var isvertifysucc = false;
initdrag();
function initdrag() {
//在滑动验证容器文本写入“拖动滑块验证”
dragtext.textcontent = "拖动滑块验证";
//给滑块添加鼠标按下监听
draghandler.addeventlistener("mousedown", ondraghandlermousedown);
}
//选中滑块
function ondraghandlermousedown() {
//鼠标移动监听
document.addeventlistener("mousemove", ondraghandlermousemove);
//鼠标松开监听
document.addeventlistener("mouseup", ondraghandlermouseup);
}
//滑块移动
function ondraghandlermousemove() {
/*
html元素不存在width属性,只有clientwidth
offsetx是相对当前元素的,clientx和pagex是相对其父元素的
*/
//滑块移动量
var left = event.clientx - draghandler.clientwidth / 2;
//
if(left < 0) {
left = 0;
//如果滑块移动量 > 滑块的最大偏移量 ，则调用验证成功函数
} else if(left > maxhandleroffset) {
left = maxhandleroffset;
verifysucc();
}
//滑块移动量
draghandler.style.left = left + "px";
//绿色背景的长度
dragbg.style.width = draghandler.style.left;
}
//松开滑块函数
function ondraghandlermouseup() {
//移除鼠标移动监听
document.removeeventlistener("mousemove", ondraghandlermousemove);
//移除鼠标松开监听
document.removeeventlistener("mouseup", ondraghandlermouseup);
//初始化滑块移动量
draghandler.style.left = 0;
//初始化绿色背景
dragbg.style.width = 0;
}
//验证成功
function verifysucc() {
//成功标记，不可回弹
isvertifysucc = false;
//容器文本的文字改为白色“验证通过”字体
dragtext.textcontent = "验证通过";
dragtext.style.color = "white";
//验证通过的滑块背景
draghandler.setattribute("class", "draghandlerokbg");
//移除鼠标按下监听
draghandler.removeeventlistener("mousedown", ondraghandlermousedown);
//移除 鼠标移动监听
document.removeeventlistener("mousemove", ondraghandlermousemove);
//移除鼠标松开监听
document.removeeventlistener("mouseup", ondraghandlermouseup);
// 匹配成功以后写入你要跳转的页面
//window.location.href="成功页面.html" rel="external nofollow" ;
};
}
</script>
</html>
效果如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。