자바 미끄럼 검증 잠 금 해제 실현
5861 단어 자바검증 하 다.자 물 쇠 를 풀다
1.html:
<div class="drag">
<div class="bg"></div>
<div class="text" onselectstart="return false;"> </div>
<div class="dragBtn">>></div>
</div>
<script>
/* */
var successRand = '';
// 、 DOM
var
box = document.querySelector(".drag"),//
bg = document.querySelector(".bg"),//
text = document.querySelector(".text"),//
btn = document.querySelector(".dragBtn"),//
success = false,//
distance = box.offsetWidth - btn.offsetWidth;// ( )
// 、
btn.onmousedown = function(e){
//1.
btn.style.transition = "";
bg.style.transition ="";
// :clientX , ( ) 。
//2. ,
var e = e || window.event;
var downX = e.clientX;
// 、
document.onmousemove = function(e){
var e = e || window.event;
//1.
var moveX = e.clientX;
//2. ( - )
var offsetX = moveX - downX;
//3. :
if( offsetX > distance){
offsetX = distance;// ,
}else if( offsetX < 0){
offsetX = 0;// ,
}
//4.
btn.style.left = offsetX + "px";
bg.style.width = offsetX + "px";
// =
if( offsetX == distance){
//1.
text.innerHTML = " ";
text.style.color = "#fff";
btn.innerHTML = "√";
btn.style.color = "green";
bg.style.backgroundColor = "lightgreen";
//2.
success = true;
// , ( )
btn.onmousedown = null;
document.onmousemove = null;
//3.
setTimeout(function(){
successRand = new Date().getTime() + Math.random();
var obj = {};
obj.rand = successRand;
$.ajax({
type: "post",
url: projectName + "/loginC/setRand",
data: JSON.stringify(obj),
datatype: 'json',
contentType: "application/json",
success: function (data) {
//console.log(vm.parent.success);
//console.log(vm.isTest);
if (data.success == true) {
} else {
layer.alert(data.message);
// change_authimage();
}
},
error: function () {
layer.alert(" ");
}
});
},1);
}
}
// 、
document.onmouseup = function(e){
// , ,
if(success){
return;
}else{
// , ( 1s )
btn.style.left = 0;
bg.style.width = 0;
btn.style.transition = "left 1s ease";
bg.style.transition = "width 1s ease";
}
// , , 。
document.onmousemove = null;
document.onmouseup = null;
}
}
//
function restDragBtn() {
/*btn.style.left = 0;
bg.style.width = 0;
btn.style.transition = "left 1s ease";
bg.style.transition = "width 1s ease";
text.innerHTML = " ";
btn.innerHTML = ">>>";
text.style.color = "#a9a9a9";*/
location.reload();
}
</script>
2.백 엔 드:
@RequestMapping(value="/setRand",method = RequestMethod.POST)
@ResponseBody
@ApiOperation(value = " ")
//@ApiImplicitParam(paramType = "query",name= "username" ,value = " ",dataType = "string")
/*public void userLogin(@RequestParam(value = "username" , required = false) String username,
@RequestParam(value = "password" , required = false) String password)*/
public Message setRand(@RequestBody JSONObject json,HttpServletRequest request){
Message message = new Message();
String rand = json.getString("rand");
if(StringUtils.isNotBlank(rand)){
// redis
HttpSession httpSession = request.getSession();
redisUtil.set(httpSession.getId() + ".rand",rand);
redisUtil.expire(httpSession.getId() + ".rand",60);
message.setSuccess(true);
}else{
message.setMessage(" , ");
}
return message;
}
3.로그 인 인증 시:
//
String randInput = json.getString("rand");
String rand = (String) redisUtil.get(httpSession.getId() + ".rand");
if(randInput==null||!randInput.equals(rand)) {
message.setMessage(" ");
//
redisUtil.set(httpSession.getId() + ".rand","");
return message;
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Is Eclipse IDE dying?In 2014 the Eclipse IDE is the leading development environment for Java with a market share of approximately 65%. but ac...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.