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

随机推荐

Vue中使用axios发送ajax请求
作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求: 首先是下载axios的依赖, npm install --save axios vue-axios 然后在ma ...
第八周Java实验作业
实验六接口的定义与使用实验时间 2018-10-18 1.实验目的与要求 (1) 掌握接口定义方法: 声明: public interface 接口名 {...} 接口体中包含常量定义和方法定义 ...
Manjaro更新后　搜狗拼音输入法突然无法正常使用
之前Manjaro已经用了很久了,很多该配置的都已经配置好了,但是搜狗拼音在系统更新后突然无法使用 1检查如下依赖 2．检查配置文件 3．发现一切配置没问题,此时输入 sogou-qimpanel ...
使用SparkSQL编写wordCount的词频统计
# 使用SparkSQL编写wordCount的词频统计 ## word.txt```hello hello scala sparkjava sql html java hellojack jack ...
Hive常用命令及作用
1-创建表 -- 内部表 create table aa(col1 string,col2 int) partitioned by(statdate int) ROW FORMAT DELIMITED ...
xp镜像+激活码
由于一个环境必须要xp环境,安装虚拟机的,没有在msdn下,因为速度慢. Windows XP SP3:http://b.downya.com/600/winxpsp3_downcc.com.iso ...
电脑网络诊断显示Win10无法与设备或资源（DNS）通信解决办法
最近是做多错多还是人有点儿衰神附体,软件,电脑系统,各种问题层出不穷,今天早上打开电脑发现不少软件都无法联网,神马百度商桥,腾讯浏览器,百度云...昨天百度商桥打不开还以为是软件出了问题,因为火狐浏览 ...
[vijos]1051送给圣诞夜的极光<BFS>
送给圣诞夜的极光题目链接:https://www.vijos.org/p/1051 这是一道很水很水的宽搜水题,我主要是觉得自己在搜素这一块有点生疏于是随便找了一题练手,找到这么一道水题,原本以为可 ...
Spring中常用注解的介绍
spring中使用注解时配置文件的写法: <?xml version="1.0" encoding="UTF-8"?> <span style ...
Vertica的这些事（三）——Vertica中实现Oracle中的ws_concat功能
vertica中没有类似Oracle中的ws_concat函数功能,需要开发UDF,自己对C++不熟悉,所有只有想其他方法解决了. 上代码: SELECT node_state, MAX(DECODE ...

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

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

随机推荐

热门专题