The year of the tiger is coming. Come and make a wish. I heard that the wish will come true

Preface

The year of the tiger is coming , Children , Big friends have big and small wishes . Come on , As a front-end xiaoxiaobai, I use css+js Wrote a new year wish wall , Come and make a wish

css part

       Simple talk about css part , When we learn various programming languages , The deeper you learn , Often forget the simple content ,css You should still remember the basic content . ad locum , Wishing Wall css The style is mainly elastic box display: flex; ah , location position, Box shadow box-shadow:, Rounded border border-radius:, Weird box box-sizing And other background properties . Good looking web pages can also attract users , Enhance user experience , While pursuing cool functions , Don't forget the appearance of the web page .

Function part

Function one ： After clicking send , Make a wish that the blessings sent on the wall can be sent in the form of a barrage

Function realization

When the click event triggers , Dynamically generate barrage
What is the principle of moving the barrage ？
Control the movement of the box , I thought of a timer , Change the moving distance in a cycle , It is equivalent to changing the direction of the positioning attribute of the box （position: absolute; left: ;top: ;）, Let's encapsulate the movement of the box .

Formal parameter interpretation ：ele Represents the object to be moved ,end Indicates the end of the barrage

 // Encapsulate the moving distance of the barrage ,
        function move(ele, end) {
    
            var second = 3
            var t = setInterval(function() {
    
                var eLeft = parseInt(getComputedStyle(ele).left);
                ele.style.left = eLeft - second + 'px'
                if (eLeft - second <= end) {
    
                    clearInterval(t)
                    ele.remove();
                    console.log(2);
                }
                console.log(1);
            }, 50)
        }

When we watch the movie again , The barrage is definitely not generated at the same height , So how to make the box generate random height ？
Random height , Of course, you have to encapsulate random numbers . Change the positioning attribute of the box top value , Random change , Then the height of the box will change randomly , Be careful , The value of height also has limits .
The height of the box itself ：

• offsetWidth:border+padding+ Content width
• clientwidth:padding+ Content width

 // Encapsulated random number 
        function ran(min, max) {
    
            return parseInt(Math.random() * (max - min) + min)
        }

You can also change the random color of the font , Color Fonts

        // Package random colors 
        function rancolor() {
    
            var r = ran(0, 256)
            var g = ran(0, 256)
            var b = ran(0, 256)
            return `rgb(${
      r},${
      g},${
      b})`
        }

Dynamically generate barrage ,createElement（） Method , Then insert it into the position where the barrage is displayed appendChild（） Method . Using template strings `` , Add the contents of the box , Display the values inside with interpolation expressions ${ } To display .
for example , We generate a barrage here . Here's a trick , First test what you want to add , style , Write the label first , Comment it out when it is implemented .

 let oP = document.createElement('p')
                oP.className = 'wall_p'
                oCont.appendChild(oP)
  // Add barrage 
                oP.innerHTML = `<img src="./images/xiaoxin_4.jpg" alt=""> <span style="color: black; font-size: 12px;font-weight: bold;">${
      oInp1.value}</span> <span>:</span> <span>${
      oInp2.value}</span> `

Function 2 ：： After clicking send , Wish that the blessings sent on the wall can be saved in the form of post it notes ;

Function realization ：

After the click event is triggered , Generate dynamic boxes
Like a barrage , Generate dynamic boxes , But the box won't move , The location of the box , Fixed in the display position by the value of the orientation of the positioning attribute . Of course, the box is also dynamically generated , Direction values are also randomly generated , The scope should be clear .

What to do after triggering the click event

oBtn.onclick = function() {
    
            if (oInp1.value.trim() != '' && oInp2.value.trim() != '') {
    
                var oP = document.createElement('p')
                var oM = document.createElement('div')
                oP.className = 'wall_p'
                oM.className = 'memo'
                oCont.appendChild(oP)
                oCont.appendChild(oM)

                // Add barrage 
                oP.innerHTML = `<img src="./images/xiaoxin_4.jpg" alt=""> <span style="color: black; font-size: 12px;font-weight: bold;">${
      oInp1.value}</span> <span>:</span> <span>${
      oInp2.value}</span> `

                // Add notes 
                oM.innerHTML = ` <p class="time" >${
      nowdate()}</p> <p class="content">${
      oInp2.value}</p> <p class="name">${
      oInp1.value}</p> `
                oP.style.top = ran(0, oCont.clientHeight - oP.clientHeight) + 'px'
                oM.style.top = ran(0, oCont.clientHeight - oM.clientHeight) + 'px'
                oM.style.left = ran(0, oCont.clientWidth - oM.clientWidth) + 'px'

                move(oP, -oP.clientWidth)
                oP.style.color = rancolor();
                oM.style.color = rancolor();
                // oInp2.value = null
            } else {
    
                alert(' The input cannot be empty ')
            }
        }

Speaking of this , There are also improvements in the Wishing Wall , The data of the message is stored in the database , Users can see the content of other people's comments .
Source code address ：