实现一个弹幕

html代码：

Document </div> <section> <input type="text" placeholder="请输入弹幕～"> <input type="button" value="发送"> <p> 请选择字体颜色：<input type="color" value="#d04949"> </p > </section> </article> <script src="./index.js"></script>

css代码： div { width: 500px; height: 200px; background-color: black; position: relative; overflow: hidden; }

article { width: 600px; margin: auto; color: red; }

section { color: black; }

js代码：//函数 let inputStr = document.querySelector(“input”); let divEle = document.querySelector(“div”); let inputColor = document.querySelector(“p>input”); let sendEle = document.querySelector(“input[value=‘发送’]”);

sendEle.addEventListener(“click”, moveLeft); //输入框中按下回车，直接发送 inputStr.addEventListener(“keypress”, function (e) { let event = e || window.event; // if (event.key == “Enter”) { // moveLeft(); // } event.key == “Enter” ? moveLeft() : “”; });

function moveLeft() { //创建子节点（span） let newSpan = document.createElement(“span”); //创建子节点的文本节点 //获取用户的输入 newSpan.innerText = inputStr.value; //清楚输入框内容 inputStr.value = “”; //添加给父节点 divEle.appendChild(newSpan); //设置子节点的位置 newSpan.style.position = “absolute”; //left值固定 divEle.offsetWidth newSpan.style.left = divEle.clientWidth + “px”; //top随机（0到父元素高度-子元素高度） newSpan.style.top = getRandomNum(0, divEle.clientHeight - newSpan.clientHeight) + “px”; //修改断词规则（识别半角空格） newSpan.style.wordBreak = “keep-all”; //浏览器会忽略空格 newSpan.style.whiteSpace = “nowrap”

//子节点字体颜色设置 //获取用户选择的颜色 newSpan.style.color = inputColor.value; //时间函数v1.0 // let timer = setInterval(move, 100); // let i = divEle.clientWidth; // //每个子节点的移动速度 // let speed = getRandomNum(10, 50); // //被调用的函数（向左移动） // function move() { // let j = parseInt(newSpan.style.left); // newSpan.style.left = j - speed + "px"; // if (parseInt(newSpan.style.left) < -newSpan.clientWidth) { // //【性能优化】 // clearInterval(timer); // //获取自身的宽度 // //判断是否移出自身的宽（是，就删除） // newSpan.remove(); // } // } //时间函数v2.0 let timer = setInterval(move, getRandomNum(1, 20)); let i = divEle.clientWidth; //每个子节点的移动速度 //被调用的函数（向左移动） function move() { newSpan.style.left = --i + "px"; if (parseInt(newSpan.style.left) == -newSpan.clientWidth) { //【性能优化】      clearInterval(timer);

//获取自身的宽度             //判断是否移出自身的宽（是，就删除）             newSpan.remove();         }     } } //随机函数 function getRandomNum(min, max = 0) {     if (min > max) {         [min, max] = [max, min];     }     return parseInt((max - min + 1) * Math.random() + min); }