• {
      padding: 0px;
      margin: 0px;
      }

      ul li {
      list-style-type: none;
      background-color: rosybrown;
      height: 50px;
      margin-bottom: 10px;
      line-height: 30px;
      padding: 10px;
      box-sizing: border-box;
      }

      .box {
      width: 1600px;
      height: 200px;
      border: 1px solid #000;
      margin: 20px auto;
      padding: 20px;
      box-sizing: border-box;
      }

      #ipt {
      width: 1500px;
      height: 50px;
      border: 1px solid #000;
      margin: 0px auto;
      outline: none;
      }

      .box2 {
      width: 1600px;
      border: 1px solid #000;
      padding-top: 20px;
      margin: 20px auto;
      }

      ul li input {
      margin-top: 7px;
      float: right;
      }

      .box3 {
      width: 100%;
      height: 937px;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 0px;
      display: none;
      left: 0px;
      }

      .box4 {
      position: absolute;
      top: 45%;
      left: 45%;
      }

      .box4>#tex {
      outline: none;
      resize: none;
      }



    网友评论




    还可以输入
    20个字


      1.     </ul>
      3. </div><br />    <div class="box3"><br />        <div class="box4"> <textarea name="tex" id="tex" cols="40" rows="5" maxlength="20"></textarea><input type="button" name="change" id="change" value="修改"></div>
      5. </div><br />    <script><br />        var ipt = document.querySelector('#ipt');<br />        var but = document.querySelector('#but');<br />        var spa = document.querySelector('.spa');<br />        var ul = document.querySelector('ul');<br />        var change = document.querySelector('#change');<br />        var tex = document.querySelector('#tex');<br />        var box3 = document.querySelector('.box3')<br />        ipt.oninput = function() {<br />            but.disabled = false;<br />            spa.innerHTML = 20 - ipt.value.length;<br />            if (spa.innerHTML < 0) {<br />                spa.innerHTML = 0;<br />            }<br />        }<br />        but.onclick = function() {<br />            but.disabled = true;<br />            var list = document.createElement('li');<br />            var sp = document.createElement('span')<br />            list.appendChild(sp);<br />            sp.innerText = ipt.value;<br />            var edibtn = document.createElement('input');<br />            edibtn.type = 'button';<br />            edibtn.value = '编辑';<br />            var delbtn = document.createElement('input');<br />            delbtn.type = 'button';<br />            delbtn.value = '删除';<br />            list.appendChild(edibtn);<br />            list.appendChild(delbtn);<br />            ul.appendChild(list);<br />            ipt.value = '';<br />            spa.innerText = 20;<br />            delbtn.onclick = function() {<br />                ul.removeChild(list)<br />            }<br />            edibtn.onclick = function() {<br />                box3.style.display = 'block';<br />                tex.value = sp.innerText;<br />            }<br />            change.onclick = function() {<br />                box3.style.display = 'none';<br />                sp.innerText = tex.value;<br />            }<br />        }