JS实现弹幕小案例_javascript技巧_

       
         
           
吐槽:
                      发射         
       

// 获取元素 let btn = document.querySelector('#btn') let text = document.querySelector('#text') let boxDom = document.querySelector('#boxDom')   // 为按钮绑定事件 btn.addEventListener('click', function() {     // 获取用户输入内容     // 表单元素input的值的获取是使用value     let content = text.value     // trim:去除左右空格     if (content.trim().length == 0) {         alert('请输入一个内容再发弹幕')         return     }     // 创建一个元素     // createElement：创建元素     let span = document.createElement('span')     span.innerText = content       // 为元素设置样式     // clientWidth:获取元素的实际宽度     // 设置left值为元素右侧外     span.style.left = boxDom.clientWidth + 'px'     // 设置top为上半区随机位置     span.style.top =         parseInt((Math.random() * boxDom.clientHeight) / 2) + 'px'     // span.style.color = setColor()     //设置字体的随机颜色     span.style.color = `rgb(${Math.random() * 255},${Math.random() *         255},${Math.random() * 255})`       // 让元素动起来 -- 配合过渡样式     // setTimeout(() => {     //   span.style.left = -span.clientWidth + 'px'     // }, 200)     // 距停止位置的距离     let dis = boxDom.clientWidth     // setInterval(需要执行的函数，时间间隔)     let tid = setInterval(function() {         dis -= 1         span.style.left = dis + 'px'         // 移动到目标位置，清除定时器         if (dis < -span.clientWidth) {             clearInterval(tid)             // 将当前的span移除             span.remove()         }     }, 4)       // 添加到指定容器中     // insertBefore：将指定的元素插入到参照元素的前面：父容器.insertBefore(子元素，参照元素)     // appendChild:将元素追加到所有子元素的最后: 父容器.appendChild(子元素)     // insertBefore：一定传入两个参数     boxDom.insertBefore(span, boxDom.children[0]) })