远近高低各不同
远近高低各不同

JS之歌词滚动案例

让我为大家带来一个歌词滚动的案例吧！
详细的介绍都在代码块中
我很希望大家可以自己动手尝试一下，如果需要晴天的mp3音频文件可以私信我
上代码：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歌词滚动title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul {
            list-style: none;
            transition: all 0.5s;
        }
        body {
            background-color: #000;
        }
        audio {
            display: block;
            margin: 50px auto;
            width: 400px;
        }
        .container {
            text-align: center;
            color: #fff;
            height: 400px;
            overflow: hidden;
        }
        ul li {
            height: 40px;
            line-height: 40px;
            transition: all 0.5s;
        }
        /* 对应的歌词设置active */
        .active {
            color: red;
            /* 建议使用transform font-size会造成reflow重新布局 效率变低 */
            /* transform不在渲染主线程上执行 而是在合成线程上执行 就不会造成reflow */
            transform: scale(1.5);
        }
    style>
head>
<body>
    
    <audio src="周杰伦-晴天.mp3" controls>audio>
    
    <div class="container">
        
        <ul>
        ul>
    div>
body>
<script>
    // 歌词
    let lrc = `[00:00.71]晴天 - 周杰伦
[00:28.84]故事的小黄花
[00:32.34]从出生那年就飘着
[00:35.85]童年的荡秋千
[00:39.41]随记忆一直晃到现在
[00:42.77]rui sou sou xi dou xi la
[00:45.50]sou la xi xi xi xi la xi la sou
[00:49.41]吹着前奏望着天空
[00:52.60]我想起花瓣试着掉落
[00:56.10]为你翘课的那一天
[00:58.29]花落的那一天
[01:00.14]教室的那一间
[01:01.79]我怎么看不见
[01:03.61]消失的下雨天
[01:05.38]我好想再淋一遍
[01:09.51]没想到失去的勇气我还留着
[01:15.72]好想再问一遍
[01:17.47]你会等待还是离开
[01:24.46]刮风这天我试过握着你手
[01:30.18]但偏偏雨渐渐大到我看你不见
[01:38.50]还要多久我才能在你身边
[01:44.93]等到放晴的那天也许我会比较好一点
[01:52.41]从前从前有个人爱你很久
[01:58.07]但偏偏风渐渐把距离吹得好远
[02:06.44]好不容易又能再多爱一天
[02:12.81]但故事的最后你好像还是说了拜拜
[02:33.93]为你翘课的那一天
[02:36.39]花落的那一天
[02:38.13]教室的那一间
[02:39.84]我怎么看不见
[02:41.55]消失的下雨天
[02:43.31]我好想再淋一遍
[02:47.39]没想到失去的勇气我还留着
[02:53.39]好想再问一遍
[02:55.49]你会等待还是离开
[03:02.46]刮风这天我试过握着你手
[03:08.12]但偏偏雨渐渐大到我看你不见
[03:16.54]还要多久我才能在你身边
[03:23.10]等到放晴的那天也许我会比较好一点
[03:30.49]从前从前有个人爱你很久
[03:36.26]但偏偏风渐渐把距离吹得好远
[03:44.48]好不容易又能再多爱一天
[03:51.05]但故事的最后你好像还是说了拜拜
[03:57.65]刮风这天我试过握着你手
[04:01.45]但偏偏雨渐渐大到我看你不见
[04:04.98]还要多久我才能够在你身边
[04:08.64]等到放晴那天也许我会比较好一点
[04:12.34]从前从前有个人爱你很久
[04:15.40]但偏偏雨渐渐把距离吹得好远
[04:19.05]好不容易又能再多爱一天
[04:22.42]但故事的最后你好像还是说了吧`
    // 获取audio
    const audio = document.querySelector("audio")
    // 获取容器
    const container = document.querySelector(".container")
    // 获取ul
    const ul = document.querySelector("ul")
    // 第一步渲染页面，我们需要用到split \n换行切割 记住是\n 不是/n
    const lrcArr = lrc.split("\n")
    // console.log(lrcArr);
    // 准备好一个数组接收
    const resultArr = []
    // 因为我们是[00:00:00]这样的形式我们需要继续切割
    for (let i = 0; i < lrcArr.length; i++) {
        const lrcData = lrcArr[i].split("]")
        // 我们取到lrcData[0]与lrcData[1]
        // 获取到 00:00:00这样的字符串
        const times = lrcData[0].slice(1)
        // 声明一个对象 我们把时间与歌词依次存入
        const objLrc = {
            // 时间 不过我们需要处理一下时间 把00:00:00这样的格式转换为秒
            seconds: parseTime(times),
            // 歌词
            lrc: lrcData[1]
        }
        // 添加到resultArr中
        resultArr.push(objLrc)
    }
    // 处理时间转换为秒
    function parseTime(times) {
        // 切割times 用:切割
        let timesArr = times.split(":")
        // console.log(timesArr);
        // 把下标为0的分钟转换为秒 但要注意 当前时间为字符串型 我们需要转换为数字型
        // 介绍一下+ 这个是数值中的隐式转换
        return +timesArr[0] * 60 + +timesArr[1]
    }
    // 渲染页面
    function createLis() {
        for (let i = 0; i < resultArr.length; i++) {
            let li = document.createElement("li")
            li.innerHTML = resultArr[i].lrc
            ul.appendChild(li)
        }
    }
    createLis()
    // 获取到下标
    function getIndex() {
        // 获取音频的当前时间
        let current = audio.currentTime
        for (let i = 0; i < resultArr.length; i++) {
            // 判断 如果当前时间小于seconds 下标为 i - 1
            if (current < resultArr[i].seconds) {
                return i - 1
            }
        }
        // 找遍了没有找到 说明播放到最后一句了
        return resultArr.length - 1
    }
    // 获取到container的高度
    const containerHeight = container.clientHeight
    // 获取到第一个li的高度
    const liHeight = ul.children[0].clientHeight
    // 设置最大最小偏移 解决效果不佳
    const minOffset = 0
    const maxOffset = ul.clientHeight - containerHeight
    // 滚动效果
    function setOffset() {
        // 下标
        let index = getIndex()
        // 滚动到哪了 li的高度乘以下标就是对应的歌词 
        // 然后减去容器的一半 这时对应的li就在接近中间的位置
        // 我们再加上li一半的高度这时对应li就在中间
        let offset = liHeight * index - containerHeight / 2 + liHeight / 2
        // 判断
        // 为什么offset会小于0?
        // 假设现在下标为0 选取到了第0个
        // 那么就是 liHeight*0 - 200+liHeight/2
        if (offset < minOffset) {
            // offset赋为minOffset
            offset = minOffset
        }
        // 为什么会大于maxOffset?
        // 当我们歌到了最后的时候 就会造成这种情况
        if (offset > maxOffset) {
            // offset赋为maxOffset
            offset = maxOffset
        }
        // 现在可以滚动了 滚动ul
        // 建议大家使用transform
        // 好处在哪? 如果使用margin 会造成reflow重新布局 效率会出现问题
        // transform不在渲染主线程上执行 而是在合成线程上执行 就不会造成reflow
        ul.style.transform = `translateY(-${offset}px)`
        // 设置active
        // 首先我们获取到active
        let li = ul.querySelector(".active")
        // 存在就移除
        if (li) {
            li.classList.remove("active");
        }
        // 获取到下标对应的歌词
        li = ul.children[index];
        if (li) {
            li.classList.add("active");
        }
    }
    // 我们需要用到audio中的timeupdate事件
    audio.addEventListener("timeupdate", setOffset)
