需求:
1.页面上漂浮字体大小不一、颜色不一,从左向右滚动的弹幕;
2.底部中间有一个发送功能,可以发送新的弹幕;
3.底部的发送部分可以向下收起和弹出。
实现原理:
1、设置发送按钮的点击事件,事件函数中创建新节点,并js中取得文本框valu值后赋给新建节点实现弹幕的出现
2、在js中设置不同的随机数并增长合适倍数后赋予文本的style属性从而获得不同颜色,大小,位置高度不同的弹幕
3、使用间隔计时器不断改变弹幕元素的position位置属性从而实现弹幕的滚动,当滚动到边缘时初始化位置属性,使其重复滚动
实现代码:
HTML部分:
<div class="box">
<input type="text" name="" id="content">
<input type="submit" name="" id="fasong" value="发送">
<span id="shang">▲</span>
<span id="xia">▼</span>
</div>
CSS部分:
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: skyblue;
}
.box{
width: 400px;
position: absolute;
bottom: 40px;
left:40%;
}
.box #content{
width: 250px;
outline: none;
height: 20px;
border: 0.5px solid gray;
border-radius:8px ;
}
span{
color: white;
cursor: pointer;
}
#shang{
display: none;
position: absolute;
bottom:-35px;
left: 290px;
}
#xia{
display: inline;
}
</style>
JS部分:
//发送按钮的点击事件
$("#fasong").click(function(){
//创建新节点
var div= document.createElement("div")
//将输入信息赋予新节点
div.innerHTML=document.getElementById("content").value
div.classList.add="new_div"
$("body").append(div)
//获取并设置top,font_size,color的随机数值
var newram_po=Math.floor(Math.random()*600)
var newram_si=Math.floor(Math.random()*30)
var newram_co=Math.floor(Math.random()*1200)
div.style.position="absolute"
div.style.top=newram_po+"px"
div.style.fontSize=newram_si+"px"
div.style.color="#"+newram_co
//设置计时器实现弹幕滚动
setInterval(function(){
var lefts=parseInt(getComputedStyle(div).left)
var rights=parseInt(getComputedStyle(div).right)
/* console.log(lefts) */
div.style.left=lefts+1+"px"
//弹幕到达边缘后初始化位置
if(rights==0){
div.style.left=0
}
},10)
})
//倒三角点击事件
$("#xia").click(function(){
$("#xia").css(`display`,`none`)
$("#content").css(`display`,`none`)
$("#fasong").css(`display`,`none`)
$("#shang").css(`display`,`inline`)
})
$("#shang").click(function(){
$("#xia").css(`display`,`inline`)
$("#content").css(`display`,`inline`)
$("#fasong").css(`display`,`inline`)
$("#shang").css(`display`,`none`)
})
效果:
弹幕