jQuery制作随机色弹幕墙

最新推荐文章于 2021-08-03 14:39:58 发布

_吟游诗人

最新推荐文章于 2021-08-03 14:39:58 发布

阅读量2.9k

点赞数 2

分类专栏： FreeCodeCamp之旅文章标签： jquery 随机颜色弹幕墙网页

本文链接：https://blog.csdn.net/qq_32623363/article/details/75042028

版权

FreeCodeCamp之旅专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jQuery功能确实强大，虽然用起来不熟练但是在百度大法的帮助下还是挺好使的，今天便用它实现了一个弹幕墙。
上张成果图，页面没用心写，有点辣眼睛
这里写图片描述

性子急的朋友可以直接去看代码和效果演示—>戳我<—

点击此处下载代码：http://download.csdn.net/download/qq_32623363/9896968

界面制作就不啰嗦了，后面会放上代码，先讲一下关键技术。

实现思路：点击发送弹幕，就会将输入的值保存进一个数组里，并且将当前输入的在弹幕显示框显示出来，同时后台也一直从该数组中每隔一段时间随机抽取一条记录显示出来。点击关闭弹幕会清空弹幕墙并且停止后台的读取，同时将按钮上的字变成启动弹幕。而在弹幕墙关闭的时候点击发送弹幕，也会启动弹幕墙。

BUG们：
1、弹幕墙里每一条记录的div必须设置为absolute。如果不设置，则不能使用定位，不方便弹幕的移动。如果设置为relative，一开始的话会相对于上一条弹幕来定位，影响使用效果。
2、弹幕进入弹幕墙最左边后必须将这一条弹幕的div从弹幕墙的div中清楚，否则弹幕将积压在弹幕墙左侧不可见处，等到后面会发现弹幕都不动了，因为都挤在一块了。

关键技术：
1、随机颜色：这个目前发现的最好的方法是

var getRandomColor = function(){
    return '#'+('00000'+(Math.random()*0xffffff <<0).toString(16)).substr(-6); 
  }

解释一下：Math.random()就不解释了，乘以0xffffff是取0-ffffff中间的某一个值，但是这个娶不到白色，要白色的话就需要将0xffffff换成0x1000000，但是因为我的背景是白色就去掉白色了。“<<0“的作用是取整。前面的5个0是默认在这个随机数前面加上5位，因为6位随机数的可能不足6位，在给颜色赋值的话不满6位就会有点问题。最后的substr就不用解释了。哦对，to/string(16)是转换成16进制。
觉得我没说清楚的请看，我就是参考这儿的：http://www.jb51.net/article/35931.htm

2、后台持续读取：没有简单的用死循环，用了一个很巧妙的方法——递归。

var runDanMu = function(){
    ......
    setTimeout(runDanMu,3000);
  }

并在$(document).ready(function(){});里调用该函数。

下面放完整代码：

HTML

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>danmu</title>

    <link rel="stylesheet" href="css/style.css">

</head>

<body>
    <center><h1>YinyouPoet Danmu Wall</h1></center>
    <div class="danmuShow">

    </div>

    <div class="submit">
        <center>
            <input id="comments" type="text" name="comments" placeholder="输入文字">
            <button id="submit">发送弹幕</button>
            <button id="change">关闭弹幕</button>
        </center>
    </div>

    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src="js/index.js"></script>
</body>
</html>

CSS

*{
  padding:0;
  margin: 0;

}
.body{

}

.danmuShow{
    position: relative;
    margin-top: 20px;
    height: 400px;
    margin-left: 20px;
    margin-right: 20px;
    border: 1px #ccc solid;
    font-size: 30px;
    overflow: hidden;
}

.submit{
    margin-top: 20px;
}

#comments{
    font-size: 1.5em;
    width: 500px;
}

#submit{
    font-size: 1.5em;
    background: #f1c943;
}
#change{
    font-size: 1.5em;
    background: #ff5231;
}

var arr = [];               //用来保存弹幕数据的数组
var start = true;           //用来判断是否需要开启弹幕
$(document).ready(function(){
  /*console.log($("#submit").html());
  $("#submit").html("新按钮");*/
  var showscreen = $(".danmuShow");            //显示弹幕的div
  var showHeight = showscreen.height();     //此div的高度
  var showWidth = showscreen.width();       //此div的宽度


  //点击发送弹幕按钮
  $("#submit").click(function(){
    var damutext = $("#comments").val();   //获取发送值
    $("#comments").val("");                    //清空发送区
    console.log(damutext);                  
    arr.push(damutext);                     //将值放入数据数组中


    var textObj = $("<div>"+damutext+"</div>");
    showscreen.append(textObj);
    console.log("textObj:"+textObj.html());
    moveObj(textObj);                       //写在后面的 函数

    if(start == false){
        start = true;
        $("#change").html("关闭弹幕");
        runDanMu();                         //开启弹幕
    }
  });

  //关闭、开启弹幕按钮点击事件
  $("#change").click(function(){
    if(start == true){  //如果点击关闭弹幕
        start = false;  
        $("#change").html("开启弹幕");
        showscreen.empty();
    }
    else if(start == false){
        start = true;   //如果点击开启弹幕
        $("#change").html("关闭弹幕");
        runDanMu();                         //开启弹幕
    }
  });


  var topMin = showscreen.offset().top;
  var topMax = topMin+showHeight;
  //console.log("最小高"+topMin);
  //console.log("最大高"+topMax);

  var top = topMin;

    //将传入的参数,也就是那obj，进行移动
  var moveObj = function(obj){
    obj.css({
        display: "inline",
        position:"absolute"
    });

    var begin = showscreen.width() - obj.width();   //一开始的起点
    top+=50;

    if(top > topMax-50){
        top = topMin;
    }
    //console.log("showscreenWidth"+showscreen.width());
    //console.log("objWidth",obj.width());

    console.log("begin:"+begin);
    console.log("top:"+top);
    console.log("obj"+obj);

    obj.css({
        left:begin,
        top:top,
        color:getRandomColor()
    });

    var time = 20000 + 10000*Math.random();
    obj.animate({
        left:"-"+begin+"px"
    },time,function(){
        obj.remove();
    });
  }

//获取随机颜色的最高级写法 http://www.jb51.net/article/35931.htm
  var getRandomColor = function(){
    return '#'+('00000'+(Math.random()*0xffffff <<0).toString(16)).substr(-6); 
  }

  var runDanMu = function(){
    if(start == true){
        if(arr.length > 0){
            var n = Math.floor(Math.random()* arr.length + 1)-1;
            var textObj = $("<div>"+arr[n]+"</div>");
            showscreen.append(textObj);
            //console.log("loop:"+textObj.html());
            moveObj(textObj);
        }
    }
    setTimeout(runDanMu,3000);
  }

  jQuery.fx.interval = 50;
  runDanMu();

});

欢迎大家加入QQ群一起交流讨论，「吟游」程序人生——YinyouPoet

_吟游诗人

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
5
评论
jQuery制作随机色弹幕墙

jQuery功能确实强大，虽然用起来不熟练但是在百度大法的帮助下还是挺好使的，今天便用它实现了一个弹幕墙。上张成果图，页面没用心写，有点辣眼睛性子急的朋友可以直接去看代码和效果演示—>戳我<—界面制作就不啰嗦了，后面会放上代码，先讲一下关键技术。实现思路：点击发送弹幕，就会将输入的值保存进一个数组里，并且将当前输入的在弹幕显示框显示出来，同时后台也一直从该数组中每隔一段时间随机抽取一条记录显
复制链接

扫一扫