• 日期: 2028-12-27
  • 标签: 教育
<p>将上述代码放入HTML文件中，并在相应的位置添加CSS样式，即可实现功能。具体实现方法如下：</p>
<ol>
<li>在HTML文件中添加上述代码，并在<head>标签中添加以下CSS样式：</li>
</ol>
<style>
.login{
    width: 400px;
    height: 350px;
    background-color: #fff;
    margin: 0 auto;
    margin-top: 50px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #888888;
    position: relative;
}

.login1{
    width: 400px;
    height: 500px;
    background-color: #fff;
    margin: 0 auto;
    margin-top: 50px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #888888;
    position: relative;
}

.header{
    width: 100%;
    height: 60px;
    background-color: #4CAF50;
    color: #fff;
    font-size: 24px;
    text-align: center;
    line-height: 60px;
    border-radius: 10px 10px 0px 0px;
}

.container{
    width: 80%;
    height: 50px;
    margin: 0 auto;
    margin-top: 30px;
    position: relative;
}

.container1{
    width: 80%;
    height: 50px;
    margin: 0 auto;
    margin-top: 20px;
    position: relative;
}

.container2{
    width: 80%;
    height: 50px;
    margin: 0 auto;
    margin-top: 20px;
    position: relative;
}

.container3{
    width: 80%;
    height: 50px;
    margin: 0 auto;
    margin-top: 20px;
    position: relative;
}

.container4{
    width: 80%;
    height: 80px;
    margin: 0 auto;
    margin-top: 20px;
    position: relative;
}

input[type="text"],input[type="password"],input[type="tel"],input[type="email"]{
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    font-size: 16px;
    padding-left: 20px;
    box-sizing: border-box;
}

input[type="submit"],input[type="reset"]{
    width: 45%;
    height: 40px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    outline: none;
    font-size: 16px;
    margin-top: 10px;
    margin-left: 5%;
    margin-right: 5%;
    cursor: pointer;
    border-radius: 5px;
}

input[type="submit"]:hover,input[type="reset"]:hover{
    background-color: #3e8e41;
}

.btn{
    width: 45%;
    height: 40px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    outline: none;
    font-size: 16px;
    margin-top: 20px;
    margin-left: 5%;
    margin-right: 5%;
    cursor: pointer;
    border-radius: 5px;
}

.btn1{
    width: 45%;
    height: 40px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    outline: none;
    font-size: 16px;
    margin-top: 20px;
    margin-left: 5%;
    margin-right: 5%;
    cursor: pointer;
    border-radius: 5px;
    float: right;
}

.btn2{
    width: 45%;
    height: 40px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    outline: none;
    font-size: 16px;
    margin-top: 10px;
    margin-left: 5%;
    margin-right: 5%;
    cursor: pointer;
    border-radius: 5px;
}

.btn3{
    width: 45%;
    height: 40px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    outline: none;
    font-size: 16px;
    margin-top: 10px;
    margin-left: 5%;
    margin-right: 5%;
    cursor: pointer;
    border-radius: 5px;
    float: right;
}

.left, .right, .top, .bottom{
    position: absolute;
    background-color: #ccc;
}

.left, .right{
    width: 2px;
    height: 0px;
    transition: height 0.5s ease;
}

.top, .bottom{
    width: 0px;
    height: 2px;
    transition: width 0.5s ease;
}

.container:hover .left, .container:hover .right{
    height: 50px;
}

.container:hover .top, .container:hover .bottom{
    width: 100%;
}

#verify{
    width: 50%;
    height: 50px;
    border: none;
    outline: none;
    font-size: 16px;
    padding-left: 20px;
    box-sizing: border-box;
    margin-top: 10px;
    margin-left: 0%;
    margin-right: 0%;
    float: left;
}

img{
    width: 50%;
    height: 50px;
    margin-top: 10px;
    margin-left: 0%;
    margin-right: 0%;
    float: left;
}

</style>
<ol start="2">
<li>在JS代码中，将user、xmlhttp等变量的定义放在window.onload函数中，以确保DOM元素已经加载完成。同时，将user.onkeyup事件的定义放在user.onblur事件的外部，以避免重复定义。</li>
</ol>
<p>window.onload = function(){
var user = document.getElementById(&quot;user&quot;);
var xmlhttp;</p>
<pre><code>var prompt1 = document.getElementsByTagName(&quot;p&quot;)[0];
var prompt2 = document.getElementsByTagName(&quot;p&quot;)[1];
prompt1.style.display=&quot;none&quot;;
prompt2.style.display=&quot;none&quot;;

user.onblur=function(){
    if(user.value){
        
        xmlhttp = new XMLHttpRequest();

        xmlhttp.open(&quot;post&quot;,&quot;user.php&quot;);
        xmlhttp.setRequestHeader(&quot;Content-Type&quot;,&quot;application/x-www-form-urlencoded&quot;);
          
        xmlhttp.send(&quot;username=&quot;+user.value);
        
        xmlhttp.onreadystatechange= function(){
            if(xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200){
                if(xmlhttp.responseText == 1){
                    prompt1.style.display =&quot;block&quot;;
                    user.focus();
                }else{
                    prompt2.style.display =&quot;block&quot;;
                }
            }
          }
        
    }
}

user.onkeyup = function(){
    prompt1.style.display = &quot;none&quot;;
    prompt2.style.display = &quot;none&quot;;
}
</code></pre>
<p>}</p>
<ol start="3">
<li>在HTML文件中，将JS代码放在<script>标签中，并将CSS样式放在<style>标签中。</li>
</ol>
<p>完整代码如下</p>
如何将 var prompt1 = documentgetElementsByTagNamep0; var prompt2 = documentgetElementsByTagNamep1; prompt1styledisplay=none; prompt2styledisplay=none; useronblur=function ifuservalue

原文地址: https://www.cveoy.top/t/topic/hq2Y 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录