刚开始入门前端,想仿照FreeCodeCamp中的一个项目制作简单的弹幕墙。
步骤如下:
<强> 1,编写HTML代码:
创建一个弹幕显示墙,以及两个按钮,分别为“发送”和“清屏”,并在文本框中设置占位符为“说点什么吧?”以提示用户在此输入弹幕信息。
& lt; body>
& lt; div类=捌北?
& lt; div id="屏幕"比;
& lt; div类=癲m_show”比;
& lt; !——& lt; div>文本message</div>——比;
& lt;/div>
& lt;/div>
& lt; div类="编辑"比;
& lt; p>
& lt;输入占位符="说点什么吧?”=澳谌荨崩嘈?拔谋尽崩?比;
& lt;/p>
& lt; p>
& lt;输入类型=鞍磁ァ眂lass=胺⑺汀敝?" https://www.yisu.com/zixun/发送”/比;
& lt;输入类型=鞍磁ァ崩?扒逦奔壑?" https://www.yisu.com/zixun/清屏”/比;
& lt;/p>
& lt;/div>
& lt;/div>
& lt;/body>
<强> 2,设置各标签的CSS样式:
& lt; style>
.con {
background - color: floralwhite;
填充:40 px 80 px 80 px;
}
#{屏幕
background - color: # fff;
宽度:100%;
身高:380 px;
边界:1 px固体rgb (229、229、229);
字体大小:14 px;
}
.content {
边界:1 px固体rgb (204、204、204);
border - radius: 3 px;
宽度:320 px;
高度:35 px;
字体大小:14 px;
margin-top: 30 px;
}
.send {
边界:1 px固体rgb (230、80、30);
颜色:rgb (230、80、0);
border - radius: 3 px;
text-align:中心;
填充:0;
高度:35 px;
行高:35 px;
字体大小:14 px;
宽度:159 px;
背景颜色:白色;
}
.clear {
边界:1 px固体;
颜色:darkgray;
border - radius: 3 px;
text-align:中心;
填充:0;
高度:35 px;
行高:35 px;
字体大小:14 px;
宽度:159 px;
背景颜色:白色;
}
.edit {
保证金:20 px;
text-align:中心;
}
。text {
位置:绝对的;
}
* {
保证金:0;
填充:0;
}
.dm_show {
保证金:30 px;
}
& lt;/style>
CSS代码完成后效果如下:
完成后的效果如下:
<强> 3,编写JavaScript代码,添加按钮点击事件
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/jquery-easyui-1.3.5/jquery.min.js "祝辞& lt;/script>
& lt; script>
$(函数(){//设置“发送“按钮点击事件,将弹幕体显示在弹幕墙上
$ (' .send ') .click(函数(){//获取文本输入框的内容
var val=$ (' .content ') .val ();//将文本框的内容赋值给瓦尔后,将文本框的内容清除,以便用户下一次输入
$ (' .content ') .val (");//将文本框内容用div包裹起来,便于后续处理
var $内容=$ (' & lt; div类=拔谋尽痹凇? val + & lt;/div>);//获取弹幕墙对象
屏幕=美元(. getelementbyid("屏幕"));//设置弹幕体出现时的上边距,为任意值
var顶级screen.height美元=math . random () * () + 40;//设置弹幕体的上边距和左边距
美元content.css ({
上图:+“px”,
左:80
});//将弹幕体添加到弹幕墙中
$ (' .dm_show ') .append($内容);//弹幕体从左端移动到最右侧,时间为8秒,然后直接删除该元素
美元content.animate ({
左:$回答()+ 80 - content.width美元()
8000年},函数(){
(美元).remove ();
});
});//设置“清屏”点击事件,清除弹幕墙中的所有内容
$ (' .clear ') .click(函数(){
$ (' .dm_show ')空虚();
});
});
& lt;/script>
最终效果如下:
至此,一个简易的弹幕墙就完成了,因本人经验有限,所以弹幕墙还比较粗糙,还请各位批评指正。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
