How to realize a simple on-screen comment system by js

This article introduces the relevant knowledge of "how to achieve a simple on-screen comment system in js". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Realization idea

1. Write the static page frame first.

2. Give simple css code to make the page a little more beautiful

* {/ * Page initialization * / margin: 0; padding: 0;} body {background-color: burlywood;} # father {width: 800px; height: 550px; margin: 50px auto;} # top {width: 800px; height: 500px } video {width: 800px; height: 500px;} # bottom {width: 800px; height: 50px; background-color: # 000; text-align: center; line-height: 50px;}

Such a simple static page is complete, and we'll write the JS code for the rest.

3. Let's encapsulate a few functions to facilitate later use.

/ / randomly generate a color function rgb () {let r = Math.floor (Math.random () * 256); let g = Math.floor (Math.random () * 256); let b = Math.floor (Math.random () * 256) Return 'rgb (' + rattlesticks * (max-min) + min)'} / / generate a specified range of data integers function stochastic (max,min) {return Math.floor (Math.random () * (max-min) + min);}

The on-screen comment we sent is placed in the span tag. Here we want to place the span in # top with positioning.

/ / after adding the span tag function barrage () {let span = document.createElement ("span"); span [XSS _ clean] = txt.value; span.style.color = rgb (); / / on-screen comment color span.style.fontSize = stochastic (50jue 12) + 'px'; / / font size span.style.top = stochastic (420jin0) +' px' / / location let right =-2000 span.style.right = right+ 'px' / / distance to the right tops.appendChild (span); / / adding span tags / / moving the on-screen comment by timer let tiem = setInterval () = > {right++ Span.style.right = right + 'px' if (right > 800) {tops.removeChild (span); / / when the on-screen comment moves out of the video, destroy the element clearInterval (tiem) directly; / / close the timer}}, 10) / feel that the speed is too slow and you can adjust it here.

4. After encapsulating the function, call it now.

Let btn = document.getElementById ('btn'); / / add a click event to the button btn.onclick = () = > {if (txt.value=='') return; / / return barrage (); txt.value=' directly if the user input is empty / / clear the input box} / / add a keyboard listening event (enter) document.addEventListener ('keydown', function (e) {if (e.keyCode = = 13) {if (txt.value=='') return; barrage (); txt.value=';}})

Finally, all the code is attached. I hope it will be helpful to you.

Js on-screen comment effect * {margin: 0; padding: 0;} body {background-color: burlywood;} # father {width: 800px; height: 550px; margin: 50px auto;} # top {width: 800px; height: 500px Position: relative; overflow:hidden; / * overflow hide * /} video {width: 800px; height: 500px; object-fit:fill; / * adapt to the height and width of the specified container * /} # bottom {width: 800px; height: 50px Background-color: # 000; text-align: center; line-height: 50px;} span {position: absolute; right: 0; top:0 } let txt = document.getElementById ('txt'); let btn = document.getElementById (' btn'); let tops = document.getElementById ('top') / / add a click event to the button btn.onclick = () = > {if (txt.value=='') return; / / return barrage () directly if the user input is empty; txt.value='' / / clear the input box} / / add a keyboard listening event (enter) document.addEventListener ('keydown', function (e) {if (e.keyCode = = 13) {if (txt.value=='') return; / / return barrage (); txt.value=' 'directly when the user input is empty / / clear input box}}); / / randomly generate a color function rgb () {let r = Math.floor (Math.random () * 256); let g = Math.floor (Math.random () * 256); let b = Math.floor (Math.random () * 256) Return 'rgb (' + ringing, recording, writing, reading, writing, writing, etc.) / / generates a specified range of data integers function stochastic (max,min) {return Math.floor (Math.random () * (max-min) + min);} / / after adding the span tag function barrage () {let span = document.createElement ("span") Span [XSS _ clean] = txt.value; span.style.color = rgb (); span.style.fontSize = stochastic (50LJ 12) + 'px'; span.style.top = stochastic (420L0) +' px'; span.style.right =-200 + 'px'; tops.appendChild (span); let right =-200 Let tiem = setInterval (() = > {right++; span.style.right = right+ 'px' if (right > 800) {tops.removeChild (span); / / when the on-screen comment moves out of the video, destroy the element clearInterval (tiem) / / turn off timer}}, 10) / feel that the speed is too slow can be adjusted here} "how to implement a simple on-screen comment system in js". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!