kilito_01
kilito_01

html js弹幕功能

html js弹幕功能_第1张图片
效果如上

html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script charset="utf-8" src="//picture.52hrttpic.com/static/webapp/vue/vue.min.js" type="text/javascript">
		</script>
		<link rel="stylesheet" href="./css/index.css" />
		<script src="./js/update.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="index" ref="index">
				<div class="btn stop" @click="toggelDanmu">{{isStop ? '开始弹幕' : '停止弹幕'}}</div>
				<div class="btn add" @click="adddanmu">添加弹幕</div>
			</div>
		</div>

	</body>
	<script src="./js/index.js"></script>
	
</html>

js
	function AddDanMuFn(option) {
	this.currentDanmuNum = 0; // 移动到实例属性
	this.option = option;
	this.elWidth = option.el.offsetWidth != 0 ? option.el.offsetWidth : document.querySelector('body').getBoundingClientRect().width;

	this.initFn = function(text, isAddDanmu) {
		let danmuName = 'danmu-' + this.randomString(6);
		let danmuLine = this.currentDanmuNum % (this.option.danmuLine || 3);
		let danmuNum = `danmu-${danmuLine}`;
		this.currentDanmuNum++;

		let danmuNumAllDom = document.querySelectorAll(`.${danmuNum}`);
		let newDomLeft = danmuNumAllDom.length > 0 ? this.calculateNewLeft(danmuNumAllDom) : this.elWidth;

		let div = document.createElement('div');
		// 手动添加的话 会有一个add 的类名 可以在css里 改变特定的样式
		div.className = `${danmuName} ${danmuNum} item ${isAddDanmu ? 'add' : ''}`;
		div.style.left = newDomLeft + 'px';
		div.innerText = text;
		(this.option.el || document.querySelector('body')).appendChild(div);

		let currentDom = document.querySelector(`.${danmuName}`);
		let divWidth = currentDom.offsetWidth;
		let divHeight = currentDom.offsetHeight;
		div.style.top = danmuLine * (divHeight + (this.option.marginTop || 10)) + 'px';

		// Create animation and store its ID
		let animationId = requestAnimationFrame(this.animationFn.bind(this, currentDom, divWidth, this.option
			.speed || 3));
		currentDom.animationId = animationId
	};

	this.animationFn = function(currentDom, divWidth, speed) {
		let rect = currentDom.getBoundingClientRect();
		if (rect.left + divWidth < 0) {
			cancelAnimationFrame(currentDom.animationId); // Correctly cancel animation
			currentDom.remove();
			return;
		}

		currentDom.style.left = rect.left - speed + 'px';
		let animationId = requestAnimationFrame(this.animationFn.bind(this, currentDom, divWidth, speed));
		currentDom.animationId = animationId;
	};

	this.stopAll = function() {
		let danmus = document.querySelectorAll('.item');
		for (let danmu of danmus){
			cancelAnimationFrame(danmu.animationId)
			danmu.remove();
		}
	};

	this.startAll = function() {
		let danmus = document.querySelectorAll('.item'); 
		for (let danmu of danmus) {
			if (danmu.animationId) { 
				let divWidth = danmu.offsetWidth;
				let speed = this.option.speed || 3;
				let animationId = requestAnimationFrame(this.animationFn.bind(this, danmu, divWidth, speed));
				danmu.animationId = animationId;

			}
		}
	};
    // 随机数
	this.randomInteger = function(a, b) {
		if (arguments.length === 1) {
			return Math.floor(Math.random() * a);
		} else if (arguments.length === 2) {
			return Math.floor(Math.random() * (b - a + 1) + a);
		}
		return 0;
	};
     // 随机值
	this.randomString = function(length) {
		length = length || 8; // Reasonable default length
		let chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
		let result = "";
		for (let i = 0; i < length; i++) {
			result += chars.charAt(Math.floor(Math.random() * chars.length));
		}
		return result;
	};
      
	this.calculateNewLeft = function(danmuNumAllDom) {
		let lastDom = danmuNumAllDom[danmuNumAllDom.length - 1];
		let lastDomWidth = lastDom.offsetWidth;
		let lastDomLeft = lastDom.getBoundingClientRect().left;
		let newDomLeft = lastDomWidth + lastDomLeft + (this.option.marginLeft || 10);
		return newDomLeft < this.elWidth ? this.elWidth : newDomLeft;
	};
}


