html 完善

alwaysxr
54 阅读2分钟

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0930</title>
    <link rel="stylesheet" href="main.css">
    <script src="main.js"></script>
</head>
<body>
<div class="box">
    <hr>
    <div class="header">
        <table class="search">
            <tr>
                <td><input class="search_input" id="search_input" type="text" value="请输入角色名称"></td>
                <td>
                    <button class="search_button" id="search_button" onclick="search()">🔍查找</button>
                    <div id="if_search_valid"></div>
                </td>
            </tr>
        </table>
        <button class="add_button" onclick="add()">＋新建角色</button>
    </div>
    <div class="middle">
        <table class="table">
            <tr class="tr_g">
                <td class="td">序号</td>
                <td class="td">角色名称</td>
                <td class="td">角色权限等级</td>
                <td class="td">角色描述</td>
                <td class="td">操作</td>
            </tr>
            <tr>
                <td class="td">1</td>
                <td class="td">管理人员</td>
                <td class="td"><label class="label_4">四级</label></td>
                <td class="td">系统管理人员</td>
                <td class="td">
                    <button class="bianji">编辑</button>
                    <button class="shanchu">删除</button>
                </td>
            </tr>
            <tr class="tr_g">
                <td class="td">2</td>
                <td class="td">主管部门</td>
                <td class="td"><label class="label_3">三级</label></td>
                <td class="td">拥有系统大部分功能</td>
                <td class="td">
                    <button class="bianji">编辑</button>
                    <button class="shanchu">删除</button>
                </td>
            </tr>
            <tr>
                <td class="td">3</td>
                <td class="td">普通员工</td>
                <td class="td"><label class="label_2">二级</label></td>
                <td class="td">拥有系统部分功能</td>
                <td class="td">
                    <button class="bianji">编辑</button>
                    <button class="shanchu">删除</button>
                </td>
            </tr>
            <tr class="tr_g">
                <td class="td">4</td>
                <td class="td">实习员工</td>
                <td class="td"><label class="label_1">一级</label></td>
                <td class="td">仅拥有查询</td>
                <td class="td">
                    <button class="bianji">编辑</button>
                    <button class="shanchu">删除</button>
                </td>
            </tr>
        </table>
    </div>
    <div class="bottom">
        <div class="b_p_1">共4条</div>
        <select id="">
            <option value="">
                10条/页
            </option>
        </select>
        <div class="b_b">
            <div class="fanye">< 1 ></div>
            <div class="goto">前往<input class="p_input" value="1">页</div>
        </div>
    </div>

</div>

<div id="out">
    <div class="new_title">新建角色</div>
    <button class="exit" onclick="cancel()">×</button>
    <form action="">
        <div class="name">
            <div class="must">*</div>
            角色名称 <input id="input_name" class="input_name" required="required" type="text">
            <div id="if_name_valid"></div>
        </div>
        <div class="describe">角色描述 <input id="input_describe" type="text"></div>
        <div class="level">
            <div class="must">*</div>
            角色等级权限
            <select  class="select" id="select">
                <option value=""></option>
                <option value="4">四级</option>
                <option value="3">三级</option>
                <option value="2">二级</option>
                <option value="1">一级</option>
            </select>
            <div id="if_level_valid"></div>
        </div>
        <div class="buttons">
            <button type="button" class="cancel" onclick="cancel()">取消</button>
            <button type="button" class="submit" onclick="success()">确定</button>
        </div>
    </form>
</div>
<div id="mask">

</div>
</body>
</html>

css

