从前端到后端实现弹幕的过程（jsp/Jquery.barrager.js）

Jquery.barrager.js插件，可以去网上下载！下载完后，就把下载文件中的js文件、css文件、图片文件、等等等文件全部拷贝到你们自己的项目中去,千万别拷贝漏了，如果你怕拷贝漏了什么，那就把所有的文件夹都拷贝到你自己的项目中去！

先看我们要做成什么样的效果：如下图

barrage.jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>使用Jquery.barrager.js专业的网页弹幕插件</title>

<!--

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

 -->

    <link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css" media="screen" />

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

    <link rel="stylesheet" type="text/css" href="dist/css/barrager.css">

    <link rel="stylesheet" type="text/css" href="static/pick-a-color/css/pick-a-color-1.2.3.min.css">

    <link type="text/css" rel="stylesheet" href="static/syntaxhighlighter/styles/shCoreDefault.css"/>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/body.css">

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/mark.css">

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/console.css">

<script type="text/javascript" src="${pageContext.request.contextPath}/js/console.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/weChatQRCode.js"></script>

</head>

<body style="background-color: #8FBC8F;">

<center>

<h1>使用Jquery.barrager.js专业的网页弹幕插件</h1>

<a href="https://www.jianshu.com/p/24d84b207d29" target="_blank">

Web实时弹幕原理分析

</a><br><br>

<a href="http://yaseng.org/jquery.barrager.js/" target="_blank">

Jquery.barrager.js弹幕插件

</a><br><br>

<input type="button" value="测试json(请在浏览器控制台查看结果)" οnclick="testJson()"><br><br>

<input id="text" type="text" style="height: 40px;">

<input type="button" value="我要吐槽(弹幕)" style="background-color: blue;" οnclick="testBarrager()">

<br><br>

<input type="button" value="清除所有的弹幕" style="background-color: red;" οnclick="cleanBarrager()">

<input type="button" value="ajax从服务器端取出所有的弹幕" οnclick="showBarrage()">

<br><br>

</center>

</body>

<script type="text/javascript" src="static/js/jquery-1.9.1.min.js"></script>

    <script type="text/javascript" src="static/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="static/js/tinycolor-0.9.15.min.js"></script>

    <script type="text/javascript" src="dist/js/jquery.barrager.js"></script>

    <script type="text/javascript" src="static/syntaxhighlighter/scripts/shCore.js"></script>

    <script type="text/javascript" src="static/syntaxhighlighter/scripts/shBrushJScript.js"></script>

    <script type="text/javascript" src="static/syntaxhighlighter/scripts/shBrushPhp.js"></script>

    <script type="text/javascript" src="static/pick-a-color/js/pick-a-color-1.2.3.min.js"></script>

<script type="text/javascript">

    var projectPath = '${pageContext.request.contextPath}';

    var item1 = {

        img : 'static/img/cute.png', //图片

        info : '在你的存款还没500万之前，你所有的理想跟爱好都应该是赚钱!', //文字

        href : '', //链接

        close : true, //显示关闭按钮

        speed : , //延迟,单位秒,默认6

        color : '#ffffff', //颜色,默认白色

        old_ie_color : '#ffffff', //ie低版兼容色,不能与网页背景相同,默认黑色

    }

    $('body').barrager(item1);

    //弹幕

    function testBarrager(){

        var item2 = {

                img : 'static/img/cute.png', //图片

                info : '' + document.getElementById("text").value + '', //文字

                href : '', //链接

                close : true, //显示关闭按钮

                speed : , //延迟,单位秒,默认6

                color : '#ffffff', //颜色,默认白色

                old_ie_color : '#ffffff', //ie低版兼容色,不能与网页背景相同,默认黑色

            }

        $('body').barrager(item2);

    }

    //清除所有的弹幕

    function cleanBarrager(){

        $.fn.barrager.removeAll();

    }

    function testJson(){

        var testText = document.getElementById("text").value;

        var jsonData = '{"message":testText, "age":"12"}';

        var json = eval('(' + jsonData + ')');

        console.log(json.message);

    }

    //从服务器端获取弹幕信息并显示所有的弹幕信息

    function showBarrage() {

        $.ajaxSettings.async = false;

        $.getJSON(projectPath + '/JsonData', function(data) {

            //每条弹幕发送间隔

            var looper_time =  * ;

            var items = data;

            //弹幕总数

            var total = data.length;

            //是否首次执行

            var run_once = true;

            //弹幕索引

            var index = ;

            //先执行一次

            barrager();

            function barrager() {

                if (run_once) {

                    //如果是首次执行,则设置一个定时器,并且把首次执行置为false

                    looper = setInterval(barrager, looper_time);

                    run_once = false;

                }

                //发布一个弹幕

                $('body').barrager(items[index]);

                //索引自增

                index++;

                //所有弹幕发布完毕，清除计时器。

                if (index == total) {

                    clearInterval(looper);

                    return false;

                }

            }

        });

    }

