zoukankan      html  css  js  c++  java
  • 弹出框的代码做法:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
    padding: 0;
    margin: 0;
    }
    header {
    height: 60px;
    line-height: 60px;
    background-color: gray;
    }
    .wrap {
    1200px;
    margin: 0 auto;
    }
    .regBtn {
    text-decoration: none;
    color: white;
    float: right;
    }
    .cover {
    position: absolute;
    top: 0;
    left: 0;
    100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /*opacity: 0.5;*/
    /*display: none;*/
    }
    .regBox {
    500px;
    height: 300px;
    padding: 20px;
    background-color: white;
    margin: 200px auto;
    position: relative;
    }
    .cross {
    /*float: right;*/
    position: absolute;
    top: 0;
    right: 0;
    }
    .input-box {
    border: 1px solid #ddd;
    398px;
    height: 52px;
    line-height: 52px;
    }
    .input-box > label {
    display: inline-block;
    104px;
    padding-left: 20px;
    }
    .input-box > input {
    250px;
    height: 30px;
    /*vertical-align: 2px;*/
    border: none;
    outline: none;
    font-size: 16px;
    }
    .tips{
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #ccc;

    }
    </style>
    </head>
    <body>
    <div class="cover" id="cover">
    <div class="regBox">
    <span class="cross" id="cross">X</span>
    <h1>用户注册</h1>
    <form action="">
    <div class="input-box" id="inputBox">
    <label for="username">用户名</label>
    <input type="text" id="username">
    </div>
    <p class="tips" id="tip1"></p>
    <div class="input-box">
    <label for="password">密码</label>
    <input type="text" id="password">
    </div>
    </form>
    </div>
    </div>
    <header>
    <div class="wrap">
    <a href="#" class="regBtn" id="regBtn">注册</a>
    </div>
    </header>
    <div class="content">
    <h1>自己打开福是的发送到福萨芬</h1>
    </div>
    <footer></footer>

    <script>
    regBtn.addEventListener("click", () => {
    cover.style.display = "block";
    }, false);
    cross.addEventListener("click", () => {
    cover.style.display = "none";
    }, false);
    username.addEventListener("click", () => {
    tip1.textContent = "是地方就好上了对方䣌按时放"
    }, false)
    username.addEventListener("blur", () => {
    let re = /^1([3|5|7|8]){1}d{9}$/;
    let text = username.value;
    if(re.test(text)){
    tip1.textContent = "用户名合法"
    }else{
    tip1.textContent = "用户名不合法";
    tip1.style.color = "red";
    inputBox.style.borderColor = "red";
    }
    }, false)
    </script>
    </body>
    </html>
  • 相关阅读:
    Java实现 LeetCode 30 串联所有单词的子串
    Java实现 LeetCode 29 两数相除
    Java实现 LeetCode 29 两数相除
    Java实现 LeetCode 29 两数相除
    Java实现 LeetCode 28 实现strStr()
    Java实现 LeetCode 28 实现strStr()
    Java实现 LeetCode 28 实现strStr()
    Java实现 LeetCode 27 移除元素
    Java实现 LeetCode 27 移除元素
    字符编码终极笔记:ASCII、Unicode、UTF-8、UTF-16、UCS、BOM、Endian
  • 原文地址:https://www.cnblogs.com/langwo/p/7536690.html
Copyright © 2011-2022 走看看