var app = new Vue({
	el: '#app',
	data: {
		list: [{
				text: '山河无恙，国泰民安'
			},
			{
				text: '我爱你，中国！'
			},
			{
				text: '辉煌七十五载，山河锦绣灿烂。'
			},
			{
				text: '生日快乐，我的国！'
			},
			{
				text: '清澈的爱，只为中国!'
			},
			{
				text: '岁月悠悠，山河如画!'
			},
			{
				text: '我爱中华！'
			},
			{
				text: '75年风雨兼程，共筑中国梦！'
			},
			{
				text: '鹭岛金秋红旗展，国庆佳节同欢庆'
			},
			{
				text: '泱泱中华, 千古风华依旧'
			},
		],
		currentIndex: 0, // 当前弹幕列表的下标
		addDanmuInterval: null, // 添加弹幕的定时器
		isStop: false
	},
	mounted() {
		this.$nextTick(() => {
			// 创建实例 生成这个实例  要在页面完全渲染完成的时候  要不然 会获取不到 传入el的宽度
			// 这个弹幕的el css要设置成 position relative 
			// 每一个弹幕 都会有一个共同的class类名item  要设置成 position absolute 
			// white-space: nowrap; 文字要设置成 不换行 
			this.danmu = new AddDanMuFn({
				danmuLine: 5, // 多少行弹幕
				el: document.querySelector('.index'), // 在哪个div里添加弹幕
				marginLeft: 30, // 每个弹幕距离左边的距离
				speed: 3, // 速度
				marginTop: 10 // 每行弹幕上下的距离
			});
			this.list.forEach((item, index) => {
				this.danmu.initFn(this.list[index].text)
			})
			this.startAddDanmuFn()

		})
	},
	methods: {
		toggelDanmu() {
			if (this.isStop) {
				this.startDanmu()
			} else {
				this.stopDanmu()
			}
			this.isStop = !this.isStop
		},
		stopDanmu() {
			// 停止添加弹幕
			clearInterval(this.addDanmuInterval)
			this.danmu.stopAll()
		},
		startDanmu() {
			this.danmu.startAll()
			this.startAddDanmuFn()
		},
		adddanmu() {
		  // 自己添加的弹幕  第二个参数 为true  就是代表 是自己添加的弹幕 这个弹幕就会有一个add的类名
			this.danmu.initFn('自己添加的弹幕', true)
		},
		startAddDanmuFn() {
			this.addDanmuInterval = setInterval(() => {
				// 获取弹幕总数 如果超过20个 不添加弹幕
				let danmuAllNum = document.querySelectorAll('.item').length
				// if(danmuAllNum > 20) return
				this.danmu.initFn(this.list[this.currentIndex].text)
				this.currentIndex++
				if (this.currentIndex >= this.list.length) {
					this.currentIndex = 0
				}
			}, 1000)

		}
	},

})

css
*{
	margin: 0;
	padding: 0;
}

.index{
	width: 100vw;
	height: 100vh;
	background: #fff;
	position: relative;
	overflow: hidden;
	.btn{
		position: absolute;
		bottom: 0;
		
		width: 50vw;
		height: 30vw;
		font-size: 4vw;
		text-align: center;
		line-height: 30vw;
		&.stop{
			left: 0;
		}
		&.add{
			right: 0;
		}
	}
	.item{
		height: 10vw;
		padding: 0 3vw;
		border-radius: 10vw;
		background-color: gainsboro;
		color: #fff;
		font-size: 4vw;
		display: inline-block;
		position: absolute;
		white-space: nowrap;
		line-height: 10vw;
		&.add{
			background: red;
		}
		
	}
}