</script>

</html>

名字叫JsonData的servlet

package com.jiongmeng.servlet;

import java.io.IOException;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.jiongmeng.entity.Barrage;

import net.sf.json.JSONArray;

/**

 * 处理弹幕请求

 */

@WebServlet("/JsonData")

public class JsonData extends HttpServlet {

    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");

        //弹幕数据的集合，为了做测试方便和偷懒(懒得去数据库中取数据)，在这里随便造了一些弹幕实体对象数据

        List<Barrage> list = new ArrayList<Barrage>();

        Barrage barrage1 = new Barrage("static/img/cute.png", "", "", true, , "#ffffff", "#ffffff");

        Barrage barrage2 = new Barrage("static/img/cute.png", "okok", "", true, , "#ffffff", "#ffffff");

        Barrage barrage3 = new Barrage("static/img/cute.png", "什么鬼", "", true, , "#ffffff", "#ffffff");

        Barrage barrage4 = new Barrage("static/img/cute.png", "蓝瘦香菇", "", true, , "#ffffff", "#ffffff");

        Barrage barrage5 = new Barrage("static/img/cute.png", "好好赚钱", "", true, , "#ffffff", "#ffffff");

        Barrage barrage6 = new Barrage("static/img/cute.png", "你们去改变世界，我只想认真赚钱", "", true, , "#ffffff", "#ffffff");

        Barrage barrage7 = new Barrage("static/img/cute.png", "我还没赚到500万", "", true, , "#ffffff", "#ffffff");

        list.add(barrage1);

        list.add(barrage2);

        list.add(barrage3);

        list.add(barrage4);

        list.add(barrage5);

        list.add(barrage6);

        list.add(barrage7);

        JSONArray json = JSONArray.fromObject(list);

                //生成符合json规范的字符串

        String jsonStr = json.toString();

        System.out.println(jsonStr);

        response.getWriter().println(jsonStr);

    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doGet(request, response);

    }

}

Barrage类(实体类)

package com.jiongmeng.entity;

/**

 * 弹幕实体类

 *

 */

public class Barrage {

    private String img;

    private String info;

    private String href;

    private boolean close;

    private int speed;

    private String color;

    private String old_ie_color;

    public Barrage() {

        super();

    }

    public Barrage(String img, String info, String href, boolean close, int speed, String color,

            String old_ie_color) {

        super();

        this.img = img;

        this.info = info;

        this.href = href;

        this.close = close;

        this.speed = speed;

        this.color = color;

        this.old_ie_color = old_ie_color;

    }

    /**

     * @return the img

     */

    public String getImg() {

        return img;

    }

    /**

     * @param img the img to set

     */

    public void setImg(String img) {

        this.img = img;

    }

    /**

     * @return the info

     */

    public String getInfo() {

        return info;

    }

    /**

     * @param info the info to set

     */

    public void setInfo(String info) {

        this.info = info;

    }

    /**

     * @return the href

     */

    public String getHref() {

        return href;

    }

    /**

     * @param href the href to set

     */

    public void setHref(String href) {

        this.href = href;

    }

    /**

     * @return the close

     */

    public boolean getClose() {

        return close;

    }

    /**

     * @param close the close to set

     */

    public void setClose(boolean close) {

        this.close = close;

    }

    /**

     * @return the speed

     */

    public int getSpeed() {

        return speed;

    }

    /**

     * @param speed the speed to set

     */

    public void setSpeed(int speed) {

        this.speed = speed;

    }

    /**

     * @return the color

     */

    public String getColor() {

        return color;

    }

    /**

     * @param color the color to set

     */

    public void setColor(String color) {

        this.color = color;

    }

    /**

     * @return the old_ie_color

     */

    public String getOld_ie_color() {

        return old_ie_color;

    }

    /**

     * @param old_ie_color the old_ie_color to set

     */

