zoukankan      html  css  js  c++  java
  • 移动交互

    <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>
  • 相关阅读:
    mac os programming
    Rejecting Good Engineers?
    Do Undergrads in MIT Struggle to Obtain Good Grades?
    Go to industry?
    LaTex Tricks
    Convert jupyter notebooks to python files
    How to get gradients with respect to the inputs in pytorch
    Uninstall cuda 9.1 and install cuda 8.0
    How to edit codes on the server which runs jupyter notebook using your pc's bwroser
    Leetcode No.94 Binary Tree Inorder Traversal二叉树中序遍历(c++实现)
  • 原文地址:https://www.cnblogs.com/qlky/p/6180774.html
Copyright © 2011-2022 走看看