Ra2bit ~
Ra2bit ~

（html）音乐之原生js简单的歌词滚动hah

歌词滚动

话不多说先上效果图和效果链接
效果链接点击查看
链接如果没反应，应该是在缓存音乐，稍等片刻就ok了，当然记得点下播放按钮(°ー°〃)
（html）音乐之原生js简单的歌词滚动hah_第1张图片

  • 前段时间写了个音乐播放器，没想到竟然拿了100个赞，十分开心
  • 然后要人说要写个歌词滚动，正好这天有空，然后一下午才想出来，（没少百度和翻mdn ）；很多东西都忘了。
  • 随便发现了自己ajax没学好，所以代码并不整洁
  • 不说废话了，上代码了
  • 先看下html，当然我自己的样式没放这里，这里只放必要的
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>music1.2</title>
	<link rel="stylesheet" href="">
	<style type="text/css" media="screen">
		.play{
			background-color: black;
			border-radius: 5%;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<div id="music" style="margin: 0 auto;width: 400px;height: 600px"></div>
	<script src="./index.js"></script>
	<script type="text/javascript">
		let ele =document.getElementById('music');
		musicPlay(ele);
	</scrip>
</body>
</html>

css比较少加没单独写一个文件。大多用js写了。本来想写一个插件。现在可以改到地方还挺多的，有兴趣到小伙伴可以试试改良。也希望改完可以发给我看看，邮箱[email protected]

然后js有点乱，不过还是能看的

function musicPlay(ele){
 let musicArea = document.createElement('div');
 let music =document.createElement('audio');
 let musicUl =document.createElement('ul');
 let a = 400;//歌词容器到高，随便改,但最好和你自己写到那个div一样高；
 let b = 35;//li的高度，无特殊要求；
 let c ='demo.mp3'//歌曲目录，只能放一个哈！
 ele.appendChild(musicArea).appendChild(music);
                musicArea.appendChild(musicUl);
 musicStyle();
 //我让ajax打败了，所以歌词直接放变量了。(╯﹏╰)恶补中；
 //烦人的报错，让我把ajax先扔去喂鱼，等下再吃。
 let lrc = `[00:00.00] 作曲 : 薄荷映像
[00:00.27] 作词 : 薄荷映像
[00:00.81]早安喵 午安喵 晚安喵 喵 喵
[00:05.82]早安喵 午安喵 晚安喵 喵 喵
[00:20.94]喜欢你的微笑和调皮的嘴角
[00:26.14]那午后的阳光穿过你的发梢
[00:30.98]想让全世界停在这一秒
[00:36.43]陪着你把世界都忘掉
[00:41.49]早安喵 午安喵 晚安喵 喵 喵
[00:46.30]早安喵 午安喵 晚安喵 喵 喵
[01:11.25]喜欢你的微笑和调皮的嘴角
[01:16.19]喜欢你的拥抱和黄色外套
[01:21.06]这甜蜜的感觉只有我知道
[01:27.14]就是喜欢你的味道
[01:31.99]早安喵 午安喵 晚安喵 喵 喵
[01:36.79]早安喵 午安喵 晚安喵 喵 喵
[01:45.94]嘿咻嘿咻~
`
 function musicStyle(){//控件css样式；	
 	music.autoplay =true;
 	music.src =c;	
 	music.controls =true;
 	music.loop =true;
 	music.style.outline ='none'; 
 	music.style.width ='100%';
 	musicArea.style.width ='100%';
 	musicArea.style.height ='100%';
 	musicArea.style.overflow = 'hidden'
 	// musicArea.style.outline ='3px solid'
 	musicUl.style.listStyle ='none'; 
 	musicUl.style.width ='100%'
 	musicUl.style.padding  ='0';
 	musicUl.style.transition = '0.3'
 }
 //把歌词变成[{time,lrc},{time,lrc}...]的样子，不然没法用的
 function split(){//把lrc歌词分割成数组，
    let split_1 =lrc.split('\n');
	let length = split_1.length;
	for (let i = 0; i < length; i++) {
		let lrcArr = split_1[i];
		split_1[i] = change(lrcArr);
	function change(str){
		let lrc = str.split(']');
		let timer =lrc[0].replace('[','');
		let str_music =lrc[1];
		let time_split =timer.split(':');
		let s = +time_split[1];
		let min = +time_split[0];
		return{
			time:min*60 + s ,
			lrc :str_music//分割好到歌词和时间
		}
        
	}
}
return split_1
}
let lrcArr = split();//至此歌词处理完了。
createLi();
function createLi(){//根据歌词数组创建li
	let len = lrcArr.length;
	for (let i = 0; i < len; i++) {
		  let lrc_li  = lrcArr[i];
		  let li  = document.createElement('li');
		  li.innerText =lrc_li.lrc;
		  li.style.height = b + 'px'
		  li.style.textAlign ='center'
		  li.style.width='100%'
		  li.style.padding = '0';
		  li.style.color = '#999'
		  li.style.transition = '0.3'
		  musicUl.appendChild(li);
	}
}
function setCurrentLi(){
	let time = music.currentTime;
	// console.log(time)
	for ( i = 0; i < lrcArr.length; i++) {
		let play = lrcArr[i];
		if (time -play.time <= 0) {
			 return i;
		}
	}return -1;
}
function current(){//设置top，让其滚动
	let li = setCurrentLi();
	let divHeight = a;
	let liHeight =b;
	let top  = liHeight*li - divHeight / 2 +liHeight / 2;
	if (top < 0) {
		top = 0;
	}
	musicUl.style.marginTop = -top + 'px';
	// console.log('top'+top);
	let playLi =musicUl.querySelector('.play')
	if (playLi) {
		playLi.className = '';		
	}
	if(li>=0){
		musicUl.children[li-1].className ='play'
    
}}
music.ontimeupdate = current;
}
  • 这里说一下大概思路，先把lrc歌词变成能用到数组，
  • 像这样到[{time,str},{time,str},{time,str}…]
  • 其中time为时间，str为歌词。
  • 然后用设置margin-top让其滚动。
  • 不说了我要去恶补ajax了。
    最后欢迎指出不足的地方
    还有大家最近还是少出门，注意别生病了。
    提前祝新年快乐！

你可能感兴趣的:(js,前端,html)

  • Python-Django毕业设计医院门诊管理信息系统（程序+Lw) Python计算机毕设程序源码_ pythondjango课程设计
    该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程项目运行环境配置：Pychram社区版+python3.7.7+Mysql5.7+HBuilderX+listpip+Navicat11+Django+nodejs。项目技术：django+python+Vue等等组成，B/S模式+pychram管理等等。环境需要1.运行环境：最好是python3.7.7，我们在这个版本上开发的。其他版
  • Java对接DeepSeek全攻略：从0到1小白无忧 古龙飞扬 java开发语言ai
    本文将带你从零开始，详细讲解如何在Java中对接DeepSeekAPI，适合小白用户。我们将从环境搭建、API调用、数据处理等方面逐步展开，并提供完整的代码示例。目录准备工作获取DeepSeekAPI密钥创建Java项目添加依赖使用Maven引入HTTP和JSON库编写代码创建请求和响应类发送HTTP请求处理API响应完整代码示例运行与测试常见问题与解决方案1.准备工作1.1获取DeepSeekA
  • Windows安装nvm【超详细图解】 古龙飞扬 windows
    在Windows系统上安装nvm（NodeVersionManager，即Node.js版本管理器）的详细步骤如下：一、下载nvm安装包方式一：官网下载地址：https://nvm.uihtm.com/注意此种方式可能会打不开，看运气，如果打不开还有第二种方式。方式二：GitHub下载1.访问nvm的GitHub页面：前往nvm的GitHub页面下载适用于Windows的安装包。2.选择安装包：通
  • jsp中嵌套java代码，js中嵌套java代码 loveking6 嵌套jspjsjava代码
    首先根据三目运算中，来判断如果等于add，就是新增，否则就是编辑。在js中想要判断是true还是false，所以需要把java代码拿过来，在js中写java代码，得加上，在里面写java代码根据jsp中的java代码，取到user，在js中调用user
  • js隐藏td loveking6 js隐藏
    通过if条件判断td的显示情况window.οnlοad=function(){//获取td的唯一标识，经过判断使其不显示（不占位隐藏）document.getElementById("admin2").style.display="none";$("#admin2").hide();$("#admin2").attr("style","display:none");//获取td的唯一标识，使其显
  • 使用Node.js对接StockTV全球金融市场数据API 数据分析爬虫
    使用Node.js对接StockTV全球金融市场数据API摘要：本文详细介绍了如何通过Node.js客户端库快速接入StockTV全球金融市场数据API，涵盖股票、外汇、期货和加密货币的实时行情获取与历史数据查询。通过本文，开发者可掌握RESTAPI调用、WebSocket实时订阅等核心功能。一、项目概述StockTVAPINode.js客户端是一个轻量级SDK，提供对全球四大金融市场的标准化访问
  • webpack-bundle-analyzer分析打包文件 闰土月下追猹 前端webpack-bundlebundle-analyzerwebpackvue.js前端
    安装：npminstall--save-devwebpack-bundle-analyzer在vue.config.js中配置：constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports={chainWebpack:config=>{//打包分析if(process
  • Webpack 前端性能优化全攻略 北辰alk 前端vue前端webpack性能优化
    文章目录1.性能优化全景图1.1优化维度概览1.2优化效果指标2.构建速度优化2.1缓存策略2.2并行处理2.3减少构建范围3.输出质量优化3.1代码分割3.2TreeShaking3.3压缩优化4.运行时性能优化4.1懒加载4.2预加载4.3资源优化5.高级优化策略5.1持久化缓存5.2模块联邦5.3性能分析6.优化效果验证6.1构建速度分析6.2性能监控7.最佳实践总结7.1优化策略7.2持续
  • IP系统中的SDP会话描述协议深度解析（一） 一个广电工程师 广播电影电视专业技术tcp/ip网络协议网络
    SDP核心概念会话描述协议（SessionDescriptionProtocol，简称SDP）作为多媒体会话的元数据载体，其规范定义详见RFC4566标准文档（"https://datatracker.ietf.org/doc/html/rfc4566"）。该协议作为跨平台会话描述的通用语法框架，广泛应用于SIP通信系统、RTSP流媒体传输、电子邮件服务及Web服务体系，在广播电视行业的IP化进程
  • angular中下载接口返回文件 lhhbk angular.js前端javascriptangular
    目录一、URL.createObjectURL()一、URL.createObjectURL()createObjectURL属于js的原生方法，位于window.URL上，用于将Blob或者File文件转换为可以临时的URL地址进行显示**注意**：Angular的HttpClient默认将响应解析为JSON对象‌16。若实际返回的是二进制数据（如Excel文件、图片等），解析过程会因格式不匹配
  • nodejs 010:Webpack 可视化分析插件 webpack-bundle-analyzer的使用 FakeOccupational 服务化&架构webpack前端node.js
    安装yarnadd--devwebpack-bundle-analyzer原始webpack.config.jswebpack.config.js代码定义了Webpack的配置，主要任务是将JavaScript和CSS文件打包，并将CSS提取到单独的文件中，配置了对Electron应用的支持，同时还将React相关的模块映射到Preact，以减小打包体积。//引入Node.js的path模块，用于
  • 【SpringMVC】常用注解：@PathVariable 字节源流 javaservlet开发语言
    1.作用用于绑定url中的占位符，例如请求中的/delete/{id}，这个{id}就是url中的占位符。url支持占位符是Spring3.0之后加入的。是SpringMVC支持rest风格URL的重要标志。2.属性value：用于指定url中占位符的名称。required：是否必须提供占位符。3.示例准备jsp代码pathVariable注解准备控制器代码@RequestMapping("use
  • SpringBoot2.0实战 | 第二十八章：整合SpringSecurity之前后端分离使用JWT实现登录鉴权 死牛胖子 #SpringBootspringBootspringSecurityjwttokenmybatis
    在前面的文章中，我们已经使用token实现前后端分离的系统登录及访问鉴权。第二十四章：整合SpringSecurity之最简登录及方法鉴权第二十五章：整合SpringSecurity之基于数据库实现登录鉴权第二十六章：整合SpringSecurity之前后端分离使用JSON格式交互第二十七章：整合SpringSecurity之前后端分离使用Token实现登录鉴权登录成功后，服务端会生成一个toke
  • Web 开发都需要学什么？ Duiz33237 前端html5css3web
    Web开发是指开发和构建用于互联网的网站和应用程序的过程。它涉及使用各种编程语言、框架和技术来创建功能丰富、用户友好的网站和应用程序。常见的web开发技术包括HTML、CSS和JavaScript。HTML用于创建网页的结构，CSS用于样式和布局，而JavaScript用于实现交互和动态效果。此外，还有许多其他的编程语言和框架，如Python、PHP、Ruby、React、Angular等，用于开
  • Prompt工程全解析：从入门到精通的终极指南 二川bro 智能AI人工智能prompt
    Prompt工程全解析：从入门到精通的终极指南发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，可以分享一下给大家。点击跳转到网站。https://www.captainbed.cn/ccc一、Prompt设计核心法则1.1角色定位法则[角色设定]你是一位资深全栈工程师，拥有10年React和Node.js开发经验[任务要求]为电商系统设计购物车模块，要求：1.支持商品增删改查2.实时计算总价
  • 2024前端面试题-css篇 Adasunshine 面试题前端css面试
    1.p和div区别p自带有一定margin-top和margin-bottom属性值，而div两个属性值为0，也便是两个p之间有不一定间距，而div没有。2.对css盒模型的理解标准盒模型：content不包括padding、border、marginie盒模型：content包括padding、border、margin在不设置的情况下，默认为W3C盒模型（标准盒模型）。标准盒模型：box-si
  • 【HarmonyOS 鸿蒙实战开发】自定义装饰器 CTrup 移动开发HarmonyOS鸿蒙开发harmonyosArkUIArkts装饰器模式组件化鸿蒙开发移动开发
    往期笔录记录：鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……介绍本示例介绍通过自定义装饰器在自定义组件中自动添加inspector(布局回调)方法并进行调用。效果图预览不涉及使用说明在自定义组件上添加自定义装
  • 如何使用Jsoup提取商品信息：实战指南 数据小爬虫@ python爬虫java
    在使用Java进行Web爬虫开发时，Jsoup是一个非常强大的HTML解析库，可以帮助你轻松地提取网页中的数据。本文将详细介绍如何使用Jsoup提取商品信息，包括商品标题、价格、描述和图片链接等。一、环境准备（一）Java开发环境确保你的系统中已安装Java开发环境，推荐使用JDK11或更高版本。（二）安装所需库使用Maven管理项目依赖，主要包括以下库：Jsoup：用于解析HTML内容。在pom
  • 利用Java爬虫根据关键词获取商品列表：实战指南 数据小爬虫@ java爬虫开发语言
    在电商领域，通过关键词搜索商品并获取商品列表是常见的需求。本文将详细介绍如何使用Java编写爬虫程序，根据关键词获取商品列表，并确保爬虫行为符合平台规范。为了确保代码的准确性和实用性，我们将提供详细的代码示例和解释。一、环境准备（一）Java开发环境确保你的系统中已安装Java开发环境，推荐使用JDK11或更高版本。（二）安装所需库使用Maven管理项目依赖，主要包括以下库：Jsoup：用于解析H
  • 前端高级CSS用法 二川bro 前端前端css
    前端高级CSS用法在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一。随着前端技术的不断发展，CSS的用法也日益丰富和高级。本文将深入探讨前端高级CSS的用法，并通过表格和流程图来直观展示。一、CSS高级选择器CSS选择器是选择HTML元素并应用样式的基础。高级选择器使得我们能够更加精确地选择元素，从而实现更复杂的样式效果。属性选择器：根据元
  • DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_10空状态的固定表头表格 宝码香车 #DeepSeekjavascript前端vue.jsecmascriptDeepSeek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_10空状态的固定表头表格页面效果组件代码代码测试测试代码正常跑通，附其他基本代码编写路由src\router\index.js编写展示入口s
  • Javascript基础语法详解 Warren98 javascript开发语言ecmascript
    面向对象的语言.脚本语言,不需要编译,浏览器解释即可运行.用于控制网页的行为.浏览器的source可以打断点调试,console输入代码可以执行usestrict指令:在“严格模式”下运行js代码,防止意外创建全局变量等,提高代码安全性和执行效率.使用:全局严格模式：在脚本的开头添加"usestrict".函数级严格模式:在函数的开头添加"usestrict"：functionmyFunction
  • Next.js项目MindAI教程 - 第一章：环境准备与项目初始化 琑95 Next.js实战项目node.jstypescriptgitmysql人工智能阿里云c5全栈
    1.开发环境准备1.1Node.js安装#检查是否已安装Node.jsnode-vnpm-v#如果未安装，访问https://nodejs.org下载安装包#建议安装LTS版本（当前为18.x或20.x）1.2配置npm镜像（国内用户推荐）#设置淘宝镜像npmconfigsetregistryhttps://registry.npmmirror.com#或安装cnpmnpminstall-gcnp
  • 简易C语言Web服务器 mzg__ c语言前端服务器
    概述：这个项目是一个用C语言实现的简易Web服务器，使用了套接字（sockets）和pthread。服务器能够处理基本的HTTP请求，提供静态HTML和图片文件。它采用多线程以同时处理多个客户端连接。主要特点：HTTP服务器：在指定的端口（这里是8080）监听传入的HTTP请求。多线程：利用pthread以同时处理多个客户端连接，提高服务器的响应性。文件处理：根据客户端请求，支持提供HTML和JP
  • cursor全栈网页开发最合适的技术架构和开发语言 getapi 架构开发语言
    在使用Cursor（一个基于AI的代码编辑器）进行前后端全栈网页开发时，选择合适的技术架构和开发语言非常重要。以下是一个推荐的技术架构和语言组合，能够帮助你高效开发并充分利用Cursor的功能。1.技术架构推荐对于全栈开发，建议采用MERN/MEAN技术栈或现代化的微前端架构，具体如下：(1)MERN技术栈MERN是MongoDB、Express.js、React和Node.js的缩写，是目前非常
  • 使用pdfjs加载多页pdf并实现打印 MandiGao vue文件处理pdfvue
    版本：vue:2.7.10pdfjs-dist:2.14.305worker-loader:3.0.1安装pdfjs-dist、worker-loadernpminstallpdfjs-dist@[email protected]在vue.config.js中配置//webpack配置chainWebpack(config){
  • es常用命令 qq_35640866 elasticsearch
    查看索引1、查看所有的索引GET/_cat/indices?vjson格式化显示GET/_cat/indices?format=json&pretty"health":"green",健康状态"status":"open","index":"xxxx_202304_0010",索引名字"uuid":"xxxx5j0SYiydLnuo9Txxx","pri":"16",主分片数量"rep":"1",
  • DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_07带分页的固定表头表格 宝码香车 #DeepSeekjavascript前端vue.jsecmascriptDeepSeek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_07带分页的固定表头表格页面效果组件代码代码测试测试代码正常跑通，附其他基本代码编写路由src\router\index.js编写展示入口s
  • DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_04带选择框的固定表头表格 宝码香车 #DeepSeekjavascript前端vue.jsecmascriptDeepSeekdeepSeekdeepseek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_04带选择框的固定表头表格页面效果组件代码代码测试测试代码正常跑通，附其他基本代码编写路由src\router\index.js编写展示入口
  • DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_01基础固定表头示例 宝码香车 #DeepSeekjavascript前端vue.jsecmascriptDeepSeek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_01基础固定表头示例页面效果组件代码测试代码正常跑通，附其他基本代码编写路由src\router\index.js编写展示入口src\App
  • jQuery 键盘事件keydown ,keypress ,keyup介绍 107x jsjquerykeydownkeypresskeyup
    本文章总结了下些关于jQuery 键盘事件keydown ,keypress ,keyup介绍，有需要了解的朋友可参考。 一、首先需要知道的是： 1、keydown() keydown事件会在键盘按下时触发. 2、keyup()  代码如下 复制代码 $('input').keyup(funciton(){      
  • AngularJS中的Promise bijian1013 JavaScriptAngularJSPromise
    一.Promise         Promise是一个接口，它用来处理的对象具有这样的特点：在未来某一时刻（主要是异步调用）会从服务端返回或者被填充属性。其核心是，promise是一个带有then()函数的对象。         为了展示它的优点，下面来看一个例子，其中需要获取用户当前的配置文件： var cu
  • c++ 用数组实现栈类 CrazyMizzz 数据结构C++
    #include<iostream> #include<cassert> using namespace std; template<class T, int SIZE = 50> class Stack{ private: T list[SIZE];//数组存放栈的元素 int top;//栈顶位置 public: Stack(
  • java和c语言的雷同 麦田的设计者 java递归scaner
    软件启动时的初始化代码，加载用户信息2015年5月27号 从头学java二 1、语言的三种基本结构：顺序、选择、循环。废话不多说，需要指出一下几点：      a、return语句的功能除了作为函数返回值以外，还起到结束本函数的功能，return后的语句 不会再继续执行。      b、for循环相比于whi
  • LINUX环境并发服务器的三种实现模型 被触发 linux
    服务器设计技术有很多，按使用的协议来分有TCP服务器和UDP服务器。按处理方式来分有循环服务器和并发服务器。 1  循环服务器与并发服务器模型 在网络程序里面，一般来说都是许多客户对应一个服务器，为了处理客户的请求，对服务端的程序就提出了特殊的要求。 目前最常用的服务器模型有： ·循环服务器：服务器在同一时刻只能响应一个客户端的请求 ·并发服务器：服
  • Oracle数据库查询指令 肆无忌惮_ oracle数据库
    20140920   单表查询 -- 查询************************************************************************************************************ -- 使用scott用户登录   -- 查看emp表   desc emp  
  • ext右下角浮动窗口 知了ing JavaScriptext
    第一种 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
  • 浅谈REDIS数据库的键值设计 矮蛋蛋 redis
    http://www.cnblogs.com/aidandan/ 原文地址：http://www.hoterran.info/redis_kv_design 丰富的数据结构使得redis的设计非常的有趣。不像关系型数据库那样，DEV和DBA需要深度沟通，review每行sql语句，也不像memcached那样，不需要DBA的参与。redis的DBA需要熟悉数据结构，并能了解使用场景。
  • maven编译可执行jar包 alleni123 maven
    http://stackoverflow.com/questions/574594/how-can-i-create-an-executable-jar-with-dependencies-using-maven <build> <plugins> <plugin> <artifactId>maven-asse
  • 人力资源在现代企业中的作用 百合不是茶 HR 企业管理
    //人力资源在在企业中的作用人力资源为什么会存在，人力资源究竟是干什么的 人力资源管理是对管理模式一次大的创新，人力资源兴起的原因有以下点： 工业时代的国际化竞争，现代市场的风险管控等等。所以人力资源 在现代经济竞争中的优势明显的存在，人力资源在集团类公司中存在着 明显的优势(鸿海集团)，有一次笔者亲自去体验过红海集团的招聘，只 知道人力资源是管理企业招聘的 当时我被招聘上了，当时给我们培训 的人
  • Linux自启动设置详解 bijian1013 linux
    linux有自己一套完整的启动体系，抓住了linux启动的脉络，linux的启动过程将不再神秘。 阅读之前建议先看一下附图。 本文中假设inittab中设置的init tree为： /etc/rc.d/rc0.d /etc/rc.d/rc1.d /etc/rc.d/rc2.d /etc/rc.d/rc3.d /etc/rc.d/rc4.d /etc/rc.d/rc5.d /etc
  • Spring Aop Schema实现 bijian1013 javaspringAOP
    本例使用的是Spring2.5 1.Aop配置文件spring-aop.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmln
  • 【Gson七】Gson预定义类型适配器 bit1129 gson
    Gson提供了丰富的预定义类型适配器，在对象和JSON串之间进行序列化和反序列化时，指定对象和字符串之间的转换方式，   DateTypeAdapter   public final class DateTypeAdapter extends TypeAdapter<Date> { public static final TypeAdapterFacto
  • 【Spark八十八】Spark Streaming累加器操作（updateStateByKey) bit1129 update
    在实时计算的实际应用中，有时除了需要关心一个时间间隔内的数据，有时还可能会对整个实时计算的所有时间间隔内产生的相关数据进行统计。 比如： 对Nginx的access.log实时监控请求404时，有时除了需要统计某个时间间隔内出现的次数，有时还需要统计一整天出现了多少次404，也就是说404监控横跨多个时间间隔。   Spark Streaming的解决方案是累加器，工作原理是，定义
  • linux系统下通过shell脚本快速找到哪个进程在写文件 ronin47
    一个文件正在被进程写 我想查看这个进程 文件一直在增大 找不到谁在写 使用lsof也没找到 这个问题挺有普遍性的，解决方法应该很多，这里我给大家提个比较直观的方法。 linux下每个文件都会在某个块设备上存放，当然也都有相应的inode, 那么透过vfs.write我们就可以知道谁在不停的写入特定的设备上的inode。 幸运的是systemtap的安装包里带了inodewatch.stp，位
  • java-两种方法求第一个最长的可重复子串 bylijinnan java算法
    import java.util.Arrays; import java.util.Collections; import java.util.List; public class MaxPrefix { public static void main(String[] args) { String str="abbdabcdabcx";
  • Netty源码学习-ServerBootstrap启动及事件处理过程 bylijinnan javanetty
    Netty是采用了Reactor模式的多线程版本，建议先看下面这篇文章了解一下Reactor模式： http://bylijinnan.iteye.com/blog/1992325 Netty的启动及事件处理的流程，基本上是按照上面这篇文章来走的 文章里面提到的操作，每一步都能在Netty里面找到对应的代码 其中Reactor里面的Acceptor就对应Netty的ServerBo
  • servelt filter listener 的生命周期 cngolon filterlistenerservelt生命周期
    1. servlet    当第一次请求一个servlet资源时，servlet容器创建这个servlet实例，并调用他的 init(ServletConfig config)做一些初始化的工作，然后调用它的service方法处理请求。当第二次请求这个servlet资源时，servlet容器就不在创建实例，而是直接调用它的service方法处理请求，也就是说
  • jmpopups获取input元素值 ctrain JavaScript
    jmpopups 获取弹出层form表单 首先，我有一个div，里面包含了一个表单，默认是隐藏的，使用jmpopups时，会弹出这个隐藏的div，其实jmpopups是将我们的代码生成一份拷贝。 当我直接获取这个form表单中的文本框时，使用方法：$('#form input[name=test1]').val()；这样是获取不到的。 我们必须到jmpopups生成的代码中去查找这个值，$(
  • vi查找替换命令详解 daizj linux正则表达式替换查找vim
    一、查找 查找命令 /pattern<Enter> ：向下查找pattern匹配字符串 ?pattern<Enter>：向上查找pattern匹配字符串 使用了查找命令之后，使用如下两个键快速查找： n：按照同一方向继续查找 N：按照反方向查找 字符串匹配 pattern是需要匹配的字符串，例如： 1:  /abc<En
  • 对网站中的js,css文件进行打包 dcj3sjt126com PHP打包
    一，为什么要用smarty进行打包 apache中也有给js,css这样的静态文件进行打包压缩的模块，但是本文所说的不是以这种方式进行的打包，而是和smarty结合的方式来把网站中的js,css文件进行打包。 为什么要进行打包呢，主要目的是为了合理的管理自己的代码 。现在有好多网站，你查看一下网站的源码的话，你会发现网站的头部有大量的JS文件和CSS文件，网站的尾部也有可能有大量的J
  • php Yii: 出现undefined offset 或者 undefined index解决方案 dcj3sjt126com undefined
    在开发Yii 时，在程序中定义了如下方式：        if($this->menuoption[2] === 'test')，那么在运行程序时会报：undefined offset:2，这样的错误主要是由于php.ini 里的错误等级太高了，在windows下错误等级
  • linux 文件格式（1） sed工具 eksliang linuxlinux sed工具sed工具linux sed详解
    转载请出自出处： http://eksliang.iteye.com/blog/2106082 简介       sed 是一种在线编辑器，它一次处理一行内容。处理时，把当前处理的行存储在临时缓冲区中，称为“模式空间”（pattern space），接着用sed命令处理缓冲区中的内容，处理完成后，把缓冲区的内容送往屏幕。接着处理下一行，这样不断重复，直到文件末尾
  • Android应用程序获取系统权限 gqdy365 android
    引用 如何使Android应用程序获取系统权限         第一个方法简单点，不过需要在Android系统源码的环境下用make来编译：         1. 在应用程序的AndroidManifest.xml中的manifest节点
  • HoverTree开发日志之验证码 hvt .netC#asp.nethovertreewebform
    HoverTree是一个ASP.NET的开源CMS，目前包含文章系统，图库和留言板功能。代码完全开放，文章内容页生成了静态的HTM页面，留言板提供留言审核功能，文章可以发布HTML源代码，图片上传同时生成高品质缩略图。推出之后得到许多网友的支持，再此表示感谢！留言板不断收到许多有益留言，但同时也有不少广告，因此决定在提交留言页面增加验证码功能。ASP.NET验证码在网上找，如果不是很多，就是特别多
  • JSON API：用 JSON 构建 API 的标准指南中文版 justjavac json
    译文地址：https://github.com/justjavac/json-api-zh_CN 如果你和你的团队曾经争论过使用什么方式构建合理 JSON 响应格式， 那么 JSON API 就是你的 anti-bikeshedding 武器。 通过遵循共同的约定，可以提高开发效率，利用更普遍的工具，可以是你更加专注于开发重点：你的程序。 基于 JSON API 的客户端还能够充分利用缓存，
  • 数据结构随记_2 lx.asymmetric 数据结构笔记
    第三章 栈与队列 一．简答题 1. 在一个循环队列中，队首指针指向队首元素的  前一个    位置。  2.在具有n个单元的循环队列中，队满时共有  n-1  个元素。  3. 向栈中压入元素的操作是先  移动栈顶指针&n
  • Linux下的监控工具dstat 网络接口 linux
    1) 工具说明dstat是一个用来替换 vmstat,iostat netstat,nfsstat和ifstat这些命令的工具, 是一个全能系统信息统计工具. 与sysstat相比, dstat拥有一个彩色的界面, 在手动观察性能状况时, 数据比较显眼容易观察; 而且dstat支持即时刷新, 譬如输入dstat 3, 即每三秒收集一次, 但最新的数据都会每秒刷新显示. 和sysstat相同的是,
  • C 语言初级入门--二维数组和指针 1140566087 二维数组c/c++指针
    /* 二维数组的定义和二维数组元素的引用 二维数组的定义： 当数组中的每个元素带有两个下标时，称这样的数组为二维数组； (逻辑上把数组看成一个具有行和列的表格或一个矩阵); 语法： 类型名 数组名[常量表达式1][常量表达式2] 二维数组的引用： 引用二维数组元素时必须带有两个下标，引用形式如下： 例如： int a[3][4];  引用：
  • 10点睛Spring4.1-Application Event wiselyman application
    10.1 Application Event Spring使用Application Event给bean之间的消息通讯提供了手段 应按照如下部分实现bean之间的消息通讯 继承ApplicationEvent类实现自己的事件 实现继承ApplicationListener接口实现监听事件 使用ApplicationContext发布消息
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他