H5+css 3+js 인증 코드 가 있 는 로그 인 페이지 구축
login.html
<!DOCTYPE HTML>
<html>
<head>
<title>EasyBuy </title>
<meta charset="utf-8">
<style>
.main_bar{
width:1350px;
height:350px;
background-color:#6495ED;
margin-top:10%;
}
#login_form{
width:40%;
height:100%;
background-color:#112435;
margin:0 auto;
}
.title{
width:100%;
height:55px;
color:#ffffff;
border-bottom:1px solid #ffffff;
font-size:20pt;
font-family:" ";
line-height:55px;
text-align:center;
}
#form_widget{
width:100%;
height:295px;
background-color:#808080;
}
.txt{
display:block;/* （ ）*/
width:70%;
margin:0 auto;
height:35px;
font-size:15pt;
border-radius:5px;/* */
border:0;
padding-left:8px;
}
#vcode{
height:35px;
width:40%;
font-size:15pt;
margin-left:15%;
border-radius:5px;
border:0;
padding-left:8px;
}
#code{
color:#ffffff;/* */
background-color:#000000;
font-size:20pt;
font-family:" W5";
padding:5px 35px 10px 35px;
margin-left:5%;
cursor:pointer;
}
#search_pass_link{
width:70%;
text-align:right;
margin:0 auto;
padding:5px;
}
/* */
#search_pass_link a{
color:#000000;
text-decoration:none;
}
/* */
#search_pass_link a:hover{
color:#ff0000;
text-decoration:underline;
}
.btn{
width:70%;
margin-left:15%;
height:40px;
border:0;
font-size:14pt;
font-family;" ";
background-color:#FC5628;
color:#ffffff;
cursor:pointer;/* */
border-radius:20px;/* */
border:0;
}
#copyright{
width:100%;
text-align:center;
padding-top:20px;
font-family:" ";
color:#e0e0e0;
}
</style>
</head>
<body leftmargin="0" οnlοad="changeImg()">
<div class="main_bar">
<div id="login_form">
<div class="title">
EasyBuy
</div>
<form action="main.html" οnsubmit="return check()">
<div id="form_widget">
<br>
<input type="text" placeholder=" " id="box_name" class="txt" value=" " οnfοcus="this.value=''" οnblur="if(this.value=='')this.value=' '"/>
<br>
<input type="password" placeholder=" " id="box_pass" class="txt" value="password" οnfοcus="this.value=''" οnblur="if(this.value=='')this.value='password'"/>
<br>
<input type="text" id="vcode" placeholder=" " value=" " οnfοcus="this.value=''" οnblur="if(this.value=='')this.value=' '"/><span id="code" title=" ， "></span>
<div id="search_pass_link">
<a href="#" rel="external nofollow" > ？</a>
</div>
<input type="submit" value=" " class="btn" οnmοuseοver="this.style.backgroundColor='#FF8D00'" οnmοuseοut="this.style.backgroundColor='#FC5628'">
<br>
<div id="copyright">
Power By WXH ©CopyRight 2016
</div>
</div>
</form>
</div>
</div>
</body>
<script type="text/javascript">
var code;//
document.getElementById("code").οnclick=changeImg;
function changeImg(){
//alert(" ");
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='';//
//alert(arrays.length);
//
for(var i=0;i<4;i++){
//
var r=parseInt(Math.random()*arrays.length);
code+=arrays[r];
//alert(arrays[r]);
}
//alert(code);
document.getElementById('code').innerHTML=code;//
}
// ( )
function check(){
//
var input_code=document.getElementById('vcode').value;
//alert(input_code+"----"+code);
if(input_code.toLowerCase()==code.toLowerCase())
{
// ( )
return true;
}
alert(" !");
// ,
return false;
}
</script>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
