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

随机推荐

tcp上传大文件举例、udp实现qq聊天、socketserver模块实现并发
为什么会出现粘包现象(day31提到过,这里再举个例子) """首先只有在TCP协议中才会出现粘包现象,因为TCP协议是流式协议它的特点是将数据量小并且时间间隔比较短的数 ...
vscode 配置c++记录
c_cpp_properties.json { "configurations": [ { "name": "MinGW", "i ...
python之常用模块ConfigParser
这个常见于.conf,.ini等类型的配置文件下面先看一下如果通过python生成一个.ini文件 import configparser #2.x is ConfigParserconfig = ...
js 的位运算
api 用途待更...
30款Django 常用的软件包
30款Django 常用的软件包 Django是一款高级的Python Web框架,可以帮助开发者快速创建web应用.我们这里整理了30款Django开发中常用的软件包,学会使用它们可以节省大量开发时 ...
sql mysql数据库导库 panda pymysql
mysql数据库导入数据 1. panda 效率超高对内存要求高网络稳定性 # 读取文件 ratings_names = ['user_id', 'movie_id', 'ratings', ' ...
MySQL：锁机制和隔离事务级别
在mysql中的锁看起来是很复杂的,因为有一大堆的东西和名词:排它锁,共享锁,表锁,页锁,间隙锁,意向排它锁,意向共享锁,行锁,读锁,写锁,乐观锁,悲观锁,死锁.这些名词有的博客又直接写锁的英文的简写 ...
Matlab——m_map指南（3）——实例
m_map 实例 1. clear all m_proj('ortho','lat', 48,'long',-123');%投影方式,范围 m_coast('patch','r');%红色填充 m_g ...
EOS基础全家桶（五）钱包管理
简介本篇我们将会学习EOS自带的命令行钱包的使用方法,我们将会使用cleos来控制keosd服务对本地钱包进行管理. 虽然现在市面上已经有很多支持EOS的钱包了,有Web钱包,有app钱包,还有浏览 ...
java单元/集成测试中使用Testcontainers
1.Testcontainers介绍: Testcontainers是一个Java库,它支持JUnit测试,提供公共数据库.SeleniumWeb浏览器或任何可以在Docker容器中运行的轻量级.一次 ...

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

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

随机推荐

热门专题