你可能感兴趣的:(javascript,html)

  • 企业级图表方案AG Charts v12正式发布：全新功能提升图表交互体验与开发效率
    AGGrid成立于英国，致力于提供优秀的企业级数据表格及图表解决方案。AGGrid及AGCharts是其两大主要的高性能企业级JavaScript数据表格及图表解决方案，被全球开发者广泛采用。广泛应用于金融、电信、制造等行业，支持Angular、React、Vue和纯JavaScript项目，拥有企业级的性能与功能深度，凭借其卓越的性能、丰富的功能与高度可定制性，成为构建复杂数据驱动型应用的优选工
  • Tuning Language Models by Proxy 樱花的浪漫 对抗生成网络与动作识别强化学习因果推断大模型与智能体人工智能机器学习深度学习自然语言处理计算机视觉神经网络
    TuningLanguageModelsbyProxyhttps://arxiv.org/html/2401.08565v41.概述尽管大型预训练语言模型的通用能力越来越强，但它们仍然可以从额外的微调中受益，以更好地实现所需的行为。例如，它们通常被微调以遵循指令（Ouyang等人，2022年）、特定的兴趣领域（Gururangan等人，2020年）或特定任务（Raffel等人，2020年）。然而，
  • Javascript基础内容回顾—变量提升、事件循环和闭包等内容 GISer_Jinger javascript前端
    以下是前端面试中JavaScript基础易错问题的详解，结合常见考点和易混淆概念进行解析：⚠️一、变量作用域与提升varvslet/const◦变量提升：var声明的变量会提升到作用域顶部（值为undefined），而let/const存在暂时性死区（声明前访问报错）。◦循环陷阱：for(vari=0;iconsole.log(i));//输出3,3,3（共享同一作用域）}for(leti=0;i
  • 前端开发常见问题（从布局到性能优化） 白仑色 前端系列前端开发HTMLCSSJavaScript性能优化响应式布局跨域
    前端开发作为连接用户与产品的重要桥梁，涉及HTML、CSS和JavaScript的综合运用。但在实际开发过程中，开发者常常会遇到各种“坑”，比如页面布局异常、跨域请求失败、性能瓶颈、浏览器兼容性差等问题。本文将围绕前端开发中常见的十大问题展开讲解：页面布局相关问题（盒模型、浮动、Flex布局）CSS样式冲突与继承JavaScript异步处理（Promise、async/await）跨域问题及解决方
  • 单按钮动画
    本文仅仅自己备份使用html☀️//currentTheme是light和dark//switchTheme是切换主题逻辑import{currentTheme,switchTheme,}from"../utils/theme"consthandleClick=(event)=>{if(!document.startViewTransition){switchTheme()return}const
  • html怎么设置好看的文本框,html页面输入框input的美化 PassatCC html怎么设置好看的文本框
    input输入框是网页必不可少的组件，可是每个浏览器对于输入框的显示样式各有不同例如：上图分别就是谷歌浏览器和IE浏览器自带显示的输入框，样式也不足人意，所以大多都会自己写样式以下是一个简单的文本框样式input{border:1pxsolid#ccc;padding:7px0px;border-radius:3px;/*css3属性IE不支持*/padding-left:5px;}效果图：样式属
  • web与Java代码保护：混淆、压缩及反编译工具详解
    本文还有配套的精品资源，点击获取简介：为保障代码的安全性和保密性，IT行业中开发者采用代码混淆和压缩技术。本文将深入探讨web代码混淆压缩工具和Java代码反编译工具，解释它们的工作原理及应用。混淆工具如UglifyJS和Terser用于混淆JavaScript代码，使其难以理解；压缩工具如YUICompressor和GoogleClosureCompiler减小JavaScript和CSS文件的
  • nvm:NodeJs版本管理工具下载安装与使用教程 天天打码 大前端javascriptnode.jsvue.js
    nvm是什么nvm是一个node的版本管理工具，可以简单操作node版本的切换、安装、查看。。。等等，与npm不同的是，npm是依赖包的管理工具。nvm特点node：是一个基于ChromeV8引擎的JS运行环境。npm：是node.js默认的包管理系统（用JavaScript编写的），在安装的node的时候，npm也会跟着一起安装，管理node中的第三方插件。nvm：node版本管理器，也就是说：
  • 深入理解 JavaScript/TypeScript 中的展开运算符（...） ttod_qzstudio TypeScriptJavaScriptjavascripttypescript开发语言
    在JavaScript和TypeScript中，...运算符（称为展开运算符，英文SpreadOperator）是一个非常强大且常用的语法。它可以让代码更简洁、更灵活，适用于数组、对象、函数参数等多种场景。本文将详细介绍它的用法，并通过示例帮助你彻底掌握它。1.什么是展开运算符（...）？展开运算符...允许将一个可迭代对象（如数组、字符串、Set、Map等）“展开”成独立的元素。它的核心作用是解
  • java毕业设计图书馆座位预约管理系统维修端源码+lw文档+mybatis+系统+mysql数据库+调试 木林网络 mybatisjava数据库
    java毕业设计图书馆座位预约管理系统维修端源码+lw文档+mybatis+系统+mysql数据库+调试java毕业设计图书馆座位预约管理系统维修端源码+lw文档+mybatis+系统+mysql数据库+调试本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、
  • HTML5中背景图片如何设置 十指流玉 HTML
    自己试验了很多种方式，最终发现有一种方式最得朕心～～哈哈哈哈哈先看一下效果图吧：只截取了一部分，图片的人物不会因为页面大小而变得扭曲（这一点非常重要），我已经很满足啦～～～～～下面看一下代码吧,其实也很简单。body{/*background:rgb(185,246,246);*//*设置颜色背景*/background-image:url(photo5.png);/*设置背景图片*/backgr
  • html读取媒体长度,用媒体查询media根据屏幕分辨率大小确定网页宽度 weixin_39886205 html读取媒体长度
    显示网页的终端屏幕分辨率大小不一，为了能使同一网页能在不同的终端中合适显示，CSS3推出了媒体查询media。用媒体查询media能根据屏幕分辨率大小确定网页宽度，这主要在CSS文件中根据屏幕分辨率大小定义网页宽度。以前用百分比来根据屏幕分辨率大小确定网页宽度，但由于同样的百分比随着屏幕分辨率的增大，网页离屏幕两边的距离也随之变宽，不能很好的解决这个问题；用媒体查询media就能很好的解决这个问题
  • HTML媒体查询
    宽度=768小屏，PADsm（small）>=992中等屏幕PC（这个标准有点过时，现在PC屏都很大）md（middle）>=1200超大屏lg（longgram）@mediaalland(min-width:1px)and(max-width:450px){div{background-color:deepink;}}
  • Pyramda：Python 中的函数式编程利器 惠悦颖
    Pyramda：Python中的函数式编程利器pyramdaPythonpackagesupportingheavyfunctionalprogrammingthroughcurrying.TranslationoftheRamdalibraryfromjavascripttopython.项目地址:https://gitcode.com/gh_mirrors/py/pyramdaPyramda是
  • HTML 媒体(Media)
    HTML媒体(Media)在当今数字化时代，HTML作为构建网页的基础语言，其重要性不言而喻。其中，媒体元素是HTML的重要组成部分，它允许我们在网页中嵌入音频、视频、图像等多媒体内容，从而丰富用户的浏览体验。本文将深入探讨HTML媒体元素的相关知识，包括其基本概念、常用标签、属性以及实际应用。媒体元素概述HTML媒体元素指的是在网页中嵌入音频、视频、图像等内容的标签。这些标签不仅能够丰富网页内容
  • Java2025最新学习路线（从入门到精通） 亭亦青 学习javaspringboot
    注：这份学习路线结合了2025年春招Java开发岗位要求和2024年Java就业市场需求，要求较高，并且省略了大多数基础部分，如果目标不是中大厂，可以适当放低学习的要求，但是请完成云原生之前的所有内容，并且经常性进行项目实践，切实提升编程能力。Java学习路线一键预览版：JavaSE-Mysql-JavaWeb(htmlcssjsjqUI组件框架-bootstrapelementUIVUE)-My
  • html2Canvas不支持object-fit属性导致图片变形了 懒大王、 前端css3
    html2Canvas是不支持object-fit属性data(){return{leftImageStyle:{position:'absolute',width:'1952px',height:'3600px',left:'0',top:'0'}};},mounted(){this.$nextTick(()=>{this.calculateImageDimensions();});},calc
  • 更换SSL证书引发的异常：`sun.security.validator.ValidatorException: PKIX path building failed` `[Nginx跳转失败：501] 猿享天开 技术经验sslnginx网络协议
    博主简介：CSDN博客专家、CSDN平台优质创作者，高级开发工程师，数学专业，10年以上C/C++,C#,Java等多种编程语言开发经验，拥有高级工程师证书；擅长C/C++、C#等开发语言，熟悉Java常用开发技术，能熟练应用常用数据库SQLserver,Oracle,mysql,postgresql等进行开发应用，熟悉DICOM医学影像及DICOM协议,业余时间自学JavaScript,Vue,
  • 七牛云前端面试题及参考答案 （上） 大模型大数据攻城狮 前端vue组件reactjs前端面经防抖节流fiber
    目录基本数据类型有哪些？typeofnull的结果是什么？null和undefined的区别是什么？let关键字的特点有哪些？this指向的规则是什么？箭头函数中this指向哪里？如何实现JavaScript的深拷贝和浅拷贝？数组去重的常见方法（手写代码）数组扁平化（手写，不能使用flat(Infinity)）forEach和map方法的区别是什么？闭包的应用场景：实现链式加法add(1)(2)(
  • Vue 3 - JavaScript细节大揭秘 碧海蓝天· vue.jsjavascript前端JavaScript
    在学习Vue3的过程中，我们可能会发现一些令人惊讶的JavaScript细节，这些细节可能之前我们并不知道。本文将探讨一些Vue3中的JavaScript细节，并提供相应的源代码示例。CompositionAPIVue3引入了CompositionAPI，它是一种新的API风格，可以让我们更灵活地组织我们的代码。在Vue2中，我们使用OptionsAPI来定义组件，而在Vue3中，我们可以选择使用
  • js event.preventDefault()的作用
    好的，完全明白。我们这次彻底忘记Vue，忘记所有复杂的函数，只聚焦在event.preventDefault()这一件事上。这句话是它的核心：“阻止这个元素天生该做的事。”第一步：理解什么是“天生该做的事”(默认行为)在浏览器中，很多HTML元素都有一个**“天生”的、默认的功能或行为**。这是浏览器赋予它们的本能。我们来看几个最常见的例子：标签(链接)它天生该做的事是什么？——点击后，跳转到hr
  • 如何创建唯一的 key 或者 ID L?z ^f my utilsjavascript前端
    javaScript中创建唯一的key/***生成一个永不重复的key*@param{Number}randomLength*/functiongetUuiKey(randomLength=5){returnNumber(Math.random().toString().substr(2,randomLength)+Date.now()).toString(36)}
  • 小程序导航设置更多内容的实现方法 racerun 小程序
    在小程序中实现导航栏设置更多内容，可以通过以下几种方式实现：1.使用原生导航栏自定义按钮javascript//app.json或页面.json中配置{"navigationBarTitleText":"首页","navigationBarTextStyle":"black","navigationBarBackgroundColor":"#ffffff","navigationStyle":"d
  • 宽带有哪几种接入方式 weixin_30252709
    转：https://zhidao.baidu.com/question/1025089.html目前的家庭接入方式主要有三种：一是普通电话线的非对称数字用户环路技术（ADSL）方式、二是基于光纤IP网的FTTB+LAN技术方式（小区宽带），三是有线电视的CableModem技术方式（有线通）。ADSL使用一种调制解调传输技术，在普通电话线上将现有电话线路的频宽经由调制解调技术处理后扩大，其中较高容
  • 爬虫的笔记整理 咸鱼时日翻身 爬虫笔记
    网络爬虫首先要认识http和https协议在浏览器中发送一个http请求：1.输入一个URL地址之后，向http服务器发送请求，主要分为GET和POST两种方法2.输入URL之后，发送一个request请求，这时候服务器把response文件对象发送回浏览器3.浏览器中解析返回的HTML，其中引用了许多的其他文件，images，css文件，JS文件等，再次法中request去获取这些内容4.所有的
  • C语言数据结构与算法专栏目录 CodeAllen嵌入式 嵌入式C语言数据结构算法
    后序会开一个《嵌入式数据结构专栏》主要为了学习嵌入式的同学，软件能力提升和大厂面试能力，感谢大家关注！直达专栏：https://blog.csdn.net/super828/category_11083370.html《C语言数据结构与算法》专栏已经更新完毕，共计72篇分享，后期会逐渐修改错误并添加内容0数据之间的关系有哪些？1如何度量一个算法的好坏？2常见的时间复杂度实例
  • 发起请求并处理响应：`XHR` 与 `axios` 使用指南来啦[特殊字符]~
    又又又要长脑子呐~了解到通过发起HTTP请求并在不刷新页面的情况下更新页面内容是一种常见的需求。学习使用XMLHttpRequest或axios来实现，现在进行对比两者，比较项目使用时候的优缺点，文末使用表格进行对比学习1.使用XHR实现下面是一个使用XMLHttpRequest发起GET请求并处理服务器响应的示例：html体验AI代码助手代码解读复制代码//创建一个新的XMLHttpReques
  • 【优秀文章】7月优秀文章推荐
    优秀文章智能自主运动体与人工智能技术——环境感知、SLAM定位、路径规划、运动控制、多智能体协同作者：fpga和matlabC++之红黑树认识与实现作者：zzh_zao【手把手带你刷好题】–C语言基础编程题(十)作者：草莓熊Lotso飞算JavaAI：从“码农”到“代码指挥官”的终极进化论作者：可涵不会debug前端网页开发学习（HTML+CSS+JS）有这一篇就够！作者：一颗小谷粒
  • 深入理解 CSS 选择器：从基础到高级 蓝精灵001 css前端面试职场和发展学习htmlAI编程
    CSS（层叠样式表）是网页设计中不可或缺的一部分，它通过选择器来定位HTML文档中的元素，并为这些元素定义样式。掌握CSS选择器是前端开发的核心技能之一。本文将从最基础的选择器讲起，逐步深入到高级、复杂的结构和伪类/伪元素选择器，帮助你全面掌握CSS选择器的使用。一、什么是CSS选择器？CSS选择器是一种模式，用于匹配文档树中的一个或多个元素。通过选择器，你可以精确地控制哪些HTML元素应该应用特
  • Node.js REPL 教程 红衣大叔 nodejs帮助文档node.jsvim编辑器
    Node.jsREPL(Read-Eval-PrintLoop)是一个交互式环境，允许你直接输入和执行JavaScript代码，无需创建文件。它是学习Node.js、测试代码片段和调试的强大工具。启动REPL有几种方式可以启动Node.jsREPL：直接运行node命令：node在特定文件目录下启动（如果需要访问当前目录的模块）：node使用环境变量（如设置特殊选项）：NODE_REPL_HIST
  • jdk tomcat 环境变量配置 Array_06 javajdktomcat
    Win7 下如何配置java环境变量 1。准备jdk包，win7系统，tomcat安装包（均上网下载即可） 2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。） 3。分别配置高级环境变量。   电脑-->右击属性-->高级环境变量-->环境变量。 分别配置 : path    &nbs
  • Spring调SDK包报java.lang.NoSuchFieldError错误 bijian1013 javaspring
            在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。 org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l
  • LeetCode[位运算] - #136 数组中的单一数 Cwind java题解位运算LeetCodeAlgorithm
    原题链接：#136 Single Number 要求： 给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素 注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间 难度：中等 分析： 题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进
  • qq登陆界面开发 15700786134 qq
    今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下： public class First {         public void initul(){        jf=ne
  • Linux的程序包管理器RPM 被触发 linux
    在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的
  • socket通信遇到EOFException 肆无忌惮_ EOFException
    java.io.EOFException at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:
  • 基于spring的web项目定时操作 知了ing javaWeb
    废话不多说，直接上代码，很简单 配置一下项目启动就行 1，web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="h
  • 树形结构的数据库表Schema设计 矮蛋蛋 schema
    原文地址： http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488     程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，
  • maven将jar包和源码一起打包到本地仓库 alleni123 maven
    http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository <project> ... <build> <plugins> <plugin> <groupI
  • java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！ 百合不是茶
    类 File File是指文件和目录路径名的抽象表示形式。 1，何为文件： 标准文件（txt doc mp3...） 目录文件（文件夹） 虚拟内存文件   2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都
  • Spring注入有继承关系的类（2） bijian1013 javaspring
    被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类 package com.bijian.spring.test4; public class AClass { private String a; private String b; public String getA() { retu
  • 30岁转型期你能否成为成功人士 bijian1013 成长励志
            很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
  • 【Velocity四】Velocity与Java互操作 bit1129 velocity
    Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础，      POJO    package com.tom.servlets; public
  • 【Hive十一】Hive数据倾斜优化 bit1129 hive
    什么是Hive数据倾斜问题   操作：join,group by,count distinct 现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。 原因：key分布不均匀 倾斜度衡量：平均记录数超过50w且
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua csrf
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-3.求子数组的最大和 bylijinnan java
    package beautyOfCoding; public class MaxSubArraySum { /** * 3.求子数组的最大和 题目描述： 输入一个整形数组，数组里有正数也有负数。 数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。 求所有子数组的和的最大值。要求时间复杂度为O(n)。 例如输入的数组为1, -2, 3, 10, -4,
  • Netty源码学习-FileRegion bylijinnan javanetty
    今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder： //pipeline（没有诸如“FileRegionEncoder”的handler）： public ChannelPipeline ge
  • 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题 cngolon 跨浏览器复制到粘贴板Zero Clipboard
    Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js
  • 单例模式 cuishikuan 单例模式
    第一种（懒汉，线程不安全）： public class Singleton {   2     private static Singleton instance;   3     pri
  • spring+websocket的使用 dalan_123
    一、spring配置文件 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.or
  • 细节问题：ZEROFILL的用法范围。 dcj3sjt126com mysql
    1、zerofill把月份中的一位数字比如1，2，3等加前导0 mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL,    -> day
  • Android开发10——Activity的跳转与传值 dcj3sjt126com Android开发
    Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。   一、Activity跳转 方法一Intent intent = new Intent(A.this, B.class); startActivity(intent)   方法二Intent intent = new Intent();intent.setCla
  • jdbc 得到表结构、主键 eksliang jdbc 得到表结构、主键
    转自博客：http://blog.csdn.net/ocean1010/article/details/7266042 假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt
  • Android 应用程序开关GPS gqdy365 android
    要在应用程序中操作GPS开关需要权限： <uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" /> 但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？ 1、方法一：将项目放到Android源码中编译； 2、方法二：网上有人说cl
  • Windows上调试MapReduce zhiquanliu mapreduce
    1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b
  • 如何看待一些知名博客推广软文的行为？ justjavac 博客
    本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621 互联网上的两种典型心态： 当初求种像条狗，如今撸完嫌人丑 当初搜贴像条犬，如今读完嫌人软 你为啥感觉不舒服呢？ 难道非得要作者把自己的劳动成果免费给你用，你才舒服？ 就如同 Google 关闭了 Gooled Reader，那是
  • sql优化总结 macroli sql
    为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！   要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。   一、简单的统计语句执行时间 declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id
  • Linux Oracle中常遇到的一些问题及命令总结 超声波 oraclelinux
    1.linux更改主机名   (1)#hostname oracledb　　　　临时修改主机名 (2) vi /etc/sysconfig/network 　　修改hostname (3) vi /etc/hosts　　　　　　　　修改IP对应的主机名   2.linux重启oracle实例及监听的各种方法 （注意操作的顺序应该是先监听，后数据库实例） &nbs
  • hive函数大全及使用示例 superlxw1234 hadoophive函数
      具体说明及示例参 见附件文档。     文档目录：   目录 一、关系运算： 4 1. 等值比较: = 4 2. 不等值比较: <> 4 3. 小于比较: < 4 4. 小于等于比较: <= 4 5. 大于比较: > 5 6. 大于等于比较: >= 5 7. 空值判断: IS NULL 5
  • Spring 4.2新特性-使用@Order调整配置类加载顺序 wiselyman spring 4
    4.1 @Order Spring 4.2 利用@Order控制配置类的加载顺序 4.2 演示 两个演示bean package com.wisely.spring4_2.order; public class Demo1Service { } package com.wisely.spring4_2.order; public class
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他