You can write a bullet screen effect, random color, random position, additional effects without detail, jquery implementation
<template> <div class="box"> <div class="textBox"></div> <input type="text" class="ipt" /> <button Class =" BTN "</button> <! -- <el-button @click="open"></el-button> --> </div> </template> <script> import $ from "jquery"; export default { data() { return {}; }, mounted() { $(".btn").on("click", function() { var top, right; var text = $(".ipt").val() .trim(); // console.log(text); var appendspan = $("<span class='childspan'>" + text + "</span>"); $(".textBox").append(appendspan); // $(".childspan").animate(); top = Math.random() * ($(".textBox").height() - appendspan.height()); // console.log(top); appendspan.css({ right: 0, top: top, color: getcolor() }); var lastspan = $(".textspan>span:last-child"); var boxwidth = $(".textBox").width() - appendspan.width(); // console.log(boxwidth); appendspan.animate({ right: boxwidth }, 3000, function() { $(this).remove(); }); $(".ipt").val(""); function getcolor() { var color = ""; var colorArr = [ "1", "2", "3", "4", "5", "6","7", "8", "9", "A", "B", "C","D","E","F"]; for (var i = 0; i <= 5; i++) { color += colorArr[Math.floor(Math.random() * 16)]; } return "#" + color; }}); }}; </script>Copy the code