script>
html>

感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！

你可能感兴趣的:(css,前端,javascript)

  • JavaScript-闭包 tuoluoo JavaScript学习javascript
    闭包概念在JS中，变量的作用域属于函数作用域，在函数执行后作用域就会被清理、内存也随之回收，但是由于闭包是建立在一个函数内部的子函数，由于其可访问上级作用域的原因，即使上级函数执行完，作用域也不会随之销毁，这时的子函数——也就是闭包形成：函数中嵌套函数作用：函数内部调用外部变量、构造函数的私有属性、延长变量生命周期优点：希望一个变量长期存在内存中、模块化代码避免全局变量的污染、私有属性缺点：无法回
  • 自助洗车小程序开发方案详解 ALLSectorSorft 小程序服务器数据库微信小程序
    自助洗车小程序开发设计详细扩写一、系统架构设计（一）技术栈选型1.前端：微信小程序（原生开发）：直接基于微信官方提供的开发框架，能充分利用微信的原生能力，如小程序的启动速度快、与微信生态的无缝衔接等。开发过程中可使用微信开发者工具进行代码编写、调试和预览，通过WXML（类似HTML）、WXSS（类似CSS）和JavaScript构建用户界面和交互逻辑。例如利用微信原生的组件库，快速搭建出美观且符合
  • Spring Cloud Alibaba微服务架构实战教程—17分布式缓存下Redis设计 江湖一点雨 最新SpringCloudAlibaba实战开发redis缓存设计springcloud微服务实战springcloudalibabajava开发实战
    前言大多数的文章，开头就是告诉你使用redis做缓存，怎么怎么样，而本系列，不打算采用这样无趣的写法，这和直接搬运有什么区别？笔者力求读者能得到更大程度的系统学习，会从为什么使用缓存来给大家进行学习。问问大家，当系统的执行速度慢怎么办？对于更新速度不是很快的站点，可以采用静态化来避免过多的数据查询。通常前端使用Freemaker或Velocity、thymeleaf等模板引擎来实现页面的静态化。对
  • 正则表达式 yuren_xia 前端技术后端技术正则表达式javajavascript
    正则表达式（RegularExpression）是一种用于描述字符模式的规则，主流语言对其都有良好的支持。文章目录一、元字符二、常见校验1、校验数字的表达式2、校验字符的表达式3、特殊需求表达式三、JavaScript中使用正则表达式四、在java中使用正则表达式一、元字符正则表达式中有许多元字符，它们具有特殊的含义：1、字符类相关点号（.）匹配除换行符之外的任意单个字符。例如，在表达式a.b中，
  • 前端开发使用的 安卓模拟器_【译】移动开发中的仿真器与模拟器 weixin_39976748 前端开发使用的安卓模拟器
    译者注：本文主要涉及到两个概念：Emulator和Simulator。通常我们在工作中可能统统习惯称为“模拟器”，但实际上二者有所不同。为了分清概念，本文将Emulator译作“仿真器”，Simulator译作“模拟器”。听起来可能略拗口，如产生生理或心理不适，敬请谅解。仿真器(Emulator)，又称仿真程序，在软件工程中指可以使计算机或者其他多媒体平台(掌上电脑，手机)能够运行其他平台上的程序
  • React Native svygh123 问题解决过程编程jsreactnativereact.jsjavascript
    ReactNative是一个用于构建原生移动应用的框架，它使用JavaScript和React（一个用于构建用户界面的JavaScript库）来开发iOS和Android平台的应用程序。ReactNative由Facebook开发并维护，并且是开源的。特点跨平台开发：ReactNative允许开发者使用相同的代码库为多个平台（如iOS和Android）编写应用，极大地提高了开发效率。热重载：开发者
  • Apipost一站式API工具评测：整合Postman+Swagger+JMeter三大功能，打造全流程开发解决方案
    作为一名Java开发者，始终追求开发过程的高效性。使用IntelliJIDEA编写代码只是开始。一般来说，代码完成后，我们会切换到Postman进行API调试。在确保API表现符合预期后，我们会使用Swagger为前端团队生成文档。最后，再使用JMeter进行性能和负载测试，以确保API工作流顺畅且自动化。Apipost=Postman+Swagger+JMeter然而，这种多工具的方法存在诸多挑
  • VScode使用小技巧 前端CV攻城狮 vscodejavascript前端
    代码片段快捷键设置设置位置：文件—首选项—用户代码片段----搜javaScript,进入JavaScript.json,自定义快捷键（setting→ConfigureUserSnippets→JavaScripts.json）例：log快速输入console.log()"Printtoconsole":{"prefix":"log","body":["console.log('$1')"],"
  • 前端的架构设计与演化实例 weixin_30677073 前端jsonjavascriptViewUI
    前言本文介绍我在实际的前端项目中的架构设计，展示因为需求变化而导致架构变化的过程。全文分为三个阶段，分别对应三次需求的变化，给出了对应的架构设计。在第一个阶段中，我使用面向过程设计；在第二个阶段和在第三个阶段中，我使用面向对象设计。本文内容策略依赖项第一个阶段需求架构设计项目示例代码序列图重构领域模型分析当前设计第二个阶段需求架构设计分析当前设计重构项目示例代码序列图分析具体实现重构领域模型思考：
  • 前端的架构 so_cruel
    一、组件化和模式设计层面1、JS中的继承和扩展在实际的操作中，不需要自己去写太多的这种继承，主要用库，像jquary中的extend。2,、组件化：一般常用的组件有两个，requirejs和sea.js二、做前端架构前需要想什么1、除了技术基础外，应当了解需求，然后进行模块的边界划分；2、如何设计友好接口；3、自动化的发布和快速迭代；4、如何降低维护成本。三、优化和扩展四、自动化最后再提一句，学好
  • react 和 reflux yunhai.du Java开发react
    目录一、介绍：二、特征：三、组成：四、react的基本概念：五、JSX语法：六、生命周期：七、简单的使用：一、介绍：react：最早来源于FaceBook,后来因为其独特的设计思想和惊人的性能被广大用户喜欢，现在是最受欢迎的前端框架之一。reflux:React的设计目的是管理视图层，所以对于大型应用来说，我们还需要数据层面的复用。所以facebook设计了flux架构，并官方发布了dispath
  • 数据监控工具Mixpanel的简易使用教程 alankuo 大数据
    Mixpanel的使用教程如下：注册与准备创建账号：访问Mixpanel官方网站，按照提示填写相关信息创建账号。登录后，在项目设置中可以获取项目密钥。了解基本概念：明确事件、用户属性等基本概念。事件是用户在应用中的操作，如点击按钮、完成注册等；用户属性是描述用户特征的信息，像年龄、城市、会员等级等。集成SDKWeb应用：在HTML文件中引入MixpanelJavaScriptSDK。在页面的标签内
  • 最新网络安全-跨站脚本攻击(XSS)的原理、攻击及防御_xsstrike原理 2401_84239830 程序员web安全xss安全
    XSS的类型反射型XSS/不持久型XSS存储型XSS/持久型XSS基于DOM的XSS常用Payload与工具XSS扫描工具Payloadsscript标签类结合js的html标签伪协议绕过危害防御简介跨站脚本攻击(全称CrossSiteScripting,为和CSS（层叠样式表）区分，简称为XSS)是指恶意攻击者在Web页面中插入恶意javascript代码（也可能包含html代码），当用户浏览网
  • P11：利用marked+highlight.js重构前台文章详细页面 知其黑、受其白 ReactHooks+Laravel制作博客javascript前端react.js
    ReactHooks+Laravel前端博客实战阐述安装marked和highlight.js重构`detailed.js`文件增加Code的高亮显示CSS样式的更换MySQL数据阐述之前我们在博客文章详细页使用了react-markdown模块，但是这个插件的配置项还是太少了，而且我也没做太多的技术调研，所以我决定转回我目前项目中使用的一套方案marked+highlight.js。这个方案是比
  • SassScript：Sass中的编程特性详解 love729234ming 日常分享sass前端css
    Sass（SyntacticallyAwesomeStylesheets）是一种强大的CSS预处理器，它允许开发者使用类似于编程语言的语法来编写CSS，然后通过编译生成标准的CSS代码。SassScript是Sass中的编程特性集合，它包含了变量、嵌套规则、混合、函数以及控制指令等，极大地提高了CSS的开发效率和可维护性。1.变量SassScript中的变量允许开发者在样式表中存储和重复使用值。变
  • vue懒加载 CV_CodeMan jsvuevue.js前端javascript
    Vue懒加载懒加载（LazyLoad）一直是前端的优化方案之一。简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。它的核心思想是：当用户想看页面某个区域时，再加载该区域的数据。这在一定程度上减轻了服务器端的压力，也加快了页面的呈现速度。懒加载多用于图片，因为它属于流量的大头。最典型的懒加载实现方案是先将需要懒加载的图片的src隐藏掉，这样图片就不会下载，然后在图片需要呈现给用户时再加上
  • 智慧树刷课插件常见问题解决方案 姬虹俪Humble
    智慧树刷课插件常见问题解决方案zhihuishu智慧树刷课插件，自动播放下一集、1.5倍速度、无声项目地址:https://gitcode.com/gh_mirrors/zh/zhihuishu1.项目基础介绍本项目是一个开源的智慧树刷课插件，旨在帮助用户自动化观看智慧树教学视频。该插件能够自动播放下一集视频、提供1.5倍速播放以及无声播放的功能。主要使用的编程语言为JavaScript和HTML
  • Vue懒加载 充气大锤 前端性能优化vue.js前端javascript学习笔记前端框架性能优化
    一、什么是懒加载在Vue中实现懒加载（LazyLoading）通常是为了优化应用的性能，尤其是在加载大型应用或组件时。懒加载可以帮助减少初始加载时间，只在用户需要时才加载特定的代码块或组件。二、懒加载的几种方式方法1：使用动态导入（DynamicImports）你可以使用JavaScript的动态导入语法来懒加载组件。例如，如果你想懒加载一个名为MyComponent的组件，你可以这样做：//在组
  • 【开源精选】《前端铺子》：打造你的全能型小程序开发助手 平淮齐Percy
    【开源精选】《前端铺子》：打造你的全能型小程序开发助手qdpz-uniapp项目基于vue-uniapp，使用colorUi与uView框架，完美支持微信小程序，包含功能：自定义TabBar与顶部、地图轨迹回放、电子签名、自定义相机/键盘、拍照图片水印、在线答题、证件识别、周边定位查询、文档预览、各种图表、行政区域、海报生成器、视频播放、主题切换、时间轴、瀑布流、排行榜、渐变动画、加载动画、请求封
  • 前端之vue2原理（全） yh502956003 前端学习笔记vue.js
    一、组件通信总结（有些不建议使用，打破vue单向数据流，可能出问题）常用父子组件通信：1.propevent；2.$ref$refs；3.$slots$scopedSlots(插槽)；4..sync（修饰符），5.$listeners//子组件通过$listeners获取父组件传递过来的所有处理函数、$parent$children//可以获取子组件或父组件的实例；6.attribute//（父组
  • 你知道 Vue scoped 原理吗？这波你在第几层？ CRMEB定制开发 学习笔记vue.jsjavascript前端
    ⭐佛系回答scoped原理？不就是给那啥加一个特殊标识，然后样式就被唯一标记，就实现了样式隔离的作用。⭐⭐普通回答scoped原理呀当style标签加上scoped属性时，scoped会在DOM结构及css样式上加上唯一性的标记data-v-xxx属性，从而达到样式私有化，不污染全局的作用；⭐⭐⭐专业回答嗯！ScopeCSS的本质是基于HTML和CSS属性选择器，即分别给HTML标签和CSS选择器
  • 深入理解Vue3中style的scoped Jinuss 前端源码#CSSvue.js
    概述scoped的作用就是样式模块化（CSSModule），即给组件每一个元素（以及非动态添加的子组件的根元素）加上一个data-v-xxxx的属性，样式选择器也会格式化成选择器[data-v-xxxx],这样就做到了样式隔离，每个组件内定义的样式只对该组件生效，避免了不同组件或页面的样式（选择器）冲突。本文将以vue3为例，深入了解scoped原理。scoped实践vue3组件是如下定义样式：标
  • DeepSeek源码解析（1） 白鹭凡 deepseekai
    下载github的DeepSeek-V3-main源码，目录如下文章适合入门小白学习，因为我也是小白，本来作为一名前端开发，因为行业不好混所以跑来学ai的。初步看它的代码并不多，主要是inference目录，convert.py#1.导入标准库importos#os是Python的标准库之一，提供了与操作系统交互的功能，比如文件路径操作、环境变量管理等。importshutil#shutil也是P
  • 「MySQL 数据库优化」降低存储与查询成本的最佳实践 网罗开发 python集终端集数据库mysql
    网罗开发（小红书、快手、视频号同名）  大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、HarmonyOS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者：《ESP32-C3物联网工程开发实战》图书作者：《SwiftUI入门，进阶与实战》超级个体：CO
  • JavaScript性能优化：DOM操作优化实战 lifire_H JavaScript性能优化javascript性能优化开发语言
    JavaScript性能优化：DOM操作优化实战一重排与重绘的代价问题场景用户点击按钮后，需要动态生成一个包含10,000个选项的下拉列表，但界面出现长达5秒的冻结。错误代码示例functioncreateList(){constul=document.getElementById("myList");for(leti=0;i{item.addEventListener("click",handl
  • TypeScript基础类型详解：与JavaScript的对比与核心价值 念九_ysl typescriptjavascripttypescript前端
    TypeScript作为JavaScript的超集，最大的特性是引入了静态类型系统。本文将基于TypeScript官网内容，解析其基础类型设计，并与ES/JavaScript进行对比，揭示类型系统的实际价值。一、基础类型全景图1.原生类型的强化JavaScript原生类型：boolean、number、string、undefined、null、symbol、bigintTypeScript完全保
  • vue3修改elementui-plus的默认样式的几种方法 Demons_kirit elementuivue.js前端
    #创作灵感今天写vue的前端项目，因为需要去修改elementui-plus中drawer的默认样式，所以刚好将修改步骤记录下来。一共提供了三种方法，但亲测第二种最好用。使用第二种是可以无视自己的代码中是否定义了该盒子，因为有时候盒子的出现和框架有关，并非你能左右的。1.通过全局CSS覆盖样式直接在你的全局样式文件（如src/style/global.css或src/style/global.sc
  • 鸿蒙全栈开发 D2 GH小杨 harmonyos华为
    课程目标掌握ArkTS基础语法与核心概念理解声明式UI开发范式能独立开发简单鸿蒙应用组件建立规范的代码编写习惯第一部分：初识ArkTS1.1语言全景认知JavaScriptTypeScriptArkTS鸿蒙生态手机平板智能穿戴关键特征解析：类型安全：编译时检查错误（演示类型错误案例）UI即代码：通过代码直接描述界面（对比传统XML布局）一次开发：同一套代码适配不同设备尺寸1.2开发环境初体验Dev
  • 什么是解释型语言？什么又是编译型语言？ Aress" web前端开发学习html前端编译器编程语言
    什么是解释型语言？什么又是编译型语言？前言一、源代码的执行方式二、编译器三、执行原理二者的区别编译型语言解释型语言前言本文章主要知识来自于Python编程基础的“编译型语言和解释型语言的区别”一节，原文来自C语言中文网网上的相关描述已经够多了，本文作为前端学习系列专题的一个知识拓展只是为了宝贝们在该专题进行知识查阅时更为方便示例代码示例代码：我是解释型语言helloworld！例：.html或.h
  • 【脑洞小剧场】零帧起手创业小公司之 第一次项目延期 Foyo Designer 技术职场小剧ui产品经理项目经理程序人生职场和发展改行学it
    点击此处查看脑洞小剧场合集https://blog.csdn.net/foyodesigner/category_12896948.html场景一：项目经理的“背锅之旅”项飙（心里OS：唉，这项目延期得像场噩梦，老板问起来我该怎么办？总不能说是因为产品经理需求改得比翻书还快，后端程序员天天喊着要重写架构，前端和UI设计师又因为设计稿吵得不可开交吧？这锅，看来我得背了。）他深深地吸了一口气，试图平复
  • 统一思想认识 永夜-极光 思想
    1.统一思想认识的基础,才能有的放矢  原因:    总有一种描述事物的方式最贴近本质,最容易让人理解.    如何让教育更轻松,在于找到最适合学生的方式.          难点在于,如何模拟对方的思维基础选择合适的方式.   &
  • Joda Time使用笔记 bylijinnan javajoda time
    Joda Time的介绍可以参考这篇文章： http://www.ibm.com/developerworks/cn/java/j-jodatime.html 工作中也常常用到Joda Time，为了避免每次使用都查API，记录一下常用的用法：     /** * DateTime变化（增减） */ @Tes
  • FileUtils API eksliang FileUtilsFileUtils API
    转载请出自出处：http://eksliang.iteye.com/blog/2217374 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • 各种新兴技术 不懂事的小屁孩 技术
    1:gradle Gradle 是以 Groovy 语言为基础，面向Java应用为主。基于DSL（领域特定语言）语法的自动化构建工具。 现在构建系统常用到maven工具，现在有更容易上手的gradle， 搭建java环境: http://www.ibm.com/developerworks/cn/opensource/os-cn-gradle/ 搭建android环境： http://m
  • tomcat6的https双向认证 酷的飞上天空 tomcat6
    1.生成服务器端证书 keytool -genkey -keyalg RSA -dname "cn=localhost,ou=sango,o=none,l=china,st=beijing,c=cn" -alias server -keypass password -keystore server.jks -storepass password -validity 36
  • 托管虚拟桌面市场势不可挡 蓝儿唯美
    用户还需要冗余的数据中心，dinCloud的高级副总裁兼首席营销官Ali Din指出。该公司转售一个MSP可以让用户登录并管理和提供服务的用于DaaS的云自动化控制台，提供服务或者MSP也可以自己来控制。 在某些情况下，MSP会在dinCloud的云服务上进行服务分层，如监控和补丁管理。 MSP的利润空间将根据其参与的程度而有所不同，Din说。 “我们有一些合作伙伴负责将我们推荐给客户作为个
  • spring学习——xml文件的配置 a-john spring
    在Spring的学习中，对于其xml文件的配置是必不可少的。在Spring的多种装配Bean的方式中，采用XML配置也是最常见的。以下是一个简单的XML配置文件： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.or
  • HDU 4342 History repeat itself 模拟 aijuans 模拟
    来源：http://acm.hdu.edu.cn/showproblem.php?pid=4342 题意：首先让求第几个非平方数，然后求从1到该数之间的每个sqrt(i)的下取整的和。 思路：一个简单的模拟题目，但是由于数据范围大，需要用__int64。我们可以首先把平方数筛选出来，假如让求第n个非平方数的话，看n前面有多少个平方数，假设有x个，则第n个非平方数就是n+x。注意两种特殊情况，即
  • java中最常用jar包的用途 asia007 java
    java中最常用jar包的用途 jar包用途axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现、查找和实现可插入式接口，提供一些一般类实例化、单件的生命周期管理的常用方法.jaxrpc.jarAxis运行所需要的组件包saaj.jar创建到端点的点到点连接的方法、创建并处理SOAP消息和附件的方法，以及接收和处理SOAP错误的方法.  w
  • ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法 百合不是茶 jsjson编码返回异常
    一:ajax获取自定义Struts框架中的json编码  出现以下 问题:       1,强制flush输出  json编码打印在首页 2, 不强制flush js会解析json 打印出来的是错误的jsp页面   却没有跳转到错误页面 3,  ajax中的dataType的json 改为text 会
  • JUnit使用的设计模式 bijian1013 java设计模式JUnit
    JUnit源代码涉及使用了大量设计模式 1、模板方法模式（Template Method）         定义一个操作中的算法骨架，而将一些步骤延伸到子类中去，使得子类可以不改变一个算法的结构，即可重新定义该算法的某些特定步骤。这里需要复用的是算法的结构，也就是步骤，而步骤的实现可以在子类中完成。   
  • Linux常用命令（摘录） sunjing crondchkconfig
    chkconfig --list   查看linux所有服务 chkconfig --add servicename 添加linux服务 netstat -apn | grep 8080  查看端口占用 env 查看所有环境变量 echo $JAVA_HOME 查看JAVA_HOME环境变量   安装编译器 yum install -y gcc
  • 【Hadoop一】Hadoop伪集群环境搭建 bit1129 hadoop
     结合网上多份文档，不断反复的修正hadoop启动和运行过程中出现的问题，终于把Hadoop2.5.2伪分布式安装起来，跑通了wordcount例子。Hadoop的安装复杂性的体现之一是，Hadoop的安装文档非常多，但是能一个文档走下来的少之又少，尤其是Hadoop不同版本的配置差异非常的大。Hadoop2.5.2于前两天发布，但是它的配置跟2.5.0，2.5.1没有分别。 &nb
  • Anychart图表系列五之事件监听 白糖_ chart
    创建图表事件监听非常简单：首先是通过addEventListener('监听类型',js监听方法)添加事件监听，然后在js监听方法中定义具体监听逻辑。 以钻取操作为例，当用户点击图表某一个point的时候弹出point的name和value，代码如下： <script> //创建AnyChart var chart = new AnyChart(); //添加钻取操作&quo
  • Web前端相关段子 braveCS web前端
    Web标准：结构、样式和行为分离   使用语义化标签 0）标签的语义：使用有良好语义的标签，能够很好地实现自我解释，方便搜索引擎理解网页结构，抓取重要内容。去样式后也会根据浏览器的默认样式很好的组织网页内容，具有很好的可读性，从而实现对特殊终端的兼容。 1）div和span是没有语义的：只是分别用作块级元素和行内元素的区域分隔符。当页面内标签无法满足设计需求时，才会适当添加div
  • 编程之美-24点游戏 bylijinnan 编程之美
    import java.util.ArrayList; import java.util.Arrays; import java.util.HashSet; import java.util.List; import java.util.Random; import java.util.Set; public class PointGame { /**编程之美
  • 主页面子页面传值总结 chengxuyuancsdn 总结
    1、showModalDialog returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口时,用于返回窗口的值 主界面 var sonValue=window.showModalDialog("son.jsp"); 子界面 window.retu
  • [网络与经济]互联网+的含义 comsci 互联网+
          互联网+后面是一个人的名字 = 网络控制系统       互联网+你的名字 =  网络个人数据库       每日提示:如果人觉得不舒服,千万不要外出到处走动,就呆在床上,玩玩手游,更不能够去开车,现在交通状况不
  • oracle 创建视图 with check option daizj 视图vieworalce
    我们来看下面的例子： create or replace view testview as select empno,ename from emp where ename like ‘M%’ with check option; 这里我们创建了一个视图，并使用了with check option来限制了视图。 然后我们来看一下视图包含的结果： select * from testv
  • ToastPlugin插件在cordova3.3下使用 dibov Cordova
        自己开发的Todos应用，想实现“ 再按一次返回键退出程序 ”的功能，采用网上的ToastPlugins插件，发现代码或文章基本都是老版本，运行问题比较多。折腾了好久才弄好。下面吧基于cordova3.3下的ToastPlugins相关代码共享。       ToastPlugin.java package&nbs
  • C语言22个系统函数 dcj3sjt126com cfunction
    C语言系统函数一、数学函数下列函数存放在math.h头文件中Double floor(double num) 求出不大于num的最大数。Double fmod(x, y) 求整数x/y的余数。Double frexp(num, exp); double num; int *exp; 将num分为数字部分（尾数）x和 以2位的指数部分n，即num=x*2n，指数n存放在exp指向的变量中，返回x。D
  • 开发一个类的流程 dcj3sjt126com 开发
    本人近日根据自己的开发经验总结了一个类的开发流程。这个流程适用于单独开发的构件，并不适用于对一个项目中的系统对象开发。开发出的类可以存入私人类库，供以后复用。   以下是开发流程： 1. 明确类的功能，抽象出类的大概结构 2. 初步设想类的接口 3. 类名设计（驼峰式命名） 4. 属性设置(权限设置) 判断某些变量是否有必要作为成员属
  • java 并发 shuizhaosi888 java 并发
    能够写出高伸缩性的并发是一门艺术   在JAVA SE5中新增了3个包 java.util.concurrent java.util.concurrent.atomic java.util.concurrent.locks 在java的内存模型中，类的实例字段、静态字段和构成数组的对象元素都会被多个线程所共享，局部变量与方法参数都是线程私有的，不会被共享。
  • Spring Security（11）——匿名认证 234390216 Spring SecurityROLE_ANNOYMOUS匿名
    匿名认证 目录 1.1     配置 1.2     AuthenticationTrustResolver          对于匿名访问的用户，Spring Security支持为其建立一个匿名的AnonymousAuthenticat
  • NODEJS项目实践0.2[ express,ajax通信...] 逐行分析JS源代码 Ajaxnodejsexpress
      一、前言         通过上节学习，我们已经        ubuntu系统搭建了一个可以访问的nodejs系统，并做了nginx转发。本节原要做web端服务 及 mongodb的存取，但写着写着，web端就
  • 在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值 lhbthanks javahtmlstrutscheckbox
    第一种方法：获取结果String类型 在 Action 中获得的是一个 String 型数据，每一个被选中的 checkbox 的 value 被拼接在一起，每个值之间以逗号隔开(,)。 所以在 Action 中定义一个跟 checkbox 的 name 同名的属性来接收这些被选中的 checkbox 的 value 即可。 以下是实现的代码： 前台 HTML 代码：
  • 003.Kafka基本概念 nweiren hadoopkafka
    Kafka基本概念：Topic、Partition、Message、Producer、Broker、Consumer。 Topic：             消息源（Message）的分类。 Partition：             Topic物理上的分组，一
  • Linux环境下安装JDK roadrunners jdklinux
    1、准备工作 创建JDK的安装目录： mkdir -p /usr/java/   下载JDK，找到适合自己系统的JDK版本进行下载： http://www.oracle.com/technetwork/java/javase/downloads/index.html   把JDK安装包下载到/usr/java/目录，然后进行解压： tar -zxvf jre-7
  • Linux忘记root密码的解决思路 tomcat_oracle linux
    1：使用同版本的linux启动系统，chroot到忘记密码的根分区passwd改密码 　　2：grub启动菜单中加入init=/bin/bash进入系统，不过这时挂载的是只读分区。根据系统的分区情况进一步判断. 　　3: grub启动菜单中加入 single以单用户进入系统. 　　4:用以上方法mount到根分区把/etc/passwd中的root密码去除 　　例如: 　　ro
  • 跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现 xueyou jsonpjquery框架UIhtml5
    postMessage 是 HTML5 新方法，它可以实现跨域窗口之间通讯。到目前为止，只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持，而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。postMessage 方法 JSONP 技术不一样，前者是前端擅长跨域文档数据即时通讯，后者擅长针对跨域服务端数据通讯，p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他