search

博客列表 >JavaScript：留言板和选项卡小案例

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

阿心
阿心原创
2020年06月01日 19:33:38766浏览

留言小案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>留言小案例</title>
  6. </head>
  7. <body>
  8. 评论回复：<input type="text"><button>发表</button>
  9.     <ol></ol>
  10. <script>
  11.     var cl = console.log.bind(console)
  12.     var input = document.querySelector("input")
  13.     var ol = document.querySelector("ol")
  14.     var button = document.querySelector("button")
  16.     //给input添加事件监听
  17.     //keyup(按键抬起) keydown(按键按下)keypress(获取单个字母，不包括功能键)
  18.     input.addEventListener("keyup",function(ev){
  19.         // cl(ev.key)
  20.         // key获取键值
  21.         // keycode获取键代码（16进制数）
  22.         if(ev.key === "Enter" || ev.key === "button"){
  23.             if(input.value.length == 0){
  24.                 alert("内容为空")
  25.             }
  26.             //创建li元素
  27.             var li = document.createElement("li")
  28.             //给li填充内容
  29.             li.innerHTML = input.value + "<button onclick='del(this)'>删除</button>"
  30.             //添加到ol子元素里面
  31.             ol.appendChild(li)
  32.             //将留言显示第一行
  33.             if(ol.childElementCount == 0) ol.appendChild(li)
  34.                 //在前面插入（insertBefore）
  35.             else ol.insertBefore(li,ol.firstElementChild)
  36.             //清空留言框
  37.             input.value = null
  38.         }
  39.     })
  40.     function del(del){
  41.         //父节点（parentNode）
  42.         // cl(del.parentNode.parentNode);
  43.         return confirm("是否要删除？")? del.parentNode.parentNode.removeChild(del.parentNode) : false
  44.     }
  45. </script>
  46. </body>
  47. </html>

选项卡小案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>选项卡小案例</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         a{text-decoration:none}
  12.         li {
  13.             list-style-type: none;
  14.         }
  15.         li:hover{cursor:default}
  16.         .top{width:100%;display:flex;background: #3399FF;text-align:center;}
  17.         .logo{width:160px;display:flex;line-height:60px;font-size:28px;font-weight:bold;text-shadow:0 0 1px}
  18.         .header {
  20.             height: 60px;
  21.             display: flex;
  22.             flex-direction:column;
  23.             width:100%;
  24.         }
  25.         .nav {
  26.             height: 26px;
  27.             display: flex;
  28.             width:500px;
  29.             margin-top:10px;
  30.         }
  31.         .nav li {
  32.             border-radius: 5px 5px 0 0;
  33.             text-shadow: 0 0 1px;
  34.             width: 85px;
  35.             flex:auto;
  36.             background:#ddd;
  37.             margin-right:1px;
  38.         }
  39.         .nav li.active{
  40.             background:yellow;
  41.         }
  42.         .item {
  43.             display: none;
  44.         }
  45.         .item li{
  46.             margin-left:5px;
  47.             padding:0 15px 0 0;
  48.         }
  49.         .item.active {
  50.             display:block;
  51.             display:flex;
  52.         }
  54.     </style>
  55. </head>
  56. <body>
  57. <div class="top">
  58.     <div class="logo">&nbsp;&nbsp;后台管理</div>
  59.     <div class="header">
  60.         <ul class="nav">
  61.             <li class="active" data-index="1">系统设置</li>
  62.             <li  data-index="2">用户管理</li>
  63.             <li data-index="3">文章管理</li>
  64.             <li data-index="4">管理员</li>
  65.             <li data-index="5">退出</li>
  66.         </ul>
  67.         <ul class="item active" data-index="1">
  68.             <li ><a href="">网站设置</a></li>
  69.             <li><a href="">网站公告</a></li>
  70.             <li><a href="">订单统计</a></li>
  71.             <li><a href="">系统日志</a></li>
  72.         </ul>
  73.         <ul class="item" data-index="2">
  74.             <li><a href="">用户列表</a></li>
  75.             <li><a href="">审核用户</a></li>
  76.             <li><a href="">审核用户</a></li>
  77.             <li><a href="">用户日志</a></li>
  78.         </ul>
  79.         <ul class="item" data-index="3">
  80.             <li><a href="">文章管理</a></li>
  81.             <li><a href="">发布文章</a></li>
  82.             <li><a href="">文章审核</a></li>
  83.         </ul>
  84.         <ul class="item" data-index="4">
  85.             <li><a href="">管理员</a></li>
  86.             <li><a href="">添加管理员</a></li>
  87.             <li><a href="">管理员日志</a></li>
  88.         </ul>
  89.     </div>
  90. </div>
  91. <div id="main"></div>
  92. <script>
  93.     var cl = console.log.bind(console)
  94.     var nav = document.querySelector(".nav")
  95.     var items= document.querySelectorAll(".item")
  96.     // cl(nav)
  97.     //给导航添加绑定事件
  98.     nav.addEventListener("click", show, false)
  100.     function show(ev) {
  101.         cl(ev.target)
  102.         //清除原有激活
  103.         ev.target.parentNode.childNodes.forEach(function (item) {
  104.             if (item.nodeType === 1) item.classList.remove("active")
  105.         })
  106.         //当前点击设置为激活
  107.         ev.target.classList.toggle("active")
  109.         //清空列表原有激活
  110.         items.forEach(function(item){
  111.             item.classList.remove("active")
  112.         })
  114.         //列表查询data-index相等内容，并设置为激活
  115.         items.forEach(function(item){
  116.             if(item.dataset.index === ev.target.dataset.index)
  117.                 item.classList.add("active")
  118.         })
  121.     }
  123. </script>
  124. </body>
  125. </html>

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

上一条：JQuery关于Ajax的使用和无刷新分页案例下一条：tpadmin（tp5.0开源框架）下composer安装querylist爬虫插件
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多