移动交互

<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="width: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>
posted @ 2016-12-14 20:27 qlky 阅读(160) 评论(0) 收藏举报
刷新页面返回顶部
qlky

移动交互

公告