    public void setOld_ie_color(String old_ie_color) {

        this.old_ie_color = old_ie_color;

    }

从前端到后端实现弹幕的过程（jsp/Jquery.barrager.js）的更多相关文章

[转载]Web前端和后端之区分，以及面临的挑战
原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...
Web前端和后端之区分，以及…
原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...
[转载]Web前端和后端之区分，以及面临的挑战【转】
原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...
Spring MVC之中前端向后端传数据
Spring MVC之中前端向后端传数据和后端向前端传数据是数据流动的两个方向, 在此先介绍前端向后端传数据的情况. 一般而言, 前端向后端传数据的场景, 大多是出现了表单的提交,form表单的内容在 ...
bug 查找 (二) 从前端找到后端
bug 查找 (二) 从前端找到后端几天来,组长说我们系统的 apm 数据不正确,最体表现就是前端项目这几天错误统计为 0. 这不正常(没有办法,我们代码写的很烂),因为前端环境很复杂,网络,浏览器 ...
centos7部署前后端分离项目的过程
概述本文主要讲解在安装了centos7的Linux主机中部署前后端分离项目的过程. 前端项目名为:vue_project:后端项目名为:django_project. 将这两个项目放在/opt/wh ...
前端与后端数据交互的方式之ajax
前端与后端数据交互的方式之Ajax 对于前端学习而言,CSS+HTML+JavaScript的学习在自我学习的情况下掌握也不是很难,但是想要实现前后端的数据交互在没有指导的情况下学习会是一头雾水.接下 ...
在web开发中，为什么前端比后端更得到转行程序员的青睐？必看！
1.Web开发分类与区别人们通常将Web分为前端和后端,前端相关的职位有前端设计师(UI/UE),前端开发工程师,后端相关的有后端开发工程师. 2.技术栈区别看各大招聘网站上,公司对前端开发工程师 ...
抽取一部分服务端做BFF（Backend For Frontend服务于前端的后端）
Flutter+Serverless端到端研发架构实践 · 语雀 https://www.yuque.com/xytech/flutter/kdk9xc 2019-12-19 13:14 作者:闲鱼技 ...

随机推荐

shell编程之循环语句
for #! /bin/sh for FRUIT in apple banana pear; do echo "I like $FRUIT" done while #! /bin/ ...
cmdb客户端代码完善2
目录: 1.面试提问 2.完善采集端代码 3.唯一标识的问题 4.API的验证 1.面试会问到的问题: # 1. 为啥要做CMDB?# - 实现运维自动化, 而CMDB是实现运维自动化的基石# - 之 ...
PU Learning简介:对无标签数据进行半监督分类
当只有几个正样本,你如何分类无标签数据假设您有一个交易业务数据集.有些交易被标记为欺诈,其余交易被标记为真实交易,因此您需要设计一个模型来区分欺诈交易和真实交易. 假设您有足够的数据和良好的特征,这 ...
JSOI 2016 病毒感染辅助Dp问题
原题链接:https://www.luogu.com.cn/problem/P5774 分析直接看这道题,第一个困惑点,那个绝对值的比较是什么东西,根据数学知识,我们可以知道这个意思是k到i的距离小 ...
基于 HTML5 WebGL 的故宫人流量动态监控系统
前言在当代社会,故宫已经成为一个具有多元意义的文化符号,在历史.艺术.文化等不同领域发挥着重要的作用,在国际上也成为能够代表中国文化甚至中国形象的国际符号.近几年故宫的观众接待量逐年递增,年接待量已 ...
从零开始的JSON库
从零开始的JSON库项目地址 jsoncpp ,此项目受到 leptjson 启发,实现了最基本的功能,仅作学习使用. 提供简单的 parse() 和 generate() 方法将 JSON 文本解 ...
Premultiplied Alpha
Xcode 的工程选项里有一项 Compress PNG Files,会对 PNG 进行 Premultiplied Alpha.游戏开发中会更加关注这个格式,省一些运行时计算. Premultipl ...
[codevs3118]高精度除法<高精度>
题目链接:http://codevs.cn/problem/3118/ 为了做一道名为国王游戏的贪心,我跑来学习了高精度除法....相传,高精度除法是高精度四个基本运算最难的但事实上,高精度除法可以 ...
[bzoj1029]建筑抢修<贪心>
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1029 解析:这也算bzoj中比较简单的一道题,其实想通了就是非常的简单. 这题用贪心的方式 ...
ftp 无法显示远程文件夹
翻阅了网上前辈们的答案,都未能解决,所以就研究了一下不需要防火墙的情况,关闭防火墙即可下面使用的iptables防火墙验证的,其他的请自行验证研究了好久,发现ftp使用端口波动很大,大概在300 ...

从前端到后端实现弹幕的过程（jsp/Jquery.barrager.js）

从前端到后端实现弹幕的过程（jsp/Jquery.barrager.js）的更多相关文章

随机推荐

热门专题