漂亮的登录界面，带二维码扫描功能 

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>账号登录-前端开发-BeyondWeb.cn</title>
  6     <style type="text/css">
  7         * {
  8             margin: 0;
  9             padding: 0;
 10         }
 11         
 12         body {
 13             color: #333;
 14             font: 12px/22px 宋体,arial,serif;
 15         }
 16         
 17         a,
 18         a:link,
 19         a:visited {
 20             color: #666;
 21             text-decoration: none;
 22         }
 23         
 24         a:focus,
 25         input:focus {
 26             outline: none;
 27         }
 28 
 29         img {
 30             border: 0;
 31         }
 32 
 33         .loginBox {
 34             margin: 100px auto;
 35             width: 418px;
 36             height: 303px;
 37             border: 1px solid #ccc;
 38         }
 39 
 40         .loginBox .title {
 41             font-family: "Microsoft YaHei", arial, serif;
 42             font-size: 22px;
 43             padding: 13px 0 0 20px;
 44         }
 45 
 46         .enterLogin {
 47             display: block;
 48         }
 49 
 50         .scanLogin {
 51             display: none;
 52         }
 53 
 54         .enterLogin form {
 55             margin: 0 auto;
 56             margin-top: 55px;
 57             width: 270px;
 58             height: 150px;
 59         }
 60 
 61         .enterLogin .lgnForm fieldset {
 62             border: 0;
 63             padding: 0;
 64         }
 65 
 66         .enterLogin .lgnForm legend {
 67             display: none;
 68         }
 69 
 70         .enterLogin .lgnForm p {
 71             margin-top: 15px;
 72         }
 73 
 74         .enterLogin .lgnForm .inputTxt {
 75             width: 258px;
 76             height: 38px;
 77             border: 1px solid #ccc;
 78             border-radius: 2px;
 79             padding-left: 10px;
 80             font-size: 14px;
 81             color: #999;
 82         }
 83 
 84         .enterLogin .lgnForm .inputBtn {
 85             width: 110px;
 86             height: 33px;
 87             background-color: #6c3;
 88             border: 1px solid #3c0;
 89             border-radius: 2px;
 90             color: #fff;
 91             font-size: 16px;
 92             font-weight: bold;
 93             letter-spacing: 3px;
 94             line-height: 33px;
 95             cursor: pointer;
 96         }
 97 
 98         .enterLogin .lgnForm .inputBtn:hover {
 99             background-color: #5cd93a;
100         }
101 
102         .enterLogin .footer {
103             color: #ccc;
104             text-align: right;
105             margin-top: 37px;
106             padding-right: 10px;
107         }
108 
109         .enterLogin .footer a:hover,
110         .scanLogin .footer a:hover {
111             text-decoration: underline;
112         }
113 
114         .scanLogin {
115         
116         }
117 
118         .scanLogin .txt {
119             color: #000;
120             font-size: 14px;
121             text-align: center;
122             margin-top: 40px;
123         }
124 
125         .scanLogin .pic {
126             margin: 0 auto;
127             margin-top: 20px;
128             width: 280px;
129             height: 115px;
130             background: url(images/erwbg.jpg) no-repeat left center;
131         }
132 
133         .scanLogin .pic img {
134             float: right;
135             width: 113px;
136             height: 113px;
137             border: 1px solid #ccc;
138         }
139 
140         .scanLogin .footer {
141             color: #ccc;
142             text-align: right;
143             margin-top: 45px;
144             padding-right: 10px;            
145         }
146 
147         .checkInfo {
148             display: none;
149             position: absolute;
150             margin-top: -238px;
151             margin-left: 74px;
152             padding: 3px 15px 3px 15px;
153             background-color: #ffc;
154             border:1px solid #fcc;
155         }
156 
157         .drag {
158             position: absolute;
159             width: 55px;
160             height: 73px;
161             margin-top: -299px;
162             margin-left: 360px;
163             background: url(images/drag.jpg) no-repeat center bottom;
164             cursor: pointer;
165         }
166     </style>
167     <script type="text/javascript">
168         var $$ = function (id) {
169             return document.getElementById(id);
170         }
171 
172         var checkUserName = function (id, outputId) {
173             var re = /^[0-9a-zA-Z]{1}[0-9a-zA-Z_]{5,19}$/;
174             if ($$(id).value == "" || $$(id).value == "用户名"){
175                 $$(outputId).style.display = "block";
176                 $$(outputId).innerHTML = "用户名不能为空！";
177                 return false;
178             } else {
179                 if (!re.test($$(id).value)) {
180                     $$(outputId).style.display = "block";
181                     $$(outputId).innerHTML = "用户名不合法！";
182                     return false;
183                 } else {
184                     $$(outputId).style.display = "none";
185                     return true;
186                 }
187             }
188         }
189 
190         var checkUserPass = function (id, outputId) {
191             //未检测密码是否正确
192             if ($$(id).value == "" || $$(id).value == "密码") {
193                 $$(outputId).style.display = "block";
194                 $$(outputId).innerHTML = "密码不能为空！";
195                 return false;
196             } else {
197                 $$(outputId).style.display = "none";
198                 return true;
199             }
200         }
201 
202         var dealInputDefaultValue = function (id, defaultValue) {
203             $$(id).onfocus = function () {
204                 this.style.color = "#333";
205                 //alert(this.type);
206                 if (this.name == "userpass") {
207                     this.type = "password";
208                 }
209                 if (this.type == "password") {
210                     checkUserName("uname", "checkInfo");
211                 }
212                 if (this.value == defaultValue || this.value == " " ){
213                     this.value = "";
214                 } else {
215                     this.value = this.value;
216                 }
217             }
218 
219             $$(id).onblur = function () {
220                 if (this.value == defaultValue || this.value == " " || this.value == ""){
221                     this.value = defaultValue;
222                     if (this.type == "password") {
223                         this.type = "text";
224                     }
225                     this.style.color = "#999";
226                 } else {
227                     this.value = this.value;
228                     this.style.color = "#333";
229                 }
230             }
231         }
232 
233         var toggleCheckInfo = function (vle) {
234             $$("checkInfo").style.display = vle;
235         }
236 
237         var loginMethod = function (id, methodId1, methodId2) {
238             var intNum = 0;
239             var m1 = $$(methodId1);
240             var m2 = $$(methodId2);
241             $$(id).onclick = function () {
242                 intNum ++;
243                 switch (intNum) {
244                     case 1:
245                         m1.style.display = "none";
246                         m2.style.display = "block";
247                         this.title = "返回";
248                         this.style.height = "50px";
249                         toggleCheckInfo("none");
250                         break;
251                     case 2:
252                         m1.style.display = "block";
253                         m2.style.display = "none";
254                         this.title = "手机扫描登录";
255                         this.style.height = "73px";
256                         intNum = 0;
257                         break;
258                 }
259             }
260         }
261 
262         window.onload = function () {
263             dealInputDefaultValue("uname", "用户名");
264             dealInputDefaultValue("upwd", "密码");
265             $$("lgnForm").onsubmit = function () {
266                 return checkUserPass("upwd", "checkInfo") && checkUserName("uname", "checkInfo");
267             }
268             loginMethod("drag", "enterLogin", "scanLogin");
269         }
270     </script>
271 </head>
272 <body>
273     <div class="loginBox">
274         <p class="title">账号登录</p>
275         <div class="enterLogin" id="enterLogin">
276             <form name="lgnForm" class="lgnForm" id="lgnForm">
277                 <fieldset>
278                     <legend>账号登录</legend>
279                     <p><input type="text" name="username" id="uname" class="inputTxt" value="用户名"></p>
280                     <p><input type="text" name="userpass" id="upwd" class="inputTxt" value="密码"></p>
281                     <p><input type="submit" class="inputBtn" value="登录"></p>
282                 </fieldset>
283             </form>
284             <p class="footer"><a href="http://beyondweb.cn/" target="_blank">忘了密码?</a> | <a href="http://beyondweb.cn/" target="_blank">注册新账号</a> | <a href="http://beyondweb.cn/" target="_blank">意见反馈</a></p>
285         </div>
286         <div class="scanLogin" id="scanLogin">
287             <p class="txt">一扫即上，用手机扫描二维码登录</p>
288             <div class="pic">
289                 <img src="images/beyondweb-ewm.png" alt="用手机扫描二维码登录">
290             </div>
291             <p class="footer"><a href="http://beyondweb.cn/" target="_blank">二维码使用帮助</a> | <a href="http://beyondweb.cn/" target="_blank">注册新账号</a> | <a href="http://beyondweb.cn/" target="_blank">意见反馈</a></p>
292         </div>
293         <span class="checkInfo" id="checkInfo"></span>
294         <span class="drag" id="drag" title="手机扫描登录"></span>
295     </div>
296 </body>
297 </html>
View Code

posted @ 2014-09-11 17:20  爱在夕阳下  阅读(1025)  评论(1)  编辑  收藏  举报