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

来源：互联网发布：外汇软件编辑：程序博客网时间：2024/06/06 19:14

利用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);

程序运行截图如下

阅读全文

0 0