留言板HTML

  1. <p><br/></p><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>留言板</title><style type="text/css">

css部分

  1. *{
  2.         margin: 0px;
  3.         padding: 0px;
  4.         box-sizing: border-box;
  5.     }
  6.     @media screen and (min-width: 400px ){
  8.     body{
  9.         text-align:center;
  10.         width: 500px;
  11.         margin-left: 40%;
  12.         margin-right:40%;
  13.     }
  14.     }
  15.     div{
  16.         margin: 0 auto;
  17.         margin-right: 0.3rem;
  18.         margin-left: 0.3rem;
  19.         right: 20rem;
  20.         width: 25fr;
  21.         height: 30rem;
  22.         background-color: aqua;
  23.         text-align: center;
  24.         margin-top: 0.9rem;
  25.         padding-top: 0.3rem;
  26.     }
  27.     div>p{ 
  29.         padding-top: 0.5rem;
  30.         margin-top: 0.2rem; 
  31.         letter-spacing: 5px; 
  32.     }
  33.     ul>li{
  34.         display: grid;
  35.         list-style: none;
  36.         font-size: 0.16rem;
  37.         text-align: left;
  38.         margin-left: 0.3rem;
  39.     }
  40.     ul{
  41.         margin-top: 0.5rem;
  42.     }
  43.     input{
  44.         margin-top:1rem;
  45.         width: 80%;            
  46.         height:1.5rem;
  47.         padding-left:left 5rem;
  48.         border-radius: 0.1px;
  49.         border: 0rem;
  51.     }
  52.     button{
  54.         color: blue;
  55.         border: 0px;
  56.         background-color:aqua;
  57.         margin-left:80% ;
  59.     }</style><div><p>留言板</p><hr/><input type="text" onkeydown="addMgs(this)" placeholder="请输入内容"/><ul class="list"></ul></div>

JS部分

  1.     <script>function addMgs(ele){
  2.         if (event.key==='Enter'){
  3.             const ul=document.querySelector('.list');
  4.            if (ele.value.trim().length===0){
  5.                alert('留言不能为空');
  6.                ele.focus();
  7.                return false;
  8.            }
  9.         //    添加一条新留言
  10.            const li=document.createElement('li');
  11.            li.innerHTML = ele.value + '<button onclick="del(this.parentNode)">删除</button>';
  12.            ul.insertAdjacentElement('afterBegin',li);
  13.            ele.value=null;
  14.            ele.focus();
  15.         }
  16.     }
  17.     // 删除
  18.     function del(ele){
  19.         return confirm('是否删除')?ele.remove():false;
  20.     }
  21.     </script>
  22.     <!--!doctype-->

更多相关文章

  1. android 为TextView的部分文字设置超链接样式并监听点击事件
  2. Android(安卓)P ActivityManagerService（六） startActivity的第四
  3. Android(安卓)- 比较日期的时间部分
  4. 仿移动端商品部分
  5. 仿php中文网首页（部分）
  6. 仿php中文网首页页面(一部分实战)演示
  7. 仿PHP中文网首页部分
  8. Android知识体系总结之Android部分之Android本地存储篇
  9. grid网格布局最新课程部分

随机推荐

  1. golang可以做些什么？
  2. Golang 是面向对象还是面向过程？
  3. golang吉祥物是啥？
  4. Golang 和 PHP 哪个性能更强？
  5. golang会代替java吗？
  6. Golang 底层也用 Golang 吗？
  7. golang和哪种语言像？
  8. golang和nodejs的区别是什么？
  9. golang如何连接mysql
  10. golang如何读取文件