验证码代码块+长时间未操作自动返回界面

最新推荐文章于 2024-10-01 20:12:28 发布

Q1348633965

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量605

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/Q1348633/article/details/121674175

版权

html界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #codeInput{
            height: 29px;
        }
        #button{
            height: 35px;
        }
     #code{
         height: 33px;
         display: inline-block;
         border: 2px solid black;
         width: 80px;
         text-align: center;
         line-height: 33px;
     }
        #correct{
            color: green;
        }
     #errorTips{
         color: red;
     }
     .overtime{
         font-size: 12px;
         color: black;
         opacity: 0.6;
     }
    </style>
</head>
<body>
<div >
    <div class="yzm">
        <input id="codeInput" type="text">
        <span id="code">点击获取</span>
        <button id="button">验证</button>
        <span id="correct"></span>
        <span id="errorTips"></span>

    </div>
    <div class="overtime">
    你有<span id="msg1">0</span>分钟没有动作了!<br>
    再过<span id="msg2">0</span>分钟，页面将自动跳转首页!<br>
    快动下鼠标!
    </div>
</div>
<script src="js/jquery.js"></script>
<script src="js/yanzhenma.js"></script>
<script src="js/overtime.js"></script>
</body>
</html>

长时间未操作自动返回界面

/*//长时间未操作自动返回登录
let currtentTime = new Date().getTime(),
	lastTime = new Date().getTime(),
	diff = 1000;//设置时间
$(document).on('mouseover',function(){
	lastTime = new Date().getTime();
});
let timer = setInterval(function(){
	currentTime = new Date().getTime();
	if(currentTime - lastTime > diff){
		alert("您已经长时间未操作，已登出系统，请重新登录")
		$(location).attr('href','index.html');  //跳转到指定目录
		clearInterval(timer);
	}
},1000);*/

//指定多少毫秒无动作将跳转
var timeout =2000;
//记录当前时间
var occurtime=new Date().getTime() ;
//更新最新动作时间->用鼠标没动来更新时间
document.onmousemove=function(){
	occurtime=new Date().getTime() ;
}
//用窗口失去焦点来更新时间
/*window.οnblur=function(){
       occurtime=new Date().getTime() ;
}*/
//判断无动作时间并跳转
function goUrl(){
	var a = parseInt(new Date().getTime() - occurtime) ;
	//页面显示多少秒跳转
	$("#msg1").html((a/2000).toFixed(1));
	$("#msg2").html(((timeout - a)/2000).toFixed(1))
	if(a>timeout){
		window.location.href="index.html";
		alert("您已经长时间未操作，已登出系统，请重新登录");
	}
}
window.setInterval("goUrl()",100);

验证码代码块

// 声明一个变量用于存储生成的验证码
$('#code').unbind('click').bind('click',function () {
     changeImg();
}) ;
function changeImg(){
// 验证码组成库
    var arrays=new Array('1','2','3','4','5','6','7','8','9','0','!','@','#','$','%','^','&','*','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
// 重新初始化验证码
    code ='';
// 随机从数组中获取四个元素组成验证码
    for(var i = 0; i<4; i++){undefined
// 随机获取一个数组的下标
        var r = parseInt(Math.random()*arrays.length);
        code += arrays[r];
    }
// 验证码写入span区域
    $('#code').html(code);
}

// 验证验证码
$('#button').unbind('click').bind('click',function () {
   yanzhen();
});
function yanzhen() {
    var code=$('#code').text();
    var codeinput=$('#codeInput').val();
    var correct;
    var error;
    if (code==codeinput){
        correct='验证码一致';
        $('#correct').html(correct);
        $('#correct').show();
        $('#errorTips').hide()
    }else{
        error='验证码输入错误，请重新输入';
        $("#errorTips").html(error);
        $('#correct').hide();
        $("#errorTips").show();
    }
}