整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
登錄頁是系統的大門，每一個軟件系統都有自己的登錄頁，有精美的，有時髦的，有炫酷的，大門裝飾好不好看，直接關系著用戶的使用體驗，這里分享6個漂亮的登錄頁，讓你系統登錄頁美翻。為沒有UI設計圖參考的開發者提供一些參考思路或者啟發。
1
源碼獲取地址
https://codepen.io/ehermanson/pen/KwKWEv
效果圖
是一個簡單的靜態的html頁面登錄圖片，
部分功能還沒有完善。僅供參考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>靜態頁面登錄測試</title>
<script language="javascript">
window.onload = function() {
createCode()
}
var code; //在全局定義驗證碼
function createCode() {
code = "";
var codeLength = 4; //驗證碼的長度
var checkCode = document.getElementById("code");
var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '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'); //隨機數
for(var i = 0; i < codeLength; i++) { //循環操作
var index = Math.floor(Math.random() * 36); //取得隨機數的索引（0~35）
code += random[index]; //根據索引取得隨機數加到code上
}
checkCode.value = code; //把code值賦給驗證碼
}
//校驗驗證碼
function validateLogin(){
var sUserName = document.frmLogin.username.value ;
var sPassword = document.frmLogin.password.value ;
var inputCode = document.frmLogin.text_code.value;
/*var sinputCode =document.frmLogin.inputcode.value ; */
if ((sUserName.length <= 0) || (sUserName=="")){
alert("請輸入用戶名!");
return false ;
}
if ((sPassword.length <= 0) || (sPassword=="")){
alert("請輸入密碼!");
return false ;
}
if ((inputCode.length<= 0) || (inputCode==NULL)){
alert("請輸入驗證碼!");
return false ;
}
}
</script>
</head>
<body >
<fieldset>
<table background="images\e.jpg " width="933" height="412">
<tr height="170">
<td width="570px"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><table>
<form method ="POST" action="http://localhost:8080/test/hello.html?login=%B5%C7%C2%BC" name="frmLogin" >
<tr>
<td><label for="username">用戶名：</label></td>
<td><input type="text" name="username" id="username" placeholder="input your name" size="20" maxlength="20" /></td>
<td > </td>
<td> </td>
</tr>
<tr>
<td><label for="password">密 碼：</label></td>
<td><input type="password" name="password" id="password" placeholder="input your password" size="20" maxlength="20" ) this.value='';" /></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><label for="text_code">驗證碼:</label></td>
<td><input type="text" size="" name="text_code" id="text_code" /></td>
<td><input type="button" id="code" onclick="createCode()" name=""></td>
</tr>
<tr>
<td><input type="checkbox" name="zlogin" value="1">自動登錄</td>
</tr>
</table>
</td>
<tr>
<td> </td>
<td><table>
<tr>
<td><input type="submit" name="login" value="登錄" onClick="return validateLogin()"/></td>
<td><input type="reset" name="rs" value="重置"></td>
<td><input type="button" name="button" value="注冊" onclick="window.location.href='https://www.w3school.com.cn/jsref/event_onfocus.asp'"></td>
</tr>
</tr>
</table>
</td>
</table>
</fieldset>
</form>
</body>
</html>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
