前端简易弹幕墙制作

刚开始入门前端,想仿照FreeCodeCamp中的一个项目制作简单的弹幕墙。

步骤如下:
1、编写HTML代码:
创建一个弹幕显示墙,以及两个按钮,分别为“发送”和“清屏”,并在文本框中设置placeholder为“说点什么吧?”以提示用户在此输入弹幕信息。

<body>
        <div class="con">           
            <div id="screen">
                <div class="dm_show">
                    
                div>
            div>
            <div class="edit">
                <p>
                    <input placeholder="说点什么吧?" class="content" type="text" />
                p>
                <p>
                    <input type="button" class="send" value="发送" />
                    <input type="button" class="clear" value="清屏" />
                p>
            div>      
        div>
    body>

2、设置各标签的CSS样式:

    <style>
            .con {
                background-color: floralwhite;
                padding: 40px 80px 80px;
            }
            #screen {
                background-color: #fff;
                width: 100%;
                height: 380px;
                border: 1px solid rgb(229, 229, 229);
                font-size: 14px;
            }

            .content {
                border: 1px solid rgb(204, 204, 204);
                border-radius: 3px;
                width: 320px;
                height: 35px;
                font-size: 14px;
                margin-top: 30px;

            }

            .send {
                border: 1px solid rgb(230, 80, 30);
                color: rgb(230, 80, 0);
                border-radius: 3px;
                text-align: center;
                padding: 0;
                height: 35px;
                line-height: 35px;
                font-size: 14px;
                width: 159px;
                background-color: white;
            }

            .clear {
                border: 1px solid;
                color: darkgray;
                border-radius: 3px;
                text-align: center;
                padding: 0;
                height: 35px;
                line-height: 35px;
                font-size: 14px;
                width: 159px;
                background-color: white;
            }

            .edit {
                margin: 20px;
                text-align: center;
            }

            .text {
                position: absolute;
            }
            *{
                margin: 0;
                padding: 0;
            }

            .dm_show{
                margin: 30px;
            }
        style>

CSS代码完成后效果如下:
完成后的效果如下:
前端简易弹幕墙制作_第1张图片

3、编写JavaScript代码,添加按钮点击事件

<script type="text/javascript" src="../jquery-easyui-1.3.5/jquery.min.js">script>
<script>
            $(function() {
                //设置“发送”按钮点击事件,将弹幕体显示在弹幕墙上
                $('.send').click(function() {
                    //获取文本输入框的内容
                    var val = $('.content').val();
                    //将文本框的内容赋值给val后,将文本框的内容清除,以便用户下一次输入
                    $('.content').val('');
                    //将文本框内容用div包裹起来,便于后续处理
                    var $content = $('
' + val + '
'
); //获取弹幕墙对象 $screen = $(document.getElementById("screen")); //设置弹幕体出现时的上边距,为任意值 var top = Math.random() * $screen.height()+40; //设置弹幕体的上边距和左边距 $content.css({ top: top + "px", left: 80 }); //将弹幕体添加到弹幕墙中 $('.dm_show').append($content); //弹幕体从左端移动到最右侧,时间为8秒,然后直接删除该元素 $content.animate({ left: $screen.width()+80-$content.width() }, 8000, function() { $(this).remove(); }); }); //设置“清屏”点击事件,清除弹幕墙中的所有内容 $('.clear').click(function() { $('.dm_show').empty(); }); });
script>

最终效果如下:
前端简易弹幕墙制作_第2张图片

至此,一个简易的弹幕墙就完成了,因本人经验有限,所以弹幕墙还比较粗糙,还请各位批评指正。

你可能感兴趣的:(前端小项目)