“PK creative Spring Festival, I am participating in the” Spring Festival Creative submission contest “, please see: Spring Festival Creative Submission Contest”

preface

The year of the Tiger is coming, children, big friends have big and small wishes. Come on, as the front of the small white I use CSS + JS to write a New Year wishing wall, we quickly wish it

The CSS part

A little bit about CSS, when we learn various programming languages, the deeper we learn, we tend to forget the superficial content, CSS basic content you should remember. In this case, the wishing Wall CSS style is mainly elastic box display: flex; Ah, position, box shadow, box-shadow, border-radius, weird box, box-sizing, background. The good-looking web page can also attract users, improve user experience, in the pursuit of cool features at the same time, we should not forget the appearance of the web page.

Functional parts

Function 1: After clicking send, wishing wall can send the blessing message in the form of bullet screen

Function implementation

What is the principle of dynamically generating barrage movement when the click event is triggered? To control the movement of the box, we think of a timer, which changes the distance of movement within a cycle, equivalent to changing the value of the direction of the box’s positioning attribute (position: absolute; left: ; Top:) Let’s encapsulate the movement of the box.

Parameter description: ele indicates the object to be moved, and end indicates the position where the barrage ends

 // Encapsulates the distance the barrage moves,
        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)}Copy the code

When we watch the movie again, bullet barrage generation is definitely not at the same height, so how to make the box random height generation? Random height, of course, you have to encapsulate random numbers. Change the top value of the positioning property of the box randomly, and then the height of the box will also randomly change. Note that the height value has a limit. Height of the box itself:

  • OffsetWidth :border+padding+ content width
  • Clientwidth :padding+ Content width
 // Encapsulate a random number
        function ran(min, max) {
            return parseInt(Math.random() * (max - min) + min)
        }
Copy the code

Can also change the font random color, color font


        // Encapsulate random colors
        function rancolor() {
            var r = ran(0.256)
            var g = ran(0.256)
            var b = ran(0.256)
            return `rgb(${r}.${g}.${b}) `
        }
Copy the code

Dynamically generate the barrage using the createElement () method and insert it into the position of the display barrage appendChild () method. In the template string ‘ ‘, increment the contents of the box, display the values inside the interpolation ${} to display. For example, here we generate a barrage. The trick here is to test the additions first, write the styles, tags, and then comment them out when you implement them.

 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>
            `
Copy the code

Function 2: : After clicking send, the wishing wall can send the blessing in the form of sticky notes to save;

Function realization:

After the click event is triggered, the dynamic box is generated, just like the bullet screen, but the box will not move. The position of the box is fixed at the displayed position by the value of the orientation attribute. Of course, the box is also dynamically generated, the direction value is also randomly generated, the range should be clear.

What to do after the click event is triggered

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('Input can't be empty.')}}Copy the code

Speaking of which, the wishing Wall also has an improved part. The data stored in the message is in the database, so that users can see the content of other people’s messages.