小样还想跑
小样还想跑

js 歌词滚动

  1. html
DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>歌词滚动title>

    <style>
      * {
        margin: 0;
        padding: 0;
        user-select: none;
      }
      html {
        height: 100%;
      }

      body {
        color: #009ad6;
        text-align: center;
        height: 100%;
        background-image: url(./assets/dengziqi.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: -400px;
        overflow: hidden;
      }
      .lrc-container {
        height: calc(100vh - 360px);
        overflow: hidden;
        margin-top: 180px;
      }

      ul,
      li {
        padding: 0;
        margin: 0;
        list-style: none;
        transition: 0.6s;
      }

      .play-ico {
        display: block;
        width: 36px;
        height: 36px;
        background-image: url(./assets/mcbg.png);
        background-repeat: no-repeat;
        background-size: 100%;
        position: fixed;
        right: 50px;
        top: 50px;
      }
      audio {
        width: 100%;
        height: 100%;
        opacity: 0;
        display: none;
      }

      .lrc-container ul > li {
        height: 36px;
        line-height: 36px;
        font-size: 18px;
        font-family: '楷体' !important;
        transition: 0.6s;
      }
      .lrc-container ul > li.active {
        color: #fff;
        transform: scale(1.2);
      }

      @-webkit-keyframes rotataZ {
        0% {
          -webkit-transform: rotateZ(0deg);
        }
        100% {
          -webkit-transform: rotateZ(360deg);
        }
      }

      .stop {
        background-position: left bottom;
      }

      .on {
        background-position: 0px 1px;
        animation: rotataZ 1.2s linear infinite;
      }
    style>
  head>
  <body>
    <span class="play-ico">
      <audio src="./assets/taohuanuo.mp3" controls>audio>
    span>

    
    <div class="lrc-container">
      <ul>ul>
    div>
    <script src="./js/data.js">script>
    <script src="./js/lrc.js">script>
  body>
html>
  1. js
/**
 * @desc 歌词滚动的整体实现
 */
(function () {
  'use strict';
  /**
   * @desc 处理歌词数据,字符串转化成对象
   * @param { String }  lrc
   * @returns {Array} 返回值为[object,object,object]
   */
  function parseLrcs(lrc) {
    const result = [];
    const lines = lrc.split('\n');

    for (let i = 0; i < lines.length; i++) {
      const line = lines[i];
      const parseLrc = line.split(']');
      const lrcObj = {};
      lrcObj.time = parseTime(parseLrc[0].substring(1));
      lrcObj.words = parseLrc[1];

      result.push(lrcObj);
    }
    return result;
  }

  /**
   * @desc 创建 li标签 插入到元素中形成列表
   */
  function createElement() {
    let frag = document.createDocumentFragment();
    for (let i = 0, len = parseLrcData.length; i < len; i++) {
      const li = document.createElement('li');
      li.textContent = parseLrcData[i].words;
      frag.appendChild(li);
    }
    doms.ul.appendChild(frag);
  }

  /**
   * @desc 时间字符串转化成数值
   * @param { String }  字符串
   * @returns { Number } 计算过后的Number
   */
  function parseTime(time) {
    const timeArr = time.split(':');
    return +timeArr[0] * 60 + +timeArr[1];
  }

  /**
   * @desc 通过对比找到当前时间所在的区间索引
   * @param { Number } currTime 当前播放的时间
   * @returns { Number } 当前时间对应歌词数据的索引位置
   */
  function findCurrentIndex(currTime) {
    for (let i = 0; i < parseLrcData.length; i++) {
      const element = parseLrcData[i];
      if (currTime < element.time) {
        return i - 1;
      }
    }
    return parseLrcData.length - 1;
  }

  /**
   * @desc 设置偏移量
   */
  function setOffset(index) {
    let offset = index * liHeight + liHeight / 2 - containerHeight / 2;
    let maxOffset = doms.ul.clientHeight - containerHeight;

    if (offset < 0) {
      offset = 0;
    }

    if (offset >= maxOffset) {
      offset = maxOffset;
    }
    doms.ul.style.transform = `translateY(-${offset}px)`;

    let li = doms.ul.querySelector('.active');
    if (li) {
      li.classList.remove('active');
    }
    li = doms.ul.children[index];
    if (li) {
      li.classList.add('active');
    }
  }

  // get need operate domain
  const doms = {
    lrcContainer: document.querySelector('.lrc-container'),
    ul: document.querySelector('.lrc-container ul'),
    audio: document.querySelector('audio'),
    clickBtn: document.querySelector('.play-ico'),
  };

  const parseLrcData = parseLrcs(lrc1); // 处理过后的歌词数据

  createElement(); //create element appended to parent node

  const liHeight = doms.ul.children[0].clientHeight;
  const containerHeight = doms.lrcContainer.clientHeight;
  doms.audio.addEventListener('timeupdate', function (event) {
    const currentTime = event.target.currentTime;
    const currIndex = findCurrentIndex(currentTime);
    setOffset(currIndex);
  });

  doms.clickBtn.addEventListener('click', function () {
    let paused = doms.audio.paused;
    if (paused) {
      doms.audio.play();
      doms.clickBtn.classList.remove('stop');
      doms.clickBtn.classList.add('on');
    } else {
      doms.audio.pause();
      doms.clickBtn.classList.add('stop');
      doms.clickBtn.classList.remove('on');
    }
  });
})();

 
  
     
   
  1. 数据js文件
    2.  
  
 
  
var lrc1 = `[00:00.000] 作词 : 张赢
[00:00.500] 作曲 : 罗锟
[00:01.000] 编曲 : 罗锟/陈雪燃
[00:01.500] 制作人 : 张赢/陈雪燃
[00:02.00]制作人（美国）：Xueran Chen
[00:02.36]制作人（中国）：张赢
[00:02.72]人声录音师：姚海毅
[00:03.05]和音：赵贝尔
[00:03.27]管弦乐团：Hungarian symphonic orchestras
[00:03.56]吉他：Jacob Boyd
[00:03.74]中国笛：Chris Bleth
[00:03.96]大提琴：Ro Rowan
[00:04.17]缩混工程师：NEM Studios
[00:04.46]母带工程师：Randy Merrill
[00:04.75]监制：宋鹏飞
[00:04.97]音乐出品发行公司：听见时代传媒
[00:05.80]
[00:19.71]初见若缱绻 誓言 风吹云舒卷
[00:26.17]
[00:26.98]岁月间 问今夕又何年
[00:32.00]
[00:33.44]心有犀但愿 执念 轮回过经年
[00:39.93]
[00:40.81]弹指间 繁花开落多少遍
[00:45.39]
[00:47.17]这一世牵绊 纠结 触动了心弦
[00:53.49]
[00:54.43]下一世 不知可否再见
[00:59.52]
[01:00.95]留一片桃花 纪念 了却浮生缘
[01:07.47]
[01:08.22]眉目间 还有我的思念
[01:13.01]
[01:15.02]一寸土 一年木 一花一树一贪图
[01:20.86]
[01:21.81]情是种 爱偏开在迷途
[01:27.16]
[01:28.68]忘前路 忘旧物 忘心忘你忘最初
[01:34.79]
[01:35.44]花斑斑 留在爱你的路
[01:41.15]
[01:55.85]这一世牵绊 纠结 触动了心弦
[02:02.19]
[02:02.91]下一世 不知可否再见
[02:08.08]
[02:09.37]留一片桃花 纪念 了却浮生缘
[02:16.02]
[02:16.60]眉目间 还有我的思念
[02:21.71]
[02:23.57]一寸土 一年木 一花一树一贪图
[02:29.52]
[02:30.32]情是种 爱偏开在迷途
[02:35.58]
[02:37.17]忘前路 忘旧物 忘心忘你忘最初
[02:43.30]
[02:43.94]花斑斑 留在爱你的路
[02:48.92]
[02:50.53]虔诚夙愿 来世路
[02:53.59]
[02:54.30]一念桃花因果渡
[02:56.99]
[02:57.65]那一念 几阙时光在重复
[03:03.46]
[03:04.67]听雨书 望天湖 人间寥寥情难诉
[03:11.37]回忆斑斑 留在爱你的路`;


 
  
     
   
  1. mp3文件
    2.  
  
 
  
 
   
tips:如果需要去git自取,网址在下方
 
  
 
  
     
   
  1. 图片文件
    2.  
  
 
  
 
   
tips:如果需要去git自取,网址在下方
 
  
 
  
     
   
  1. 网址
    2.  
  
 
  
 
   
https://gitee.com/handsome19970114/lrc-scroll
 
  
 
  
     
   
  1. 整体代码目录
     js 歌词滚动_第1张图片
    2.  
  
 
  

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

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

        

            

                
    
                    
  • Long类型前后端数据不一致
                        igotyback
前端
                        
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
    
                    
    • 
                    
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    
                    
    • 
                    
  • 【加密社】Solidity 中的事件机制及其应用
                        加密社
闲侃区块链智能合约区块链
                        
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
    
                    
    • 
                    
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
                        二挡起步
web前端期末大作业javascripthtmlcss旅游风景
                        
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
    
                    
    • 
                    
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
                        二挡起步
web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
                        
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
    
                    
    • 
                    
  • webpack图片等资源的处理
                        dmengmeng

                        
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
    
                    
    • 
                    
  • node.js学习
                        小猿L
node.jsnode.js学习vim
                        
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
    
                    
    • 
                    
  • springboot+vue项目实战一-创建SpringBoot简单项目
                        苹果酱0567
面试题汇总与解析springboot后端java中间件开发语言
                        
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
    
                    
    • 
                    
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）
                        跳房子的前端
前端面试javascript开发语言ecmascript
                        
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
    
                    
    • 
                    
  • 博客网站制作教程
                        2401_85194651
javamaven
                        
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
    
                    
    • 
                    
  • JavaScript `Map` 和 `WeakMap`详细解释
                        跳房子的前端
JavaScript原生方法javascript前端开发语言
                        
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
    
                    
    • 
                    
  • 最简单将静态网页挂载到服务器上(不用nginx)
                        全能全知者
服务器nginx运维前端html笔记
                        
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
    
                    
    • 
                    
  • 补充元象二面
                        Redstone Monstrosity
前端面试
                        
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
    
                    
    • 
                    
  • 微信小程序开发注意事项
                        jun778895
微信小程序小程序
                        
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
    
                    
    • 
                    
  • 切换淘宝最新npm镜像源是
                        hai40587
npm前端node.js
                        
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
    
                    
    • 
                    
  • 字节二面
                        Redstone Monstrosity
前端面试
                        
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
    
                    
    • 
                    
  • 前端代码上传文件
                        余生逆风飞翔
前端javascript开发语言
                        
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
    
                    
    • 
                    
  • 《HTML 与 CSS—— 响应式设计》
                        陈在天box
htmlcss前端
                        
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
    
                    
    • 
                    
  • uniapp实现动态标记效果详细步骤【前端开发】
                        2401_85123349
uni-app
                        
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
    
                    
    • 
                    
  • 高性能javascript--算法和流程控制
                        海淀萌狗

                        
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
    
                    
    • 
                    
  • html+css网页设计 旅游网站首页1个页面
                        html+css+js网页设计
htmlcss旅游
                        
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
    
                    
    • 
                    
  • css设置当字数超过限制后以省略号（...）显示
                        周bro
css前端vuecss3html经验分享
                        
    1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
    
                    
    • 
                    
  • 360前端星计划-动画可以这么玩
                        马小蜗

                        
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
    
                    
    • 
                    
  • Vue + Express实现一个表单提交
                        九旬大爷的梦

                        
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
    
                    
    • 
                    
  • css2中的透明
                        琪33

                        
    .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
    
                    
    • 
                    
  • JavaScript中秋快乐！
                        Q_w7742
javascript开发语言ecmascript
                        
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
    
                    
    • 
                    
  • Nginx从入门到实践(三)
                        听你讲故事啊

                        
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
    
                    
    • 
                    
  • Nginx的使用场景：构建高效、可扩展的Web架构
                        张某布响丸辣
nginx前端架构
                        
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
    
                    
    • 
                    
  • 前端知识点
                        ZhangTao_zata
前端javascriptcss
                        
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
    
                    
    • 
                    
  • 第三十一节:Vue路由:前端路由vs后端路由的了解
                        曹老师

                        
    1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
    
                    
    • 
                                
  • apache 安装linux windows
                                    墙头上一根草
apacheinuxwindows
                                    
    linux安装Apache 有两种方式一种是手动安装通过二进制的文件进行安装，另外一种就是通过yum 安装，此中安装方式，需要物理机联网。以下分别介绍两种的安装方式 
  
  
通过二进制文件安装Apache需要的软件有apr,apr-util,pcre 
 1，安装 apr        下载地址：htt
    
                                
    • 
                                
  • fill_parent、wrap_content和match_parent的区别
                                    Cb123456
match_parentfill_parent
                                    
    fill_parent、wrap_content和match_parent的区别: 
  
1）fill_parent 
  设置一个构件的布局为fill_parent将强制性地使构件扩展，以填充布局单元内尽可能多的空间。这跟Windows控件的dockstyle属性大体一致。设置一个顶部布局或控件为fill_parent将强制性让它布满整个屏幕。 
2） wrap_conte
    
                                
    • 
                                
  • 网页自适应设计
                                    天子之骄
htmlcss响应式设计页面自适应
                                    
    网页自适应设计 
       网页对浏览器窗口的自适应支持变得越来越重要了。自适应响应设计更是异常火爆。再加上移动端的崛起，更是如日中天。以前为了适应不同屏幕分布率和浏览器窗口的扩大和缩小，需要设计几套css样式，用js脚本判断窗口大小，选择加载。结构臃肿，加载负担较大。现笔者经过一定时间的学习，有所心得，故分享于此，加强交流，共同进步。同时希望对大家有所
    
                                
    • 
                                
  • [sql server] 分组取最大最小常用sql
                                    一炮送你回车库
SQL Server
                                    
    --分组取最大最小常用sql--测试环境if OBJECT_ID('tb') is not null drop table tb;gocreate table tb( col1 int, col2 int, Fcount int)insert into tbselect 11,20,1 union allselect 11,22,1 union allselect 1
    
                                
    • 
                                
  • ImageIO写图片输出到硬盘
                                    3213213333332132
javaimage
                                    
    package awt; 
 
import java.awt.Color; 
import java.awt.Font; 
import java.awt.Graphics; 
import java.awt.image.BufferedImage; 
import java.io.File; 
import java.io.IOException; 
 
import javax.imagei
    
                                
    • 
                                
  • 自己的String动态数组
                                    宝剑锋梅花香
java动态数组数组
                                    
    数组还是好说，学过一两门编程语言的就知道，需要注意的是数组声明时需要把大小给它定下来，比如声明一个字符串类型的数组：String str[]=new String[10];    但是问题就来了，每次都是大小确定的数组，我需要数组大小不固定随时变化怎么办呢？  动态数组就这样应运而生，龙哥给我们讲的是自己用代码写动态数组，并非用的ArrayList 看看字符
    
                                
    • 
                                
  • pinyin4j工具类
                                    darkranger
.net
                                    
    pinyin4j工具类Java工具类 2010-04-24 00:47:00 阅读69 评论0 字号：大中小 
引入pinyin4j-2.5.0.jar包: 
pinyin4j是一个功能强悍的汉语拼音工具包，主要是从汉语获取各种格式和需求的拼音，功能强悍，下面看看如何使用pinyin4j。 
 
本人以前用AscII编码提取工具，效果不理想，现在用pinyin4j简单实现了一个。功能还不是很完美，
    
                                
    • 
                                
  • StarUML学习笔记----基本概念
                                    aijuans
UML建模
                                    
    介绍StarUML的基本概念，这些都是有效运用StarUML?所需要的。包括对模型、视图、图、项目、单元、方法、框架、模型块及其差异以及UML轮廓。 
        模型、视与图（Model, View and Diagram） 
       &
    
                                
    • 
                                
  • Activiti最终总结
                                    avords
Activiti id 工作流
                                    
    1、流程定义ID：ProcessDefinitionId，当定义一个流程就会产生。 
2、流程实例ID：ProcessInstanceId，当开始一个具体的流程时就会产生，也就是不同的流程实例ID可能有相同的流程定义ID。 
3、TaskId，每一个userTask都会有一个Id这个是存在于流程实例上的。 
4、TaskDefinitionKey和（ActivityImpl activityId 
    
                                
    • 
                                
  • 从省市区多重级联想到的，react和jquery的差别
                                    bee1314
jqueryUIreact
                                    
    在我们的前端项目里经常会用到级联的select，比如省市区这样。通常这种级联大多是动态的。比如先加载了省，点击省加载市，点击市加载区。然后数据通常ajax返回。如果没有数据则说明到了叶子节点。       针对这种场景，如果我们使用jquery来实现，要考虑很多的问题，数据部分，以及大量的dom操作。比如这个页面上显示了某个区，这时候我切换省，要把市重新初始化数据，然后区域的部分要从页面
    
                                
    • 
                                
  • Eclipse快捷键大全
                                    bijian1013
javaeclipse快捷键
                                    
    Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当前行和下面一行交互位置(特别实用,可以省去先剪切,再粘贴了)Alt+↑ 当前行和上面一行交互位置(同上)Alt+← 前一个编辑的页面Alt+→ 下一个编辑的页面(当然是针对上面那条来说了)Alt+En
    
                                
    • 
                                
  • js 笔记 函数
                                    征客丶
JavaScript
                                    
    一、函数的使用 
1.1、定义函数变量 
var vName = funcation(params){ 
} 
 
1.2、函数的调用 
函数变量的调用：      vName(params); 
函数定义时自发调用：(function(params){})(params); 
 
1.3、函数中变量赋值 
var a = 'a'; 
var ff
    
                                
    • 
                                
  • 【Scala四】分析Spark源代码总结的Scala语法二
                                    bit1129
scala
                                    
    1. Some操作 
  
在下面的代码中，使用了Some操作：if (self.partitioner == Some(partitioner))，那么Some(partitioner)表示什么含义？首先partitioner是方法combineByKey传入的变量， 
Some的文档说明： 
  
/** Class `Some[A]` represents existin
    
                                
    • 
                                
  • java 匿名内部类
                                    BlueSkator
java匿名内部类
                                    
    组合优先于继承 
Java的匿名类，就是提供了一个快捷方便的手段，令继承关系可以方便地变成组合关系 
继承只有一个时候才能用，当你要求子类的实例可以替代父类实例的位置时才可以用继承。 
  
在Java中内部类主要分为成员内部类、局部内部类、匿名内部类、静态内部类。 
内部类不是很好理解，但说白了其实也就是一个类中还包含着另外一个类如同一个人是由大脑、肢体、器官等身体结果组成，而内部类相
    
                                
    • 
                                
  • 盗版win装在MAC有害发热，苹果的东西不值得买，win应该不用
                                    ljy325
游戏applewindowsXPOS
                                    
    Mac mini 型号: MC270CH-A RMB:5,688 
  
Apple 对windows的产品支持不好,有以下问题: 
  
1.装完了xp,发现机身很热虽然没有运行任何程序！貌似显卡跑游戏发热一样，按照那样的发热量,那部机子损耗很大,使用寿命受到严重的影响! 
  
2.反观安装了Mac os的展示机，发热量很小，运行了1天温度也没有那么高 
&nbs
    
                                
    • 
                                
  • 读《研磨设计模式》-代码笔记-生成器模式-Builder
                                    bylijinnan
java设计模式
                                    
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ 
 
 



/**
 * 生成器模式的意图在于将一个复杂的构建与其表示相分离，使得同样的构建过程可以创建不同的表示（GoF）
 * 个人理解：
 * 构建一个复杂的对象，对于创建者（Builder）来说，一是要有数据来源(rawData)，二是要返回构
    
                                
    • 
                                
  • JIRA与SVN插件安装
                                    chenyu19891124
SVNjira
                                    
    JIRA安装好后提交代码并要显示在JIRA上，这得需要用SVN的插件才能看见开发人员提交的代码。 
1.下载svn与jira插件安装包，解压后在安装包(atlassian-jira-subversion-plugin-0.10.1) 
2.解压出来的包里下的lib文件夹下的jar拷贝到(C:\Program Files\Atlassian\JIRA 4.3.4\atlassian-jira\WEB
    
                                
    • 
                                
  • 常用数学思想方法
                                    comsci
工作
                                    
      对于搞工程和技术的朋友来讲，在工作中常常遇到一些实际问题，而采用常规的思维方式无法很好的解决这些问题，那么这个时候我们就需要用数学语言和数学工具，而使用数学工具的前提却是用数学思想的方法来描述问题。。下面转帖几种常用的数学思想方法，仅供学习和参考 
 
 
 
  函数思想 
　　把某一数学问题用函数表示出来，并且利用函数探究这个问题的一般规律。这是最基本、最常用的数学方法
    
                                
    • 
                                
  • pl/sql集合类型
                                    daizj
oracle集合typepl/sql
                                    
    --集合类型 
/* 
  单行单列的数据，使用标量变量 
  单行多列数据，使用记录 
  单列多行数据，使用集合（。。。） 
  *集合：类似于数组也就是。pl/sql集合类型包括索引表（pl/sql table）、嵌套表（Nested Table）、变长数组（VARRAY）等 
*/ 
/* 
    --集合方法 
&n
    
                                
    • 
                                
  • [Ofbiz]ofbiz初用
                                    dinguangx
电商ofbiz
                                    
    从github下载最新的ofbiz（截止2015-7-13），从源码进行ofbiz的试用 
1. 加载测试库 
ofbiz内置derby，通过下面的命令初始化测试库 
./ant load-demo (与load-seed有一些区别) 
  
2. 启动内置tomcat 
./ant start 
或 
./startofbiz.sh 
或 
java -jar ofbiz.jar 
&
    
                                
    • 
                                
  • 结构体中最后一个元素是长度为0的数组
                                    dcj3sjt126com
cgcc
                                    
    在Linux源代码中，有很多的结构体最后都定义了一个元素个数为0个的数组，如/usr/include/linux/if_pppox.h中有这样一个结构体： struct pppoe_tag {     __u16 tag_type;     __u16 tag_len;   &n
    
                                
    • 
                                
  • Linux cp 实现强行覆盖
                                    dcj3sjt126com
linux
                                    
    发现在Fedora 10 /ubutun 里面用cp -fr src dest，即使加了-f也是不能强行覆盖的，这时怎么回事的呢？一两个文件还好说，就输几个yes吧，但是要是n多文件怎么办，那还不输死人呢？下面提供三种解决办法。 方法一 
 
 我们输入alias命令，看看系统给cp起了一个什么别名。 
  
  [root@localhost ~]# aliasalias cp=’cp -i’a
    
                                
    • 
                                
  • Memcached(一)、HelloWorld
                                    frank1234
memcached
                                    
    一、简介 
高性能的架构离不开缓存，分布式缓存中的佼佼者当属memcached，它通过客户端将不同的key hash到不同的memcached服务器中，而获取的时候也到相同的服务器中获取，由于不需要做集群同步，也就省去了集群间同步的开销和延迟，所以它相对于ehcache等缓存来说能更好的支持分布式应用，具有更强的横向伸缩能力。 
二、客户端 
选择一个memcached客户端，我这里用的是memc
    
                                
    • 
                                
  • Search in Rotated Sorted Array II
                                    hcx2013
search
                                    
    Follow up for "Search in Rotated Sorted Array":What if duplicates are allowed? 
Would this affect the run-time complexity? How and why? 
Write a function to determine if a given ta
    
                                
    • 
                                
  • Spring4新特性——更好的Java泛型操作API
                                    jinnianshilongnian
spring4generic type
                                    
    Spring4新特性——泛型限定式依赖注入 
Spring4新特性——核心容器的其他改进 
Spring4新特性——Web开发的增强 
Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  
Spring4新特性——Groovy Bean定义DSL 
Spring4新特性——更好的Java泛型操作API  
Spring4新
    
                                
    • 
                                
  • CentOS安装JDK
                                    liuxingguome
centos
                                    
    1、行卸载原来的： 
[root@localhost opt]# rpm -qa | grep java 
tzdata-java-2014g-1.el6.noarch 
java-1.7.0-openjdk-1.7.0.65-2.5.1.2.el6_5.x86_64 
java-1.6.0-openjdk-1.6.0.0-11.1.13.4.el6.x86_64 
[root@localhost
    
                                
    • 
                                
  • 二分搜索专题2-在有序二维数组中搜索一个元素
                                    OpenMind
二维数组算法二分搜索
                                    
    1,设二维数组p的每行每列都按照下标递增的顺序递增。 
用数学语言描述如下：p满足 
(1),对任意的x1，x2，y，如果x1<x2,则p(x1,y)<p(x2,y); 
(2),对任意的x，y1,y2, 如果y1<y2,则p(x,y1)<p(x,y2); 
2,问题： 
给定满足1的数组p和一个整数k，求是否存在x0,y0使得p(x0,y0)=k? 
3,算法分析： 
(
    
                                
    • 
                                
  • java 随机数 Math与Random
                                    SaraWon
javaMathRandom
                                    
    今天需要在程序中产生随机数，知道有两种方法可以使用，但是使用Math和Random的区别还不是特别清楚，看到一篇文章是关于的，觉得写的还挺不错的，原文地址是 
http://www.oschina.net/question/157182_45274?sort=default&p=1#answers 
 
产生1到10之间的随机数的两种实现方式： 
 

//Math
Math.roun
    
                                
    • 
                                
  • oracle创建表空间
                                    tugn
oracle
                                    
    create temporary tablespace TXSJ_TEMP   
tempfile 'E:\Oracle\oradata\TXSJ_TEMP.dbf'   
size 32m   
autoextend on   
next 32m maxsize 2048m   
extent m
    
                                
    • 
                                
  • 使用Java8实现自己的个性化搜索引擎
                                    yangshangchuan
javasuperword搜索引擎java8全文检索
                                    
    需要对249本软件著作实现句子级别全文检索，这些著作均为PDF文件，不使用现有的框架如lucene，自己实现的方法如下： 
1、从PDF文件中提取文本，这里的重点是如何最大可能地还原文本。提取之后的文本，一个句子一行保存为文本文件。 
2、将所有文本文件合并为一个单一的文本文件，这样，每一个句子就有一个唯一行号。 
3、对每一行文本进行分词，建立倒排表，倒排表的格式为：词=包含该词的总行数N=行号
    
                                
    •