Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

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

2025-03-31 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 215

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report