.search{
    border: 1px solid #eef1f5 ;
    border-collapse: collapse;
    display: inline-block;
}
.search_input{
    border-style: none;
    color: lightgray;
}
.search_button{
    border-style: none;
    border-radius: 3px;
    background-color: #409eff ;
    color: white;
    height: 30px;
}
.add_button{
    border-style: none;
    border-radius: 3px;
    background-color: #409eff ;
    color: white;
    height: 30px;
    float: right;
}
.table{
    border: 1px solid #eef1f5;
    border-collapse: collapse;
    text-align: center;
    width: 100%;
    height: 80%;
}
.tr_g{
    background-color: #fafafa;
    border-style: solid;
    border-collapse: collapse;
    border-color: #eef1f5;
}
.td{
    border-style: solid;
    border-collapse: collapse;
    border-color: #eef1f5;
}
.bianji{
    color: #eef1f5;
    background-color: #e6a23c;
    border-radius: 3px;
    border-style: none;
    margin-left: 5px;
    margin-right: 5px;
}
.shanchu{
    color: #eef1f5;
    background-color: #f46c6c;
    border-radius: 3px;
    border-style: none;
    margin-left: 5px;
    margin-right: 5px;
}
.label_4{
    border: 1px solid;
    border-radius: 3px;
    background-color: #fef0f0;
    color: #f57070;
}
.label_3{
    border: 1px solid;
    border-radius: 3px;
    background-color: #fdf6ec;
    color: #efc688;
}
.label_2{
    border: 1px solid;
    border-radius: 3px;
    background-color: #ecf5ff;
    color: #47a5ff;
}
.label_1{
    border: 1px solid;
    border-radius: 3px;
    background-color: #f0f9eb;
    color: #a0d068;
}
.b_p_1{
    display: inline-block;
}
.fanye{
    display: inline-block;
    margin-left: 20px;
    margin-right: 20px;
}
.b_b{
    display: inline-block;
}
.goto{
    display: inline;
    float: right;
    margin-right: 50px;
}
.p_input{
    width: 8px;
}
#out{
    padding-top: 10px;
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 80%;
    height: 50%;
    background-color: #ffffff;
    z-index: 99;
    border-radius: 3px;
}
#mask{
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: gray;
    z-index: 88;
}
.new_title{
    margin-left: 10px;
    display: inline-block;
}
.exit{
    float: right;
    border-style: none;
    background-color: #ffffff;
}
.name{
    margin-top: 20px;
    margin-left: 70px;
}
.describe{
    margin-top: 20px;
    margin-left: 80px;
}
.level{
    margin-top: 20px;
    margin-left: 40px;
}
.select{
    width: 180px;
}
.buttons{
    margin-top: 50px;
    float: right;
    margin-right: 20px;
}
.cancel{
    border: 1px solid gray;
    border-radius: 3px;
    height: 30px;
}
.submit{
    border-style: none;
    border-radius: 3px;
    background-color: #409eff;
    color: #ffffff;
    height: 30px;
}
.must{
    display: inline-block;
    color: #f46c6c;
}
#if_name_valid{
    display: inline-block;
    font-size: 12px;
    color: red;
}
#if_level_valid{
    display: inline-block;
    font-size: 12px;
    color: red;
}
#if_search_valid{
    display: inline-block;
    font-size: 12px;
    color: red;
}

js

function search() {
    var input = document.getElementById("search_input")
    var message = document.getElementById("if_search_valid")
    if (input.value==""||input.value=="请输入角色名称"){
        message.innerHTML = "请输入角色名称"
    }
    else {
        input.value = ""

    }
}

function add() {
    let out = document.getElementById("out")
    let mask = document.getElementById("mask")
    mask.style.display = "block"
    out.style.display = "block"
}

function cancel() {
    let out = document.getElementById("out")
    let mask = document.getElementById("mask")
    mask.style.display = "none"
    out.style.display = "none"
}

function success() {

    var name_message = document.getElementById("if_name_valid")
    var name = document.getElementById("input_name")
    var s1 = 0
    var s2 = 0
    var chn = 0
    var name_str = name.value
    var reg=/^[\u4E00-\u9FA5]+$/;
    var exp = /^[+-]?\d*(.\d*)?(e[+-]?\d+)?$/;

    if (reg.test(name_str)){
        chn = 1
    }
    else if (reg.test(name_str.slice(0,name_str.length-1))&&exp.test(name_str.slice(name_str.length-1,name_str.length))){
        chn = 1
    }else{
        chn = 0
    }

    if (name_str.length < 3) {
        name_message.innerHTML = '不符合角色名称要求'
        s1 = 0
    } else if (chn == 0) {
        name_message.innerHTML = '不符合角色名称要求'
        s1 = 0
    }
    else
     {
        name_message.innerHTML = " "
         s1 = 1
    }

    var level = document.getElementById("select")
    var level_message = document.getElementById("if_level_valid")
    if (level.value.length  == '') {
        level_message.innerHTML = '请选择角色权限等级'
        s2 = 0
    } else {
        level_message.innerHTML = " "
        s2 = 1
    }

    if (s1&&s2==1){
        let out = document.getElementById("out")
        let mask = document.getElementById("mask")
        mask.style.display = "none"
        out.style.display = "none"
        alert("添加成功")
    }
}
avatar
文章
阅读
粉丝