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

本文介绍了一个使用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);


程序运行截图如下

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值