期末网页设计作业分享中华传统文化带js轮播图及登录验证-页面宽度1500px
传统文化网页设计简介
中华传统文化网页设计有五个页面组成；
- 首页(即登录页面，带js登录验证)
- 传统文化
- 民族戏曲
- 传统民俗
- 传统建筑（带js轮播）
网页设计运行效果图
网页登录网页html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>欢迎登录</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="box">
<h1>登 录</h1>
<div class="input_box">
<input id="uname" type="text" name="user" placeholder="用户名由英文和数字组成" class="input_box">
</div>
<div class="input_box">
<input id="upass" type="password" name="psw" placeholder="密码为6位以上字符" class="input_box">
</div>
<div id="error_box"><br></div>
<div class="input_box">
<button type="button" class="btn" onclick="fnLogin()">登录</button>
</div>
</div>
</body>
</html>
网站js登录验证代码
function fnLogin() {
var oUname = document.getElementById("uname")
var oUpass = document.getElementById("upass")
var oError = document.getElementById("error_box")
var isError = true;
if (oUname.value.length > 20 || oUname.value.length < 6) {
oError.innerHTML = "用户名请输入6-20位字符";
isError = false;
window.alert("登录失败")
return;
}else if((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){
oError.innerHTML = "用户名首字符必须为字母";
window.alert("登录失败")
return;
}
if (oUpass.value.length > 20 || oUpass.value.length < 6) {
oError.innerHTML = "密码请输入6-20位字符"
isError = false;
window.alert("登录失败")
return;
}
window.alert("登录成功")
window.location.href="culture.html"
}
本文暂时没有评论，来添加一个吧(●'◡'●)