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

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)

  • 暗链威胁与检测方法之Screaming Frog SEO Spider qq_39541626 黑帽研究windows
    尖叫青蛙，网站暗链检测方法网站暗链是指那些隐藏在网页上，对普通用户不可见或难以察觉的超链接。这些链接可能被故意设置为与背景颜色相同、使用极小的字体、或通过CSS技巧使其隐藏，从而在视觉上对用户隐藏。暗链通常用于不良的SEO实践，如操纵搜索引擎排名，或链接到恶意网站。这种做法可能导致网站在搜索引擎中被降级或罚款，损害网站的可信度和用户体验为了解决网站暗链，一次性筛选所有暗链买了一个软件Screami
  • 2.2[frontEnd]ESLint CQU_JIAKE 前端java
    ESLint是一个开源的JavaScript和TypeScript代码质量和代码风格检查工具。它可以帮助开发者检测代码中的问题（如语法错误、潜在的错误、不一致的代码风格等），从而提高代码质量和可维护性。主要功能检测语法错误：ESLint可以检测代码中的语法错误，例如未关闭的括号、缺少分号等。代码风格检查：ESLint可以强制代码风格的一致性，例如：缩进风格（2空格或4空格）。引号类型（单引号或双引
  • 前端性能优化之SSR优化 xiangzhihong8 前端前端
    我们常说的SSR是指Server-SideRendering，即服务端渲染，属于首屏直出渲染的一种方案。SSR也是前端性能优化中最常用的技术方案了，能有效地缩短页面的可见时间，给用户带来很好的体验。SSR渲染方案一般来说，我们页面加载会分为好几个步骤：请求域名，服务器返回HTML资源。浏览器加载HTML片段，识别到有CSS/JavaScript资源时，获取资源并加载。现在大多数前端页面都是单页面应
  • 使用CSS3实现炫酷的3D翻转卡片效果 木木黄木木 css33d前端
    使用CSS3实现炫酷的3D翻转卡片效果这里写目录标题使用CSS3实现炫酷的3D翻转卡片效果项目介绍技术要点分析1.3D空间设置2.核心CSS属性3.布局和定位实现难点和解决方案1.3D效果的流畅性2.卡片内容布局3.响应式设计性能优化建议浏览器兼容性总结项目介绍在这个项目中，我们使用纯CSS3技术实现了一个具有3D翻转效果的交互卡片。当用户将鼠标悬停在卡片上时，卡片会沿Y轴优雅地旋转180度，展示
  • 基础篇：ArkTS基础语法介绍 言程序plus 鸿蒙Next开发javascriptarkts鸿蒙
    前言：目前流行的编程语言TypeScript是在JavaScript基础上通过添加类型定义扩展而来的，而ArkTS则是TypeScript的进一步扩展。TypeScript深受开发者的喜爱，因为它提供了一种更结构化的JavaScript编码方法。ArkTS旨在保持TypeScript的大部分语法，为现有的TypeScript开发者实现无缝过渡，让移动开发者快速上手ArkTS。ArkTS比typeS
  • 前端面经分享（25/03/18） CreatorRay react面试前端前端面试react
    北京一家做边缘云服务提供商公司，技术一面，15k-20k，要求3-5年上家公司的项目为什么会选择MQTT进行通信React常用Hook为什么React不能在条件语句里用Hook前端常见的优化策略React如何捕获子组件的错误React给节点加key会有什么效果最近俩家公司都用WebSocket做了什么HTTP各个版本的区别跨域的常见解决方案前端常见布局WebSocket和SSE的区别A页面滚动到一
  • 智慧物流数字管理系统设计案例分析 UI设计开发服务商 数据分析数据挖掘
    你好，宝子们！艾斯视觉团队在此，我们专注于UI设计和前端开发领域10年有余。非常高兴能与您分享我们的经验和见解。如果您觉得有所帮助，请给予我们支持和关注，并随时私信我们，共同探讨进步！谢谢您的鼓励！随着科技的飞速发展，数字化已经成为现代物流业的重要发展趋势。智慧物流数字管理系统旨在通过先进的技术手段，实现物流信息的实时共享、智能分析和优化决策，从而提高物流效率、降低成本并提升客户满意度。本文将以一
  • 前端面经真题解析10-字节/抖音电商/前端/超详细记录 浪里个浪zxf 前端面试前端
    文章目录1.自我介绍2.介绍下自己的项目3.看你项目里面用了axios,说下请求拦截和响应拦截怎么做？4.说下项目里面前后端交互过程及设计？5.怎么处理切换分页请求数据的，优化手段？6.说下你爬取别人网站数据的时候，别人如果设置了拦截，你的解决方案是？7.你说下http请求的refer字段？**Origin字段：****Referer字段：****Host字段****区别：**8.看你做了路由懒加
  • 【网易雷火秋招】前端面经分享 编程自学-领绿学长 前端求职招聘面试
    网易网易雷火是国内一流且最有创新力的游戏研发团队，是网易杭州的第一个游戏工作室。雷火开创性的打造了《逆水寒》、《永劫无间》、《倩女幽魂》、《全明星街球派对》等一众爆款游戏；并在二次元、FPS、主机游戏等方向上持续探索，《代号：无限大》等在研项目收到玩家广泛关注。与此同时，我们与全球合作伙伴一起共同构建开放、协同、共荣共生的产业生态，致力于让中国游戏走出去，让世界听见雷火声音。雷火还拥有国内专业从事
  • 【万字总结】前端全方位性能优化指南（四）——虚拟DOM批处理、文档碎片池、重排规避 庸俗今天不摸鱼 Web性能优化合集前端性能优化
    前言在浏览器宇宙中，DOM操作如同「时空裂缝」——一次不当的节点更新可能引发连锁重排，吞噬整条渲染流水线的性能。本章直面这一核心矛盾，以原子级操作合并、节点记忆重组、排版禁忌破解为三重武器，重构DOM更新的物理法则。通过虚拟DOM的批处理引擎将千次操作坍缩为单次提交，借助文档碎片池实现90%节点的跨时空复用，再以transform替代top等20项反重排铁律，我们将彻底终结「JavaScript线
  • 前端面经分享（25/03/19） CreatorRay 前端面试前端面试
    北京一家做协同办公软件出海的公司，技术一面，20k-40k，要求3-5年详细聊了一下上家公司的项目上家公司的项目是不做了吗，离职原因是什么，你觉得公司的这个产品怎么样在做AI类的业务时，作为前端感觉跟常规业务有什么区别详细聊了一下上上家公司的项目细节讲一下项目里用编辑器做了什么事遇到过什么难解决的问题项目里提供的UI自动化的功能是怎么做的聊了一下写博客的事情有没有了解过浏览器底层的东西最近在研究或
  • 实现高德地图自定义点标记跳动，点标记随缩放大小显示和隐藏 时光请留微笑 javascript前端vue.js
    高德地图的自定义标记（Marker）添加一个循环动画效果，比如让图标上下跳动，你可以利用CSS动画或JavaScript动画库（如GSAP）。使用GSAP来创建动画，下面我将展示两种GSAP和CSS类来为Marker的内容添加循环动画。方法一：通过CSS动画实现图标上下跳动首先自定义点标记，在点标记显示内容content中自定义一个图标，这里我用的是element中的图标，给标签一个类名，如i-i
  • vite中使用Web Worker 脚本
    MDN对WebWorker的说明WebWorker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，它们可以使用XMLHttpRequest（尽管responseXML和channel属性总是为空）或fetch（没有这些限制）执行I/O。一旦创建，一个worker可以将消息发送到创建它的JavaScript代码，通过将消息发布到该代码指定的事件处理器（反
  • 【VSCode】VSCode常用插件 Ctrl Z. vscodeide编辑器
    Chinese(Simplified)(简体中文)LanguagePackforVisualStudioCode：简体中文支持插件HTML/CSS/JavaScriptSnippets：支持HTML/CSS/JavaScript快速匹配输入HTMLSnippets：这个插件提供了一系列HTML代码片段，通过简单的缩写就可以快速生成常用的HTML结构。例如，输入!并按下Tab键，就可以快速生成一个完
  • LangChain入门：使用Python和通义千问打造免费的Qwen大模型聊天机器人 南七小僧 人工智能网站开发AI技术产品经理服务器数据库windows
    前言LangChain是一个用于开发由大型语言模型（LargeLanguageModels，简称LLMs）驱动的应用程序的框架。它提供了一个灵活的框架，使得开发者可以构建具有上下文感知能力和推理能力的应用程序，这些应用程序可以利用公司的数据和APIs。这个框架由几个部分组成。LangChain库：Python和JavaScript库。包含了各种组件的接口和集成，一个基本的运行时，用于将这些组件组合
  • 浏览器开发者工具深度调试指南：从入门到高阶技巧 109702008 编程网络人工智能网络
    浏览器开发者工具（DevTools）是现代前端工程师的"瑞士军刀"，本文将系统解析其核心功能与实战技巧，助您掌握高效调试的终极奥义。一、基础操作与核心功能1.1工具启动方式快捷键：F12（Win/Linux）|Cmd+Opt+I（Mac）右键菜单：网页任意位置右键→检查（Inspect）移动端调试：启用设备模式（Ctrl+Shift+M）1.2核心面板全景图面板名称核心功能快捷键切换Element
  • 探索 LangChain、Hugging Face、LM Studio 等 AI 应用工具 Alex程 langchain人工智能
    目录1.LangChainv0.2简介安装概念指南简单试用(1)模型选择(2)基础操作(3)更多操作Runnable调用链的连接Runnable并行自定义函数RunnableLambda额外assign参数(4)langchain.js2.HuggingFace简介如何调用API3.LMStudio简介LMStudio服务器JavaScript/TypeScriptSDK4.Dify.AI简介安装
  • 《React开发实践：掌握Redux与Hooks应用》——开启你的前端进阶之旅 JJCTO袁龙 前端react.js前端框架
    文章标题《React开发实践：掌握Redux与Hooks应用》——开启你的前端进阶之旅在前端开发的浪潮中，React.js已经成为开发者们不可或缺的利器。它以其高效、灵活的特性，成为构建现代Web应用的首选框架之一。然而，随着项目复杂度的增加，如何更好地管理状态、优化性能、提升代码可维护性，成为每个开发者必须面对的挑战。幸运的是，我最近出版的《React开发实践：掌握Redux与Hooks应用》这
  • Webpack常见面试题总结 xiangzhihong8 ReactNative前端webpack前端javascript
    一、谈谈你对Webpack的理解1.1背景Webpack的目标是实现前端项目的模块化，从而更高效地管理和维护项目中的每一个资源。在早期的前端项目中，我们通过文件划分的形式来实现模块化，也就是将每个功能及其相关状态数据各自单独放到不同的JS文件中。约定每个文件是一个独立的模块，然后再将这些js文件引入到页面，一个script标签对应一个模块，然后再调用模块化的成员。比如：但这种模块化开发的弊端也十分
  • 最完整的webpack Dll打包与采坑总结 仰望星空的代码 Vue.js踩坑记vue.jswebpackdll打包打包优化
    webpack已经成为前端主流的项目打包工具，对于前端开发必不可少。在前端项目依赖第三方库过多，项目比较大文件比较多时，webpack打包的速度也会被拖成蜗牛，是时候优化一下webapck的打包速度了。在优化打包速度方面有不少方法方式，其中一个比较重要的方式是DllPlugin。DllPlugin把第三方库打包成动态链接库（动态链接库：windows系统中库文件概念，这里是借用了这一概念。），Dl
  • Java WebSocket与项目页面（通常是HTML + JavaScript）之间建立连接并传输数据 hh_fine javawebsockethtml
    JavaWebSocket与项目页面（通常是HTML+JavaScript）之间建立连接并传输数据1.创建JavaWebSocket服务器：使用JavaWebSocketAPI创建一个WebSocket服务器端点。2.在HTML页面中使用JavaScript连接WebSocket：通过JavaScript的WebSocketAPI与JavaWebSocket服务器建立连接。3.双向数据传输：实现服
  • Ts学习笔记 初学者7. 学习笔记typescript
    一、Ts与Js区别TsJsJavaScript的超集，用于解决大型项目的代码复杂性一种脚本语言，用于创建动态网页。强类型，支持静态和动态类型动态弱类型语言可以在编译期间发现并纠正错误只能在运行时发现错误不允许改变变量的数据类型变量可以被赋予不同类型的值二、Ts基础类型：boolean,number,string,undefined,null,any,unknown,void，neverany,un
  • Lodash源码分析-every,some,size,includes 初学者7. Loadsh源码分析javascript前端
    collection相关的函数，collection指的是一组用于处理集合（如数组或对象）的工具函数。lodash源码研读之every,some,size,includes一、源码地址GitHub地址:GitHub-lodash/lodash:AmodernJavaScriptutilitylibrarydeliveringmodularity,performance,&extras.官方文档地址
  • Lodash源码分析-uniq,uniqBy,uniqWith 初学者7. Loadsh源码分析javascript前端
    lodash源码研读之uniq,uniqBy,uniqWith一、源码地址GitHub地址:GitHub-lodash/lodash:AmodernJavaScriptutilitylibrarydeliveringmodularity,performance,&extras.官方文档地址:Lodash官方文档二、结构分析uniq,uniqBy,uniqWith基于baseUniq模块。三、函数介
  • 前端开发：Webpack的使用总结 三掌柜666 web前端知识汇总webpack前端javascript
    前言在前端开发过程中，尤其是现在前端框架的频繁使用的当下，作为前端开发者想必对于Webpack并不陌生，尤其是在使用Vue框架做前端开发的时候，打包时候必用Webpack。还有就是在前端求职面试的时候，Webpack相关的知识点也是面试官必定考察的，那么本篇博文就来分享一下关于Webpack使用相关的知识点，记录下来，方便后期查阅使用。Webpack概念Webpack其实是一个前端资源加载/打包工
  • 【css酷炫效果】纯CSS实现球形阴影效果 冰夏之夜影 css前端
    【css酷炫效果】纯CSS实现球形阴影效果缘创作背景html结构css样式完整代码基础版进阶版(动态版)效果图想直接拿走的老板，链接放在这里：上传后更新缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码，令人丧气的是：活动的领域有要求，不是发够就行，瞬间意志消沉。html结构css样式.button{background-image:url('a.gif');border-
  • UNI-APP+VUE3+VITE+VSCode开发经验及填坑记录（持续更新ING） 集成显卡 前端项目实践uni-appvscodeide
    uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。快速开发模板unibest：最好的uniapp开发框架，由uniapp+Vue3+Ts+Vite5+UnoCss+VSCode(可选webstorm)+uni插件+wot-ui（
  • 【Spring AI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲：核心交互函数及RAG知识库构建 un_fired spring人工智能java
    系列文章目录【SpringAI】基于专属知识库的RAG智能问答小程序开发——完整项目（含完整前端+后端代码）【SpringAI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲：核心ChatClient对象相关构造函数【SpringAI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲：核心交互函数及RAG知识库构建文章目录系列文章目录前言1.Service层知识库构建与检索函数详
  • 个人AI助手的未来：Yi AI开源系统助力快速搭建 耶耶Norsea 网络杂烩人工智能开源
    摘要YiAI推出了一站式个人AI助手平台解决方案，助力用户快速搭建专属AI助手。该平台采用全套开源系统，涵盖前端应用、后台管理及小程序功能，并基于MIT协议开放使用。同时，平台集成了本地RAG方案，利用Milvus与Weaviate向量数据库支持本地部署，为用户提供高效、灵活的数据处理能力。关键词个人AI助手,快速搭建,开源系统,本地RAG,向量数据库一、YiAI开源系统概述1.1个人AI助手的发
  • CSS3背景与渐变 天涯学馆 大前端&移动端全栈架构css3前端css
    背景与渐变background-sizebackground-size属性用于设置背景图像的尺寸。您可以指定绝对或相对单位，或者使用关键词来控制背景图像在元素背景区域中的大小。.element{background-size:[length|percentage|cover|contain]|[length|percentage][length|percentage]|auto|inherit;}
  • 统一思想认识 永夜-极光 思想
    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其他