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

来源：互联网发布：java 分布式事务编辑：程序博客网时间：2024/05/18 01:52

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

随机色
因为上一篇固定了颜色为红色,我想让每一次的颜色都随机显示所以可以封装一个函数,用来表示随机色;

随机高度
上一次高度固定为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>

阅读全文

0 0