Skip to content

Commit 36c07eb

Browse files
author
xuming06
committed
add web login demo.
1 parent ea78cac commit 36c07eb

3 files changed

Lines changed: 296 additions & 0 deletions

File tree

‎24web/login/checkbox..js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
function ChkAllClick(sonName, cbAllId) {
2+
var arrSon = document.getElementsByName(sonName);
3+
var cbAll = document.getElementById(cbAllId);
4+
var tempState = cbAll.checked;
5+
for (i = 0; i < arrSon.length; i++) {
6+
if (arrSon[i].checked != tempState)
7+
arrSon[i].click();
8+
}
9+
}
10+
function ChkSonClick(sonName, cbAllId) {
11+
var arrSon = document.getElementsByName(sonName);
12+
var cbAll = document.getElementById(cbAllId);
13+
for (var i = 0; i < arrSon.length; i++) {
14+
if (!arrSon[i].checked) {
15+
cbAll.checked = false;
16+
return;
17+
}
18+
}
19+
cbAll.checked = true;
20+
}
21+
function ChkOppClick(sonName) {
22+
var arrSon = document.getElementsByName(sonName);
23+
for (i = 0; i < arrSon.length; i++) {
24+
arrSon[i].click();
25+
}
26+
}
27+
function changeBgColor(btn) {
28+
var btn = document.getElementById(btn);
29+
btn.style.backgroundColor = "#90BFFF"
30+
}
31+
function recoverBgColor(btn) {
32+
var btn = document.getElementById(btn);
33+
btn.style.backgroundColor = "#448EF3"
34+
}

