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

随机推荐

一些Nmap NSE脚本推荐
前言 Nmap是一款强大的开源扫描工具.同时Nmap提供了强大的脚本引擎(Nmap Scripting Engine),支持通过Lua脚本语言来扩展Nmap的功能,在Nmap的发行版中已经包含了数百个 ...
Linux基本操作 ------ 文件处理命令
显示目录文件 ls //显示当前目录下文件 ls /home //显示home文件夹下文件 ls -a //显示当前目录下所有文件,包括隐藏文件 ls -l //显示当前目录下文件的详细信息 ls - ...
8千字干货教程|java反射精讲
java反射机制精讲目录 1. 反射机制的概念 2. 反射的基础Class类 3. 反射的用法 4. 反射的应用示例作者简介:全栈学习笔记,一个正在努力的人微信公众号:公众号日更,精彩美文每天推 ...
js利用cookie登录网站
如上图,我们获取到了cookie,接下来利用cookie登录相应的网站. 我用的浏览器是火狐,首先在特定的网站(也就是我们发现XSS漏洞的网站,这里指的是pikachu)F12打开开发者工具,找到控制 ...
Hive支持的文件格式和压缩格式及各自特点
Hive中的文件格式 1-TEXTFILE 文本格式,Hive的默认格式,数据不压缩,磁盘开销大.数据解析开销大. 对应的hive API为:org.apache.hadoop.mapred.Text ...
Java基础语法(7)-数组
title: Java基础语法(7)-数组 blog: CSDN data: Java学习路线及视频 1.数组的概述数组(Array),是多个相同类型数据按一定顺序排列的集合,并使用一个名字命名,并 ...
Java基础语法(8)-数组中的常见排序算法
title: Java基础语法(8)-数组中的常见排序算法 blog: CSDN data: Java学习路线及视频 1.基本概念排序: 是计算机程序设计中的一项重要操作,其功能是指一个数据元素集合 ...
effective-java学习笔记---使用接口模拟可扩展的枚举38
枚举类型( BasicOperation )不可扩展,但接口类型( Operation )是可以扩展的,并且它是用于表示 API 中的操作的接口类型. // Emulated extensible e ...
Springmvc与Struts区别？
在一个技术群里看到机器人解释的二者区别,在此Mark下. 一.框架机制 spring mvc 和 struts2的加载机制不同:spring mvc的入口是servlet,而struts2是filte ...
BurpSuit工具安装和基本使用方法
burpsuite是渗透的必备工具,使用它可以进行一些截包分析,修改包数据.暴力破解.扫描等功能,使用最多的场景应该是设置代理拦截数据包分析数据和爆破. JDK工具下载和安装(可选) 运行BurpSu ...

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

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

随机推荐

热门专题