Javascript实现的一个简单的弹幕效果-优化版

最新推荐文章于 2024-10-23 18:04:14 发布

最新推荐文章于 2024-10-23 18:04:14 发布 · 755 阅读

原生JS 同时被 2 个专栏收录

2 篇文章

订阅专栏

jQuery

2 篇文章

订阅专栏

本文介绍了如何优化弹幕效果，包括实现随机颜色显示、随机高度显示及键盘事件触发等功能。

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

在上一篇文章中,弹幕的基本效果已经完成,这里主要是对一些内容的优化补充!

随机色
因为上一篇固定了颜色为红色,我想让每一次的颜色都随机显示所以可以封装一个函数,用来表示随机色;
随机高度
上一次高度固定为400,这一次可以修改成随机的top值
键盘的键入事件
当我按键盘上面的enter键时,自动触发click事件

function getColor() { //随机色函数
  var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F']; 
  var str = '#'; 
  var len = arr.length; for (var i = 0; i < 6; i++) { 
        var num = parseInt(Math.random() * len);
        str += arr[num]; 
      } 
      return str; 
  }

function getTop() { //随机高度
    var randomY = parseInt(Math.random() * 400);
    return randomY;
}

修改完成以后,完整的代码如下:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    html,
    body {
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
        font-family: "微软雅黑";
        font-size: 62.5%;
    }

    .boxDom {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .idDom {
        width: 100%;
        height: 100px;
        background: #666;
        position: fixed;
        bottom: 0px;
    }

    .content {
        display: inline-block;
        width: 430px;
        height: 40px;
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        margin: auto;
    }

    .title {
        display: inline;
        font-size: 4em;
        vertical-align: bottom;
        color: #fff;
    }

    .text {
        border: none;
        width: 300px;
        height: 30px;
        border-radius: 5px;
        font-size: 2.4em;
    }

    .btn {
        width: 60px;
        height: 30px;
        background: #f90000;
        border: none;
        color: #fff;
        font-size: 2.4em;
    }

    span {
        width: 300px;
        height: 40px;
        position: absolute;
        overflow: hidden;
        color: #000;
        font-size: 4em;
        line-height: 1.5em;
        cursor: pointer;
        white-space: nowrap;
    }
    </style>
</head>

<body>
    <div class="boxDom" id="boxDom">
        <div class="idDom" id="idDom">
            <div class="content">
                <p class="title">吐槽:</p>
                <input type="text" class="text" id="text" />
                <input type="button" class="btn" id="btn" value="发射">
            </div>
        </div>
    </div>
</body>
<script src="jquery-1.11.1.min.js"></script>
<script>
function getColor() { 
  var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F']; 
  var str = '#'; 
  var len = arr.length; for (var i = 0; i < 6; i++) { 
        var num = parseInt(Math.random() * len);
        str += arr[num]; 
      } 
      return str; 
  }

function getTop() {
    var randomY = parseInt(Math.random() * 400);
    return randomY;
}
$(function() {

    var $txt = $('#text');

    $('#btn').click(function() {

        if ($txt.val().trim() === '') {
            return;
        }

        $('<span></span>')
            .text($txt.val())
            .css({
                color: getColor(),
                left: $(window).width(),
                top: getTop()
            })
            .animate({
                left: -200
            }, 10000, 'linear', function() {
                $(this).remove();
            })
            .appendTo('#boxDom');

        $txt.val('');
    });

    $('#text').keyup(function(e) {
        if (e.keyCode === 13) {
            $('#btn').click();
        }
    })
});
</script>

</html>