<html> <head> <script type="text/javascript"> function show(obj) { var str = obj.value.toString(); var len = obj.value.length; var pattern = /^[0-9]*$/; get(obj); for(var i=0;i<len;i++) { if(!pattern.test(str[i])) { //document.getElementById("phone").innerHTML = str; } } } function check() { document.getElementById("phone").innerHTML = ""; } function get(obj) { var len = obj.value.length; var str = obj.value.toString(); if(len>0) { if(len>3) { str = str.substring(0,3)+" "+str.substring(3,len); len++; } if(len>8) str = str.substring(0,8)+" "+str.substring(8,len); document.getElementById("phone").innerHTML = str; } else document.getElementById("phone").innerHTML = ""; } function checkPass() { var str = document.getElementById("input2").value.toString(); var str2 = document.getElementById("input3").value.toString(); var len = document.getElementById("input2").value.length; var len2 = document.getElementById("input3").value.length; var correct = true; for(var i =0;i<len2;i++) { if(i>=len || str[i]!=str2[i]) { correct = false; break; } } if(!correct) document.getElementById("input3").style.backgroundColor = "rgb(245,93,135)"; else document.getElementById("input3").style.backgroundColor = "rgb(147,147,147)"; /* if(str!=str2) document.getElementById("input3").style.backgroundColor = "red"; else document.getElementById("input3").style.backgroundColor = "white"; */ } function pass(obj) { var len = obj.value.length; var str = obj.value.toString(); var sum=0; for(var i =0;i<len-1;i++) { var a = str.charAt(i).charCodeAt(); var b = str.charAt(i+1).charCodeAt(); if(a>b) sum+=a-b; else sum+=b-a; } if(sum>100) sum=100; document.getElementById('dd').style.marginLeft = sum+"%"; } </script> <style type="text/css"> body { background-color: rgb(0,0,0); padding-right: 32px; margin-top: 20px; padding-left: 32px; font-size: 12px; padding-bottom: 32px; color: #000; padding-top: 32px; font-family: verdana,Arial,Helvetica,sans-serif; } #main { border-right: #bbb 1px solid; border-top: #bbb 1px solid; background-color: rgb(61,58,57); border-left: #bbb 1px solid; border-bottom: #bbb 1px solid; text-align: left; padding:0; width: 20%; min-height:500px; border-style : solid; border-radius: 4px; border-color: rgb(147,147,147); border:2px; } #heading { padding-right: 0; padding-left: 0; font-weight: bold; font-size: 16px; padding-bottom: 15px; margin: 0; color: #904; padding-top: 0; } .label-line { display: block; font-size: 12px; margin: 0; } .tip { color: red; } #agreement { margin-left:30%; margin-top:20px; } #ee { color:white; font-size:15px; } .block { margin-bottom: 10px; margin-top: 20px; } form { margin:0; } .block2 { min-height:100px; background-color:rgb(147,147,147); } #phone { color:rgb(187,142,81); font-family:黑体; font-size:30px; border-radius: 4px; margin-left:10px; } #cc { width: 80%; height: 20px; margin-top:10px; border-style : solid; border-radius: 4px; border-color: rgb(147,147,147); border:2px; background:-webkit-gradient(linear, 0% 0%, 100% 0%,from(#00ff00), to(#0000ff)); } #dd { width: 1px; height: 20px; background-color:white; } #logo { height:10%; width: 80%; margin:0px auto; } #title { color:white; font-family:黑体; font-size:15; } #title2 { color:white; font-family:黑体; font-size:15; margin-top:15px; } #input1 { display:block; margin-top:10px; height:30px; width:80%; background-color:rgb(147,147,147); padding:0; border:0; color:white; border-style : solid; border-radius: 4px; } #input2 { display:block; margin-top:10px; height:30px; width:80%; background-color:rgb(147,147,147); padding:0; border:0; color:white; border-style : solid; border-radius: 4px; } #input3 { display:block; margin-top:10px; height:30px; width:80%; background-color:rgb(147,147,147); padding:0; border:0; color:white; border-style : solid; border-radius: 4px; } #field { padding: 20px; border-style : solid; border-radius: 4px; } #field2 { padding: 20px; margin-top:15dp; border-style : solid; border-radius: 4px; } #select { height:20px; width:60%; background-color:rgb(147,147,147); margin-left:5px; color:white; border-style : solid; border-radius: 4px; } #signin { margin-left:10px; } .button { width: 100px; line-height: 30px; text-align: center; font-weight: bold; color: #fff; text-shadow:1px 1px 1px #333; border-radius: 5px; margin:0 20px 20px 0; position: relative; overflow: hidden; } .button.blue { border:1px solid #1e7db9; box-shadow: 0 1px 2px #8fcaee inset,0 -1px 0 #324D63 inset,0 -2px 3px #426666 inset; background: -webkit-linear-gradient(top,#324D63,#2e88c0); background: -moz-linear-gradient(top,#324D63,#2e88c0); background: linear-gradient(top,#324D63,#2e88c0); } #xx { width:80%; margin-top:15px; background-color:rgb(147,147,147); color:white; font-family:黑体; font-size:15 } #xxx { width:80%; margin-top:15px; background-color:rgb(147,147,147); color:white; font-family:黑体; font-size:15 } </style> </head> <body> <div style="100%;min-height:500px"> <div align = "center"> <div id = "main"> <div id = "logo"><img src = "1.jpg" width="100%"></img></div> <form method="post" onsubmit="false"> <fieldset id = "field"> <legend id="title">Academic Information</legend> <div class = "block"> <label id = "title">Degree</label> <form> <select id = "select" name="classes"> <option value="s2">Master of Computer Science</option> <option value="s3">Master of Music</option> <option value="s1" selected="selected">Master of Bussiness Administration</option> <option value="i1">Master of Maths</option> </select> </form> </div> <div class = "block"> <label id ="title">Student ID</label> <strong id ="phone"></strong> <input type = "text" id = "input1" value class = "input-text" onkeydown = "check_enter(event)" onkeyup="show(this)" onblur="check()" onfocus="get(this)"> <span id = "tip_input1" class = "tip"></span> </div> <div class = "block"> <label class="label-line" id = "title">password</label> <input type = "password" id = "input2" value class = "input-text" onkeydown = "check_enter(event)" onkeyup = "pass(this)"> <span id = "tip_input2" class = "tip"></span> </div> <div class = "block"> <label class="label-line" id = "title">check pass</label> <input type = "password" id = "input3" value class = "input-text" onkeydown = "check_enter(event)" onkeyup="checkPass()"> <span id = "tip_input3" class = "tip"></span> </div> <label id = "title">Password strength</label> <div id = "cc"> <div id = "dd"></div> </div> <label class="label-line" id = "title2">Class Attended</label> <textarea name="message" id = "xx" rows="5" cols="30"></textarea> </fieldset> <fieldset id = "field2"> <legend id="title">Personal Details</legend> <div class = "block"> <label class="label-line" id = "title">First Name</label> <input type = "text" id = "input2" value class = "input-text"> <span id = "tip_input2" class = "tip"></span> </div> <div class = "block"> <label class="label-line" id = "title">Last Name</label> <input type = "text" id = "input2" value class = "input-text"> <span id = "tip_input2" class = "tip"></span> </div> <div class = "block"> <label class="label-line" id = "title">Gender</label> <form id = "title"> <input type="radio" name="sex" value="male" checked>Male <input type="radio" name="sex" value="female">Female </form> <span id = "tip_input2" class = "tip"></span> </div> <div class = "block"> <label class="label-line" id = "title">Email</label> <input type = "email" id = "input2" value class = "input-text"> <span id = "tip_input2" class = "tip"></span> </div> <textarea name="message" id = "xxx"></textarea> </fieldset> <div class = "block2"> <input type = "checkbox" id = "agreement" name = "agreement" onkeydown = "check_enter(event)"> <label id="ee" onkeydown = "check_enter(event)">AGREEMENT</label> <input type = "submit" id = "signin" class = "button blue" value = "Register"> <span id = "tip_input2" class = "tip"></span> </div> </form> </div> </div> </div> </body> </html>