从前端到后端实现弹幕的过程（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 作者:闲鱼技 ...

随机推荐

WebStorm添加Angular2服务启动的脚本命令
注意:选择的start在package.json可以修改. 例如添加一个run命令:
一文上手TensorFlow2.0（一）
目录: Tensorflow2.0 介绍 Tensorflow 常见基本概念从1.x 到2.0 的变化 Tensorflow2.0 的架构 Tensorflow2.0 的安装(CPU和GPU) Te ...
WEB缓存控制机制与varnish简介
在说到缓存varnish前,我们首先来了解下对于web服务缓存到底是什么?它有哪些特点,基础原理是什么? http是web应用协议,通常我们说的一次http事务,不外乎就是客户端请求,服务端响应,通常 ...
Java并发编程锁之独占公平锁与非公平锁比较
Java并发编程锁之独占公平锁与非公平锁比较公平锁和非公平锁理解: 在上一篇文章中,我们知道了非公平锁.其实Java中还存在着公平锁呢.公平二字怎么理解呢?和我们现实理解是一样的.大家去排队本着先来 ...
FileReader 和Blob File文件对象(附formData初始化方法)；
一.FileReader为读取文件对象 . api 地址相关demo 现在只讨论 readAsArrayBuffer,readAsBinaryString,readAsDataURL,rea ...
面向对象(OO)第一阶段学习总结
前言:对OO本阶段作业情况说明本阶段一共完成三次作业,第一次主要是在主方法里面进行编程,也就是和之前C差不多,而随着学习的深入,慢慢了解到面向对象与面向过程的区别.作业的难度也在慢慢增大,后两次都用 ...
展示html/javascript/css------Live-Server
Live-server简介这是一款带有热加载功能的小型开发服务器.用它来展示你的HTML / JavaScript / CSS,但不能用于部署最终的网站. 官网地址:https://www.npmj ...
C/C++知识总结五复合数据类型壹（数组、字符串与string、结构）
C/C++复合数据类型壹(数组.结构) 数组数组的意义.定义与创建一.二维数组应用字符数组与字符串处理函数数组与指针---关系密切数组的意义与定义创建意义:反映数据间的特点(通过把同一类 ...
Reface.NPI 方法名称解析规则详解
在上次的文章中简单介绍了 Reface.NPI 中的功能. 本期,将对这方法名称解析规则进行详细的解释和说明, 以便开发者可以完整的使用 Reface.NPI 中的各种功能. 基本规则方法名称以 I ...
Spring的IOC操作
Spring的IOC操作把对象的创建交给spring ioc操作两个部分 (1)ioc的配置文件方式 (2)ioc基于注解的方式 IOC 的底层原理 1.ioc底层原理使用技术 (1)xml配置文件 ...

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

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

随机推荐

热门专题