FCC-----------Design a danmu app

最新推荐文章于 2021-12-28 22:54:36 发布

原创最新推荐文章于 2021-12-28 22:54:36 发布 · 825 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #FCC #jquery #弹幕墙 #html

FCC 同时被 2 个专栏收录

16 篇文章

订阅专栏

FCC题目总结

16 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和jQuery实现的简易弹幕系统。该系统包含弹幕发射与关闭功能，用户可以在输入框内输入文字，点击发送按钮或按回车键后，文字将作为弹幕出现在屏幕右侧并逐渐向左移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用javascript实现一个弹幕墙，页面包括一个显示墙，字幕输入框，发射弹幕按钮，关闭弹幕按钮，通过jquery自定义实现弹幕用到的函数。

在线演示地址为： Design a danmu app

下面来看一下代码分析：

HTML部分主要实现页面的布局： index.html

<!DOCTYPE html>
<html>
<head>
	<title>Design a danmu app</title>
 	<meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./css/main.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/main.js"></script>
    <script>
        $(document).ready(function(){
            $('.send').click(function(){
                $.bulletScreen.send($('#bullet-text').val(),$('.container'));
                $('#bullet-text').val("");
            });
            $('.close').click(function(){
                $.bulletScreen.clear($('.container'));
            });
            $('#bullet-text').keyup(function(e){
                if(e.keyCode==13){
                    $.bulletScreen.send($('#bullet-text').val(),$('.container'));
                    $('#bullet-text').val("");
                }
            });
        });
    </script>
</head>
<body>
    <div class="container">

    </div>
    <div class="menu-bar">
        <input class="input" type="text" placeholder="说点什么吧" id="bullet-text"/>
        <span class="btn send">发送弹幕</span>
        <span class="btn close">关闭弹幕</span>
    </div>
</body>
</html>

通过CSS对页面进行简单的布局设计： main.css

.container{
    width: 1000px;
    margin: 10px auto;
    background: #e8e8e8;
    height: 500px;
    border-radius: 5px;
    border: 3px solid #ddd;
    position: relative;
    overflow: hidden;
}
.menu-bar{
    width: 1000px;
    margin: 0px auto;
    text-align: center;
}
.btn{
    padding: 5px 20px;
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    margin: 15px;
    background: #37a;
    color: #fff;
    cursor: pointer;
}
#bullet-text{
	width: 280px;
	font-size: 18px;
	padding-left: 20px;
}

用jquery封装自定义的函数: main.js

(function($){
    $.bulletScreen={
        timers:[],
        add:function(val,container){
            var odiv = $("<div class='bullet'></div>");
            odiv.text(val);
            odiv.css({
                position:'absolute',
                fontSize:'20px',
                display:'block',
                whiteSpace:'nowrap'
            });
            var r = this.colors();
            var g = this.colors();
            var b = this.colors();
            odiv.css({
                color: "rgb(" + r + "," + g + "," + b + ")",
                top: (Math.floor(Math.random() * (container.height()-20))) + "px",
                width:odiv.width(),
                right: 0
            });
            container.append(odiv);
            this.move(odiv,container);
        },
        colors:function(){
        	return Math.floor(Math.random() * 255);
        },
        send:function(val,container){
            this.add(val,container);
        },
        move:function(odiv,container){
            var i = 0;
            var timer = setInterval(function() {
                odiv.css({
                    right: (i += 1) + "px"
                });
                if ((odiv.offset().left + odiv.width()) < container.offset().left) {
                   	i=0;
                    odiv.css({
                    right: (i += Math.floor(Math.random())) + "px"
                });
                }
            }, 10);
            this.timers.push(timer);
        },
        clear:function(container){
            for (var i = 0; i < this.timers.length; i++) {
                clearInterval(this.timers[i])
            }
            container.find('.bullet').remove();
        }
    }
})(jQuery);

程序运行截图如下