‎24web/login/index.html‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>register.html</title>
5+
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
6+
<meta http-equiv="description" content="this is my page">
7+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
8+
<LINK rel="Shortcut icon" href="favicon.ico"/>
9+
<link rel="stylesheet" type="text/css" href="register.css"/>
10+
<script src="checkbox.js" type="text/javascript">
11+
</script>
12+
<script type="text/javascript">
13+
function play() {
14+
document.getElementById("menu_item").style.display = "";
15+
}
16+
function noplay() {
17+
document.getElementById("menu_item").style.display = "none";
18+
}
19+
function passwd() {
20+
var pass = document.getElementById("password").value;
21+
var tip = document.getElementById("tip");
22+
if (pass.length < 4) {
23+
document.getElementById("meter").value = pass.length;
24+
tip.innerHTML = "差";
25+
}
26+
else if (pass.length <= 8) {
27+
document.getElementById("meter").value = pass.length;
28+
tip.innerHTML = "中";
29+
}
30+
else {
31+
document.getElementById("meter").value = pass.length;
32+
tip.innerHTML = "高";
33+
}
34+
}
35+
</script>
36+
</head>
37+
<body>
38+
<div id="3" style="position: relative; top: 100px; z-index: 3;">
39+
<form id="f1" action="register.html" method="post">
40+
<table align="center" cellspacing="0" class="table">
41+
<tr class="thead">
42+
<td align="center">
43+
会员注册
44+
</td>
45+
</tr>
46+
<tr>
47+
<td>
48+
<table id="registertable" border="0px" align="center" border="0px" cellspacing="0"
49+
cellpadding="5px">
50+
<tr>
51+
<tr>
52+
<td align="right">
53+
员工编号：
54+
</td>
55+
<td align="left">
56+
<input type="text" name="username" placeholder="用户名" required/>
57+
</td>
58+
</tr>
59+
<tr>
60+
<td align="right">
61+
密 码：
62+
</td>
63+
<td align="left">
64+
<input type="password" name="password" id="password" placeholder="密码" required
65+
onkeyup="passwd()"/>
66+
<meter min="1" max="10" low="5" high="8" value="0" id="meter">
67+
</meter>
68+
<span id="tip"></span>
69+
</td>
70+
</tr>
71+
<tr>
72+
<td align="right">
73+
密码确认：
74+
</td>
75+
<td align="left">
76+
<input type="password" name="password2" placeholder="确认密码" required/>
77+
</td>
78+
</tr>
79+
<tr>
80+
<td align="right">
81+
生 日：
82+
</td>
83+
<td align="left">
84+
<input type="date" name="borthday"/>
85+
</td>
86+
</tr>
87+
<tr>
88+
<td align="right">
89+
性 别：
90+
</td>
91+
<td align="left">
92+
<input type="radio" name="gender" value="0" checked/>男
93+
<input type="radio" name="gender" value="1"/>女
94+
</td>
95+
</tr>
96+
<tr>
97+
<td align="right">
98+
邮 箱：
99+
</td>
100+
<td align="left">
101+
<input type="email" name="email" placeholder="邮箱" id="email" required/>
102+
</td>
103+
</tr>
104+
<tr>
105+
<td align="right">
106+
手 机：
107+
</td>
108+
<td align="left">
109+
<input type="tel" pattern="[0-9]{11}" id="p" name="phone" placeholder="请输入11位数字"/>
110+
</td>
111+
</tr>
112+
<tr>
113+
<td align="right">
114+
地 址：
115+
</td>
116+
<td align="left">
117+
<input type="text" name="address" placeholder="地址" list="l"/>
118+
<datalist id="l">
119+
<option value="sh">上海</option>
120+
<option value="bj">北京</option>
121+
<option value="js">江苏</option>
122+
<option value="zz">郑州</option>
123+
<option value="sz">深圳</option>
124+
</datalist>
125+
</td>
126+
</tr>
127+
<tr>
128+
<td align="right">
129+
个人网页：
130+
</td>
131+
<td align="left">
132+
<input type="url" name="page" placeholder="主页网址"/>
133+
</td>
134+
</tr>
135+
<tr>
136+
<td align="right">
137+
起床时间：
138+
</td>
139+
<td align="left">
140+
<input type="time" name="bed" onblur="pro()"/>
141+
</td>
142+
</tr>
143+
<tr>
144+
<td align="right">
145+
头像：
146+
</td>
147+
<td align="left">
148+
<input type="file" id="f" accept="image/jpeg" onchange="show()"/><span><img id="img"
149+
src=""
150+
width="60"
151+
height="60"/></span>
152+
<script>
153+
function show() {
154+
var file = document.getElementById("f").files[0];
155+
var fileReader = new FileReader();
156+
fileReader.readAsDataURL(file);
157+
fileReader.onload = function () {
158+
document.getElementById("img").src = fileReader.result;
159+
}
160+
}
161+
</script>
162+
</td>
163+
</tr>
164+
<tr>
165+
<td colspan="2">
166+
<details>
167+
<p>
168+
允许注册
169+
<mark>
170+
许可证
171+
</mark>
172+
信息
173+
</p>
174+
<summary>
175+
注册许可信息
176+
</summary>
177+
</details>
178+
</td>
179+
</tr>
180+
<tr>
181+
<td align="right">
182+
验证码：
183+
</td>
184+
<td valign="middle">
185+
<input type="text" name="captcha" size="11" maxlength="4" title="输入右边的验证码"/>
186+
<span id="span"></span>
187+
<script>
188+
var span = document.getElementById("span");
189+
span.innerHTML = Math.floor(Math.random());
190+
</script>
191+
</td>
192+
</tr>
193+
<tr height="60px">
194+
<td align="center" colspan="2">
195+
<input type="button" value="转到登录" onclick="window.location.replace('login.html')"
196+
id="btn1" onmousemove="changeBgColor('btn1')" onmouseout="recoverBgColor('btn1')"
197+
class="submit"/> <input type="submit" accesskey="enter" value="注册" id="btn"
198+
onmousemove="changeBgColor('btn')"
199+
onmouseout="recoverBgColor('btn');" class="submit"
200+
formmethod="post"/>
201+
</td>
202+
</tr>
203+
</table>
204+
</td>
205+
</tr>
206+
</table>
207+
</form>
208+
</div>
209+
</body>
210+
</html>

‎24web/login/register.css‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
2+
body {
3+
background-image: url("../images/bg.jpg");
4+
text-align: center;
5+
background-repeat: repeat-x;
6+
background-position: 0px 0px;
7+
}
8+
9+
.table {
10+
border: 1px solid #90BFFF;
11+
width: 810px;
12+
}
13+
14+
tr {
15+
font-family: 微软雅黑;
16+
font-weight: 800;
17+
color: #448EF3;
18+
}
19+
20+
input {
21+
border: 1px solid #448EF3;
22+
color: #448EF3;
23+
font-weight: bold;
24+
font-family: "微软雅黑";
25+
height: 35px;
26+
line-height: 30px;
27+
border-radius: 5px;
28+
}
29+
30+
.submit {
31+
width: 150px;
32+
height: 40px;
33+
cursor: hand;
34+
font-size: 20px;
35+
color: #ffffff;
36+
background-color: #448EF3;
37+
border: 0px;
38+
}
39+
40+
.thead {
41+
height: 40px;
42+
background: #90BFFF;
43+
font-family: "微软雅黑";
44+
font-size: 30px;
45+
font-weight: 700;
46+
color: #ffffff;
47+
background: #90BFFF;
48+
}
49+
50+
#3 {
51+
margin-bottom: 100px;
52+
}

0 commit comments

Comments
 (0)