JavaScript：留言板和选项卡小案例

留言小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言小案例</title>
</head>
<body>
评论回复：<input type="text"><button>发表</button>
    <ol></ol>
<script>
    var cl = console.log.bind(console)
    var input = document.querySelector("input")
    var ol = document.querySelector("ol")
    var button = document.querySelector("button")
    //给input添加事件监听
    //keyup(按键抬起) keydown(按键按下)keypress(获取单个字母，不包括功能键)
    input.addEventListener("keyup",function(ev){
        // cl(ev.key)
        // key获取键值
        // keycode获取键代码（16进制数）
        if(ev.key === "Enter" || ev.key === "button"){
            if(input.value.length == 0){
                alert("内容为空")
            }
            //创建li元素
            var li = document.createElement("li")
            //给li填充内容
            li.innerHTML = input.value + "<button onclick='del(this)'>删除</button>"
            //添加到ol子元素里面
            ol.appendChild(li)
            //将留言显示第一行
            if(ol.childElementCount == 0) ol.appendChild(li)
                //在前面插入（insertBefore）
            else ol.insertBefore(li,ol.firstElementChild)
            //清空留言框
            input.value = null
        }
    })
    function del(del){
        //父节点（parentNode）
        // cl(del.parentNode.parentNode);
        return confirm("是否要删除？")? del.parentNode.parentNode.removeChild(del.parentNode) : false
    }
</script>
</body>
</html>

选项卡小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡小案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a{text-decoration:none}
        li {
            list-style-type: none;
        }
        li:hover{cursor:default}
        .top{width:100%;display:flex;background: #3399FF;text-align:center;}
        .logo{width:160px;display:flex;line-height:60px;font-size:28px;font-weight:bold;text-shadow:0 0 1px}
        .header {
            height: 60px;
            display: flex;
            flex-direction:column;
            width:100%;
        }
        .nav {
            height: 26px;
            display: flex;
            width:500px;
            margin-top:10px;
        }
        .nav li {
            border-radius: 5px 5px 0 0;
            text-shadow: 0 0 1px;
            width: 85px;
            flex:auto;
            background:#ddd;
            margin-right:1px;
        }
        .nav li.active{
            background:yellow;
        }
        .item {
            display: none;
        }
        .item li{
            margin-left:5px;
            padding:0 15px 0 0;
        }
        .item.active {
            display:block;
            display:flex;
        }
    </style>
</head>
<body>
<div class="top">
    <div class="logo">&nbsp;&nbsp;后台管理</div>
    <div class="header">
        <ul class="nav">
            <li class="active" data-index="1">系统设置</li>
            <li  data-index="2">用户管理</li>
            <li data-index="3">文章管理</li>
            <li data-index="4">管理员</li>
            <li data-index="5">退出</li>
        </ul>
        <ul class="item active" data-index="1">
            <li ><a href="">网站设置</a></li>
            <li><a href="">网站公告</a></li>
            <li><a href="">订单统计</a></li>
            <li><a href="">系统日志</a></li>
        </ul>
        <ul class="item" data-index="2">
            <li><a href="">用户列表</a></li>
            <li><a href="">审核用户</a></li>
            <li><a href="">审核用户</a></li>
            <li><a href="">用户日志</a></li>
        </ul>
        <ul class="item" data-index="3">
            <li><a href="">文章管理</a></li>
            <li><a href="">发布文章</a></li>
            <li><a href="">文章审核</a></li>
        </ul>
        <ul class="item" data-index="4">
            <li><a href="">管理员</a></li>
            <li><a href="">添加管理员</a></li>
            <li><a href="">管理员日志</a></li>
        </ul>
    </div>
</div>
<div id="main"></div>
<script>
    var cl = console.log.bind(console)
    var nav = document.querySelector(".nav")
    var items= document.querySelectorAll(".item")
    // cl(nav)
    //给导航添加绑定事件
    nav.addEventListener("click", show, false)
    function show(ev) {
        cl(ev.target)
        //清除原有激活
        ev.target.parentNode.childNodes.forEach(function (item) {
            if (item.nodeType === 1) item.classList.remove("active")
        })
        //当前点击设置为激活
        ev.target.classList.toggle("active")
        //清空列表原有激活
        items.forEach(function(item){
            item.classList.remove("active")
        })
        //列表查询data-index相等内容，并设置为激活
        items.forEach(function(item){
            if(item.dataset.index === ev.target.dataset.index)
                item.classList.add("active")
        })
    }
</script>
</body>
</html>

留言小案例

选项卡小案例

总结：很奇怪，对着抄感觉基本上都可以理解到了。但是自己想要添加点想要的东西时候确不知道怎么做。应该还是要多抄点作业，熟悉属性这些怎么用之后自己才能做吧？

相关文章