当前位置：网站首页>DOM node object + time node comprehensive case

DOM node object + time node comprehensive case

2022-07-07 05:25:00 【Dark horse programmer official】

 

demand 1

1. register input event

2. Assign the length of the content of the text to the corresponding value

3. Form maxlength Attributes can be directly limited to 200 Between

demand 2

  • Clone predefined templates , Put the template's hidden Property is set to false, And finally show it on the page
  • Judge if the content is empty , The prompt cannot be blank , And directly return
  • Meaningless space entry is prevented , Use string .trim() Remove leading and trailing spaces , And put the form value The value is set to an empty string

demand 3

  • Get the content of the text field , Assigned to the new tag cloned from the template content.innerText
  • Random access to the contents of the data array , Replace newNode Picture and name of
  • Use time objects to make time dynamic   new Date().toLocaleString()

demand 4

  • In the event handler function, click the button , Register click events
  • ( It's easy to get wrong : You must get... In the event , You can't get... Outside )
  • Delete the corresponding element ( adopt this Get the corresponding element to be deleted )

demand 5

  • Reset the form field content to empty
  • take userCount Reset the contents to 0

Microblog publishing cases 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title> Micro-blog released </title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .w {
      width: 900px;
      margin: 0 auto;
    }

    .controls textarea {
      width: 878px;
      height: 100px;
      resize: none;
      border-radius: 10px;
      outline: none;
      padding-left: 20px;
      padding-top: 10px;
      font-size: 18px;
    }

    .controls {
      overflow: hidden;
    }

    .controls div {
      float: right;
    }

    .controls div span {
      color: #666;
    }

    .controls div .useCount {
      color: red;
    }

    .controls div button {
      width: 100px;
      outline: none;
      border: none;
      background: rgb(0, 132, 255);
      height: 30px;
      cursor: pointer;
      color: #fff;
      font: bold 14px ' Song style ';
      transition: all 0.5s;
    }

    .controls div button:hover {
      background: rgb(0, 225, 255);
    }

    .controls div button:disabled {
      background: rgba(0, 225, 255, 0.5);
    }

    .contentList {
      margin-top: 50px;
    }

    .contentList li {
      padding: 20px 0;
      border-bottom: 1px dashed #ccc;
      position: relative;
    }

    .contentList li .info {
      position: relative;
    }

    .contentList li .info span {
      position: absolute;
      top: 15px;
      left: 100px;
      font: bold 16px ' Song style ';
    }

    .contentList li .info p {
      position: absolute;
      top: 40px;
      left: 100px;
      color: #aaa;
      font-size: 12px;
    }

    .contentList img {
      width: 80px;
      border-radius: 50%;
    }

    .contentList li .content {
      padding-left: 100px;
      color: #666;
      word-break: break-all;
    }

    .contentList li .the_del {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 28px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="w">
    <!--  Operation interface  -->
    <div class="controls">
      <img src="./images/9.6/tip.png" alt="" /><br />
      <!-- maxlength  It can be used to limit the length of form input  -->
      <textarea placeholder=" Say something ..." id="area" cols="30" rows="10" maxlength="200"></textarea>
      <div>
        <span class="useCount" id="useCount">0</span>
        <span>/</span>
        <span>200</span>
        <button id="send"> Release </button>
      </div>
    </div>
    <!--  Microblog content list  -->
    <div class="contentList">
      <ul id="list"></ul>
    </div>
  </div>

  <!--  Added hidden The attribute element will be directly hidden  -->
  <li hidden>
    <div class="info">
      <img class="userpic" src="./images/9.6/03.jpg" />
      <span class="username"> Dead data : Hundred Li keep the promise </span>
      <p class="send-time"> Dead data : Published on  2020 year 12 month 05 Japan  00:07:54</p>
    </div>
    <div class="content"> Dead data :111</div>
    <span class="the_del">X</span>
  </li>

  <script>
    // maxlength  Is a form attribute ,  The function is to set a maximum length for the form 

    //  Analog data 
    let dataArr = [
      { uname: ' Sima yi ', imgSrc: './images/9.5/01.jpg' },
      { uname: ' Nu Wa ', imgSrc: './images/9.5/02.jpg' },
      { uname: ' Hundred Li keep the promise ', imgSrc: './images/9.5/03.jpg' },
      { uname: ' Arthur ', imgSrc: './images/9.5/04.jpg' },
      { uname: ' concubine ', imgSrc: './images/9.5/05.jpg' },
      { uname: ' Zhang Liang ', imgSrc: './images/9.5/06.jpg' },
      { uname: ' Angela ', imgSrc: './images/9.5/07.jpg' },
      { uname: ' Li Bai ', imgSrc: './images/9.5/08.jpg' },
      { uname: ' Acor ', imgSrc: './images/9.5/09.jpg' },
      { uname: ' mozi ', imgSrc: './images/9.5/10.jpg' },
      { uname: ' ruban ', imgSrc: './images/9.5/11.jpg' },
      { uname: ' Ying Zheng ', imgSrc: './images/9.5/12.jpg' },
      { uname: ' Sun Bin ', imgSrc: './images/9.5/13.jpg' },
      { uname: ' Zhou Yu ', imgSrc: './images/9.5/14.jpg' },
      { uname: ' The professor ', imgSrc: './images/9.5/15.jpg' },
      { uname: ' Judge dee ', imgSrc: './images/9.5/16.jpg' },
      { uname: ' Magpie ', imgSrc: './images/9.5/17.jpg' },
      { uname: ' Marco Polo ', imgSrc: './images/9.5/18.jpg' },
      { uname: ' Luna ', imgSrc: './images/9.5/19.jpg' },
      { uname: ' The Monkey King ', imgSrc: './images/9.5/20.jpg' },
      { uname: ' Huang Zhong ', imgSrc: './images/9.5/21.jpg' },
      { uname: ' Hundred Li xuance ', imgSrc: './images/9.5/22.jpg' },
    ]
    //  demand 1： Detect the number of words entered by the user 
    //   1.  register input event 
    //   2.  Assign the length of the content of the text to the corresponding value 
    //   3.  Form maxlength Attributes can be directly limited to 200 Between 
    let textarea = document.querySelector('textarea')
    let useCount = document.querySelector('.useCount')
    //  Release button 
    let send = document.querySelector('#send')
    // ul
    let ul = document.querySelector('#list')
    textarea.addEventListener('input', function () {
      // console.log(this.value.length)
      useCount.innerHTML = this.value.length
    })

    //  demand 2：  Input cannot be empty 
    //    Click on button After judgment 
    //    Judge if the content is empty , The prompt cannot be blank ,  And directly return  Can't be empty 
    //    Meaningless space entry is prevented ,  Use string .trim() Remove leading and trailing spaces 
    // console.log('  str')
    // console.log('  str '.trim())
    //    And put the form value The value is set to an empty string 
    //    At the same time, the red color below is set to 0
    send.addEventListener('click', function () {
      if (textarea.value.trim() === '') {
        //    And put the form value The value is set to an empty string 
        textarea.value = ''
        //    At the same time, the red color below is set to 0
        useCount.innerHTML = 0
        return alert(' The content cannot be empty ')
      }
      //  random number 
      function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min
      }
      let random = getRandom(0, dataArr.length - 1)
      //  demand 3：    Add a message    writes send  Inside of 
      //  Create a small li, And then inside through innerHTML Additional data 
      let li = document.createElement('li')
      //  Random access to the contents of the data array ,  Replace newNode The picture and name of and the content of the message 
      li.innerHTML = `
       <div class="info">
      <img class="userpic" src=${dataArr[random].imgSrc}>
      <span class="username">${dataArr[random].uname}</span>
      <p class="send-time"> ${new Date().toLocaleString()} </p>
      </div>
      <div class="content">${textarea.value}</div>
      <span class="the_del">X</span>
      `

      //  demand 4： Delete message    Put it in front of the addition 
      //  In the event handler function, click the button ,  Register click events 
      //   ( It's easy to get wrong :  You must get... In the event ,  You can't get... Outside )
      //  Delete the corresponding element ( adopt this Get the corresponding element to be deleted )
      //  Let me show you a way :  Add in ul In front of , In this way, the event is bound while the element is created , Fabulous ~~
      //  Use  li.querySelector()
      let del = li.querySelector('.the_del')
      del.addEventListener('click', function () {
        //  Delete operation    Click on X   Deleted small li   Parent element .removeChild( Subelement )
        ul.removeChild(li)
      })
      //  Use time objects to make time dynamic        new Date().toLocaleString()
      //  Append to  ul   use    Parent element .insertBefore( Subelement ,  In front of that element )
      ul.insertBefore(li, ul.children[0])
      //  demand 5： Reset 
      //  Reset the form field content to empty 
      //  take userCount Reset the contents to 0
      textarea.value = ''
      //    At the same time, the red color below is set to 0
      useCount.innerHTML = 0
    })
  </script>

</body>

</html>

material ：

Dark horse front-end column has a lot of dry goods , Focus on relearning , It's convenient ~

2022 Front end learning roadmap ： Course 、 Source code 、 note , Technology stack   In addition, the circuit diagram is updated in real time ！ Friends who need after-school materials , You can tell me directly .

原网站

版权声明
本文为[Dark horse programmer official]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/188/202207062323290566.html

边栏推荐

猜你喜欢

随机推荐