diakuicu0780
diakuicu0780

HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）

用HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）

效果如下：（鼠标点击按钮可以实现播放或暂停，按钮会旋转，实现了歌词同步，功能还需改进）

 HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）_第1张图片

代码如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="音乐播放器播放两首歌">
    <meta name="description" content="手机大小的简单的音乐播放器播放两首歌">
    <title>PC版手机音乐播放器开发title>
    <style type="text/css">
        *{margin:0px;padding:0px;}
        body{background:#000000;}
        #phone{
            position:relative;
            width:322px;
            height:640px;
            margin:20px auto;
            /* background:#990033; */
        }
        .top{
            width:322px;
            height:42px;
            background:url("images/phone_top.png");
        }
        .info{
            width:322px;
            height:20px;
            background:url("images/top.jpg");
        }
        h2.song_title{
            width:320px;
            height:40px;
            background:#000000;
            color:#ffffff;
            text-align:center;
            line-height:40px;
            border-right:1px solid #ffffff;
            border-left:1px solid #ffffff;
        }
        .song_lrc{
            width:320px;
            height:490px;
            background:url("images/0.jpg") no-repeat;
            background-size:cover;
            border-right:1px solid #ffffff;
            border-left:1px solid #ffffff;
            overflow:hidden;
        }
        .song_lrc p{
            height:20px;
            line-height:20px;
            font-size:14px;
            font-weight:bold;
            text-align:center;
            color:#625959;
        }
        .footer{
            width:322px;
            height:47px;
            background:url("images/phone_bottom.png");
        }
        #btn{
            position:absolute;
            left:140px;
            bottom:50px;
            width:50px;
            height:50px;
            background:url("images/normalmusic.svg");
            background-size:100% 100%;
        }
        .rotate{
            animation:rot 5s linear infinite;
            /*CSS3自定义动画：名称 时间 匀速运动 无限重复*/
        }
        @keyframes rot{/*CSS3变换：旋转*/
            from{transform:rotate(0deg);}
            to{transform:rotate(360deg);}
        }
        #content{
            position:relative;
            top:0;
        }
    style>
    
head>
<body>
    <div id="phone">
        <div class="top">div>
        <div class="info">div>
        <h2 class="song_title">刚好遇见你h2>
        <div class="song_lrc">
            <div id="content">div>
        div>
        <div class="footer">div>
        <div id="btn" class="">div>
    div>
    
    <audio src="music/李玉刚-刚好遇见你.mp3" id="myMusic">audio>
    <textarea id="text" style="display:none">
        [00:00.95]刚好遇见你 - 李玉刚
        [00:02.74]作词：高进
        [00:03.70]作曲：高进
        [00:04.75]编曲：关天天
        [00:12.56]我们哭了
        [00:15.27]我们笑着
        [00:18.60]我们抬头望天空
        [00:21.43]星星还亮着几颗
        [00:24.63]我们唱着
        [00:27.56]时间的歌
        [00:30.62]才懂得相互拥抱
        [00:34.00]到底是为了什么
        [00:36.94]因为我刚好遇见你
        [00:40.32]留下足迹才美丽
        [00:43.69]风吹花落泪如雨
        [00:46.48]因为不想分离
        [00:49.57]因为刚好遇见你
        [00:52.59]留下十年的期许
        [00:55.69]如果再相遇
        [00:59.15]我想我会记得你
        [01:14.28]我们哭了
        [01:16.88]我们笑着
        [01:20.29]我们抬头望天空
        [01:22.96]星星还亮着几颗
        [01:26.11]我们唱着
        [01:29.11]时间的歌
        [01:32.56]才懂得相互拥抱
        [01:35.36]到底是为了什么
        [01:38.47]因为我刚好遇见你
        [01:41.84]留下足迹才美丽
        [01:44.83]风吹花落泪如雨
        [01:47.97]因为不想分离
        [01:51.02]因为刚好遇见你
        [01:54.09]留下十年的期许
        [01:57.23]如果再相遇
        [02:00.69]我想我会记得你
        [02:03.69]因为刚好遇见你
        [02:06.43]留下足迹才美丽
        [02:09.57]风吹花落泪如雨
        [02:12.64]因为不想分离
        [02:15.76]因为刚好遇见你
        [02:18.78]留下十年的期许
        [02:21.83]如果再相遇
        [02:24.98]我想我会记得你
        [02:31.07]因为我刚好遇见你
        [02:34.13]留下足迹才美丽
        [02:37.25]风吹花落泪如雨
        [02:40.37]因为不想分离
        [02:43.43]因为刚好遇见你
        [02:46.48]留下十年的期许
        [02:49.58]如果再相遇
        [02:52.67]我想我会记得你
    textarea>


    <script type="text/javascript">
        var myMusic=document.getElementById("myMusic");
        var btn=document.getElementById("btn");
        var txt=document.getElementById("text");
        var con=document.getElementById("content");

        var onOff=true;//开关记录播放状态
        btn.onclick=function(){
            if(onOff==true){
                myMusic.play();
                this.className="rotate";
            }else{
                myMusic.pause();
                this.className="";
            }
            onOff=!onOff;
        }

        
        var html='';//定义一个空变量来存储歌词的词部分
        //console.log(txt.value);//获取歌词部分，包括[时间]+词
        var lrc=txt.value.split("[");//获取歌词并从[切割开    //console.log(lrc);//测试lrc是什么

        //循环遍历到每句歌词
        for(var i=0;i<lrc.length;i++){//console.log(lrc[i]);//测试lrc数组每个元素
            var arr=lrc[i].split("]");//从]切割，这样时间和词就切割开来了
            //console.log(arr[1]);//arr[0]是时间，arr[1]是词，时间形如分秒毫秒00:36.94
            
            var t=arr[0].split(".");//将分秒和毫秒分割开
            var ti=t[0].split(":");
            var time=ti[0]*60+ti[1]*1;//获取歌词时间，注意，如果没有*1，将会是字符串拼接

            if(arr[1]){//如果词不为空或undefined(分割之后可能会有空格或undefined)
                html+="
"+time+">"+arr[1]+"
";
            }
        }
        con.innerHTML=html;

        var allP=document.getElementsByTagName("p");//获取所有的p标签，这样再播完某句歌词的时候该歌词可以恢复原来的样式
        var num=0;//记录歌词移动的次数，因为歌词要往上移动，那么就要不断重新设置所对应容器的top值
        //console.log(parseInt(this.currentTime));//当前播放时间

        //歌词同步
        myMusic.addEventListener("timeupdate",function(){
            var currTime=parseInt(this.currentTime);

            //让当前播放的歌词变色、增大
            if(document.getElementById(currTime)){//先把所有的p标签内容改为原来的颜色
                for(var i=0;i<allP.length;i++){
                    allP[i].style.color="#625959";
                    allP[i].style.fontSize="14px";
                }
                document.getElementById(currTime).style.color="#ff0000";
                document.getElementById(currTime).style.fontSize="18px";

                if(allP[9+num].id==currTime){//唱到第9行之后，每唱完一句歌词往上移一个行高即top减20px
                    con.style.top=-num*20+"px";
                    num++;
                }
            }
        });

        //监听歌曲是否播完
        myMusic.addEventListener("ended",function(){
            btn.className="";
            onOff=true;//把开关更改为初始状态
            con.style.top=0;//把歌词变回初始位置
            num=0;//把歌词同步相关的num值改为初始状态
            this.currentTime=0;//把当前歌曲的进度改为初始状态
        })
    script>
body>
html>

 

还有bug，待更新......

转载于:https://www.cnblogs.com/dorra/p/7532833.html

你可能感兴趣的:(HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）)

  • HarmonyOS NEXT开发实战：短信服务 我很英俊 小名男男 OpenHarmonyHarmonyOS鸿蒙开发harmonyos华为前端开发语言鸿蒙移动开发鸿蒙系统
    鸿蒙开发实战往期文章必看：HarmonyOSNEXT应用开发性能实践总结一分钟了解”纯血版！鸿蒙HarmonyOSNext应用开发！“非常详细的”鸿蒙Har
  • Java Stream 去重的多种方法 坎布里奇 javajavapython开发语言
    在JavaStream中实现去重有多种方法，具体取决于需求和场景。以下是常见的几种方法及示例：1.使用distinct()方法适用于对象已正确实现equals()和hashCode()，基于对象整体去重并保留顺序：ListuniquePersons=persons.stream().distinct().collect(Collectors.toList());2.根据对象的属性去重方法一：使用C
  • HarmonyOS NEXT开发笔记：@Computed装饰器计算属性 我很英俊 小名男男 OpenHarmony鸿蒙开发HarmonyOSharmonyos华为开发语言前端鸿蒙移动开发鸿蒙系统
    鸿蒙开发往期必看：一分钟了解”纯血版！鸿蒙HarmonyOSNext应用开发！“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线！（从零基础入门到精通）
  • java数组 TwitCoder java算法
    目录一、数组概念二、数组的声明与初始化三、数组操作示例四、数组属性与注意事项五、内存结构分析六、常见操作七、二维数组八、稀疏数组一、数组概念数组是Java中用于存储相同类型数据的有序集合，具有以下特性：类型一致性：所有元素必须属于同一数据类型有序性：元素按顺序排列，通过索引访问长度固定：创建后无法改变容量二、数组的声明与初始化声明数组//推荐写法int[]numbers;初始化方式：动态初始化nu
  • R语言使用table1包绘制（生成）三线表实战：单变量分列构建三线表、编写自定义函数在三线表中添加p值 statistics.insight R语言入门课r语言数据挖掘机器学习
    R语言使用table1包绘制（生成）三线表实战：单变量分列构建三线表、编写自定义函数在三线表中添加p值目录R语言使用table1包绘制（生成）三线表、使用单变量分列构建三线表、编写自定义函数在三线表中添加p值#三线表是什么？#导入包并构建仿真数据#R语言使用table1包绘制（生成）三线表、使用单变量分列构建三线表、编写自定义函数在三线表中添加p值#三线表是什么？三线表本来是微软公司的word编辑
  • 【Attention】SEAttention shanks66 Attention各种深度学习模块人工智能深度学习python
    SEAttention摘要卷积神经网络（CNNs）的核心构建模块是卷积算子，它使网络能够通过在每一层的局部感受野内融合空间和通道信息来构建有价值的特征。此前大量研究聚焦于这种关系中的空间成分，试图通过在整个特征层级中提升空间编码质量来增强CNN的表征能力。在这项工作中，我们将重点放在通道关系上，并提出一种新颖的架构单元，称为“挤压与激励”（Squeeze-and-Excitation，简称SE）模
  • 算法学习之路——贪心算法 蒋楠鑫 算法算法贪心算法
    文章目录一、前言二、什么是算法三、什么是贪心算法1.含义2.基本思路3.适用场景四、代码实现五、经典例题分析六、总结一、前言先来看一道简单的数学问题：小明有30元钱，每瓶酒要5元钱，每3个空瓶子可以换1瓶酒，请问小明最多可以喝到多少瓶酒？这道题目显然是一道求最优解的问题，由于数据量小我们可以用最简单最直接的枚举法来解决，但是如果将题目泛化一下呢：小明现在购买了m瓶酒，每n个空瓶子可以换1瓶酒，请问
  • python网格插值站点_在python中，在二维零网格上两点之间插值一条值线 weixin_39965490 python网格插值站点
    TLDR:在2dnumpy数组中找到2个点后，如何在0数组中在它们之间插值一条1行？在上下文：目前我正在尝试从二值化的医学图像数据(0和1)对一个3d数组执行2d操作。最终目标是在填充体素/像素(即第一个和最后一个实例)的起点和终点之间添加一条1s的线。在为此，我使用SimpleITK分割一行，然后将其转换为numpy数组。在其他示例之后，我编写了返回一组数组的函数，这些数组显示填充(1)个像素和
  • python 网格数据插值_python – 网格数据的快速插值 weixin_39747399 python网格数据插值
    当然！有两个选项可以做不同的事情，但是既能利用原始数据的定期网格性质。第一个是scipy.ndimage.zoom.如果你只想通过内插原始数据生成一个更加密集的规则网格，那就是要走的路。第二个是scipy.ndimage.map_coordinates.如果你想在你的数据中插入一些(或许多)任意点，但仍然利用原始数据的定期网格性质(例如，不需要四叉树)，那就是去的方式。作为一个快速示例(这将使用三
  • springboot是如何在没有web.xml的情况下在外部tomcat启动的 菜鸟王老汉 spring
    最近在公司部署测试环境的时候遇到了问题，本地用springboot内嵌tomcat启动没有问题，部署到测试环境的外部tomcat就不加载，在咨询了同事之后在启动类上继承了SpringBootServletInitializer之后就没有了问题，但并没有深入去想。由于servlet的规范是要配置web.xml的，包括Struts2和spring都是要在web.xml配置的，有一天在服务器上看编译后的
  • CMake 保姆级教程 爱吃巧克力的程序媛 CMakec++
    CMake是一个跨平台的构建工具，用于生成适合不同平台和编译器的构建系统文件（如Makefile或VisualStudio项目文件）。在Windows下使用CMake构建项目时，CMake会根据CMakeLists.txt文件生成适合Windows的构建系统文件（如VisualStudio项目文件）。以下是Windows下使用CMake的基本规则和步骤：https://subingwen.cn/c
  • @Component—@Autowired—@Mapper—@Bean 追JAVA的小菜鸟 零碎知识点beanjavamybatisspringcomponent
    注解详解一、@Component二、@Autowired注解支持context:annotation-config——手动注入beancontext:component-scanbase-package="zy.pojo"——扫描包并自动注入总结三、@Mapper@Mapper与@Repository四、@Bean@Bean与@Component区别一、@Component作用：表明了此类为一个组
  • Mybatis传递多个不同类型的参数 我的身前一尺是我的世界 Mybatis传递多个参数
    一、同时传递List和String实现类@OverridepublicListfun(StringshopId,Listlist){Mapmap=newHashMap();map.put("shopId",shopId);map.put("list",list);ListlistCommodity=appCommodityMapper.fun(map);returnlistCommodity;}m
  • 地理数据中的分辨率转换 木叶清风666 地理信息数据处理matlabpython开发语言
    数据分辨率问题气象海洋数据在实际应用中，常常涉及到重采样，即分辨率的提高或降低等操作。本文提供了matlab以及python的样例程序，以降低（网格平均）或提高（线性插值）数据的分辨率。1.高分辨率——>低分辨率可以使用循环逐个网格进行操作,但循环次数过多,存在效率低下的问题。%---需要的分辨率0.25°,以及经纬度网格点deg=0.25;lat_era=16:deg:47.75;lon_era
  • 学习SpringBoot过程中常见问题汇总及多工程项目使用 IntelliJ IDEA 打开 KunQian_smile springBoot
    一：SpringBoot:redisClientine.test.serviceImpl.RedisServiceImplrequiredabeanoftype‘com.examp1:没有自动注入导致。service类上面没有@service注解或者mapper上没有@Repository注解，但是这种情况比较少见，一般不会忘记。2:配置了mybatis，但没有指定扫描的包。（1）直接在生成出来的
  • Spring Data JDBC 详解 m0_74823933 面试学习路线阿里巴巴springjava数据库
    目录一、JPA背景?二、SpringBoot整合SpringdataJDBC??1.配置数据源?2.配置Druid的admin后台??3.Spring-data-jdbc常用接口查询策略1)?CrudRepository增删改查2)PagingAndSortingRepository分页排序一、JPA背景早期的JPA的特性是懒加载和关联查询，一下能查出所有的关联信息，但我们开发者在查询SQL的时候
  • SpringBoot中Server层以及Mapper层常用注解 π大星的日常 javajava-rabbitmq
    最近看了一下SpringBoot2的课程，发现好多的注解并不是很了解，只是简单的会用，但是真是发生的作用却不知道，最近花了一些时间把这些注解进行了一下整理，针对不同的层级进行了细致的划分，最近几天会依次给大家更新关于注解的内容，对大家有帮助的话点赞支持一下哦！4.Service层注解@Service注解一般写在业务层的接口实现类上，而不是接口上。4.1@Service@Service:@Servi
  • HarmonyOS NEXT开发实战：Navigation页面跳转对象传递案例 一晃有一秋 鸿蒙实例鸿蒙harmonyos华为鸿蒙鸿蒙系统android
    介绍本示例主要介绍在使用Navigation实现页面跳转时，如何在跳转页面得到转入页面传的类对象的方法。实现过程中使用了第三方插件class-transformer，传递对象经过该插件的plainToClass方法转换后可以直接调用对象的方法，效果图预览使用说明从首页进入本页面时，会传递一个类对象UserBookingInfo。点击“换个座位”按钮会调用该类对象的generateRandSeatN
  • HarmonyOS NEXT开发实战：视频全屏切换案例 一晃有一秋 鸿蒙鸿蒙实例harmonyos华为鸿蒙鸿蒙系统android音视频
    介绍本示例介绍了@ohos.multimedia.media组件和@ohos.window接口实现媒体全屏的功能。该场景多用于首页瀑布流媒体播放等。效果图预览使用说明：点击全屏按钮，横屏媒体窗口。点击恢复窗口按钮，恢复媒体窗口。实现步骤初始化@ohos.multimedia.media的AVPlayer。asyncInit():Promise{awaitthis.release();constco
  • AI 大模型应用数据中心建设：高性能计算与存储架构 AI智能涌现深度研究 AI大模型应用入门实战与进阶javapythonjavascriptkotlingolang架构人工智能
    AI大模型、数据中心、高性能计算、存储架构、分布式训练、GPU加速、数据管理1.背景介绍近年来，人工智能（AI）技术取得了飞速发展，特别是深度学习模型的突破性进展，催生了一系列基于大规模数据训练的强大AI模型，例如GPT-3、BERT、DALL-E等。这些AI大模型在自然语言处理、计算机视觉、语音识别等领域展现出强大的应用潜力，但也对计算资源和数据存储提出了极高的要求。传统的计算架构难以满足AI大
  • 解决注入mapper报红的问题 Jyannis springSpringBootspringmybatisspringbootjavabean
    在spring系列集成mybatis时，我们经常遇到这样的问题：明明注入没有问题，但是intellijidea会报红。这是因为我们没有手动在代码里把mapper接口注入spring容器中，而@Autowired注入方式默认要求注入的对象必须是在spring容器中存在的。所以idea认为这里的userMapper不存在，而用户（我们）选择注入，是一种错误操作，就报红。那么怎么解决这个问题呢？以下提供
  • [QMT量化交易小白入门]-二十二、deepseek+cline+vscode,让小白使用miniQMT量化交易成为可能 python自动化工具 QMT量化交易小白入门vscodeide编辑器
    本专栏主要是介绍QMT的基础用法，常见函数，写策略的方法，也会分享一些量化交易的思路，大概会写100篇左右。QMT的相关资料较少，在使用过程中不断的摸索，遇到了一些问题，记录下来和大家一起沟通，共同进步，自己淋过雨了，希望大家都有一把伞。文章目录相关阅读DeepSeek新用户注册cline集成指令测试相关阅读小白也能做量化：零门槛QMT、Ptrade免费送量化交易入门：如何在QMT中配置Pytho
  • Storyboard 之segue用法总结 月未央 iOS学习总结iOS
    Storyboard的好玩之处在于它可以帮我们省略了很多要手动写的代码，其中segue的功劳功不可没，现总结一下学习心得，若有错误之处，望指正。创建工程，选择SingleViewApplication，给工程起个名字，这里是SegueDemo，注意要把下面的UseStoryboard选项勾选上，我使用ARC，这里可以随意。点选工程文件中的MainStoryboard.storyboard文件，可以
  • ubuntu 24.10安装mysql linuxxx110 ubuntumysql
    1.更新软件包列表在安装MySQL之前，先更新系统的软件包列表sudoaptupdate2、安装MySQL服务器sudoaptinstallmysql-server3.启动MySQL服务sudosystemctlstatusmysql4、运行安全脚本MySQL提供了一个安全脚本，用于设置root密码、移除匿名用户、禁止远程root登录等。运行以下命令sudomysql_secure_install
  • ServerStatus牛逼！！ 架构文摘JGWZ 学习工具开源软件
    作为一名攻城狮，面对各种服务器内存飙高、CPU猛增、磁盘打满等等服务器问题，可谓是伤透了我们的心。不仅要开发，还要处理这些问题，大把的时间浪费了，这时候一个好的全面的监控工具尤为重要了。所以，带着这个问题，为大家一个酷炫高逼格的服务器探针的监控工具：ServerStatus介绍ServerStatus是一个免费开源的监控工具，并且提供了一个直观的Web页面，极大的方便了开发人员。特性实时监控，如在
  • SQLite？低调不是小众... 架构文摘JGWZ sqlite数据库学习后端
    前几天在一个群里看到一位同学说：“SQLite这么小众的数据库，到底是什么人在用啊？”首先要说的是SQLite可不是小众的数据库，相反，SQLite是世界上装机量最多的数据库，远超MySQL，只不过比较低调而已。低调到我想在官网上找一个好看的用来当插图的图片都找不到，只能截一张官网首页来撑一撑，看起来十分朴素。我最早听说SQLite是刚毕业工作的时候，我们部门做微软内容管理产品的二次开发，其中有一
  • 一个简单的语音识别实现---百度在线语音识别REST API SDK（Python）简单使用 DerrickOzil 语音识别pythonsdk语音识别
    百度在线语音识别RESTAPISDK（Python）简单使用首先申请开发者权限注册开发者信息完成注册创建新应用下载SDK并查看key在应用管理中，选择查看key，记录AppID、APIKey、SecretKey三个参数值。测试音频链接：http://pan.baidu.com/s/1o8Ue4B4密码：o5r1]注意事项音频格式限制pcm（不压缩）、wav、amr采样频率及位数支持评测8k/16k
  • 加固与脱壳05 - 壳类型识别 二手的程序员 加固与脱壳网络安全安全网络开发语言前端
    以前一些老旧的技术就不介绍了，比如，动态加载、内存不落地加载的方式。现在的加壳类型分为3种：指令抽取VMPdexc2chttps://www.dingxiang-inc.com/blog/post/2指令抽取android的指令抽取，主要在于函数基本的抽取保护。通过使用android虚拟机自带的解释器进行执行代码。将原始App中dex文件的函数内容进行清除，并将单独移动到一个加密文件中，在App运
  • Mybatis传递多个参数方式 千羽公子 Mybatis
    使用Mybatis也有一段时间，可是突然发现竟然不咋会使用这个东西了，真是无语了。在以前的项目中使用的参数基本都是map形式的，很少会使用单个的参数传递，只是在不同的公司会有不同的写法，又不得不了解一下，真是亮瞎了24K合金眼，发现用法还是比较丰富的。自己搜索了一下，大致有四种方式，这里只针对项目中遇到的和经常用到的方式进行记录一下。一.就是string参数，分为多个或者单个参数的形式，或者@Pa
  • python_学习爬虫遇到的第一个问题_urllib获取baidu首页源代码 KJDETL python_爬虫python学习爬虫
    第一天学习爬虫，学习的是urllib的基本用法，通过urllib.request获取baidu首页源代码。#导入urllib所需要的库importurllib.request#左边自定义名称，右边是要访问的地址url='https://www.baidu.com/Index.htm'#左边自定义名称可以叫做响应，右边是通过urllib.request.urlopen方法向url发出请求respon
  • ios内付费 374016526 ios内付费
    近年来写了很多IOS的程序，内付费也用到不少，使用IOS的内付费实现起来比较麻烦，这里我写了一个简单的内付费包，希望对大家有帮助。   具体使用如下: 这里的sender其实就是调用者，这里主要是为了回调使用。 [KuroStoreApi kuroStoreProductId:@"产品ID" storeSender:self storeFinishCallBa
  • 20 款优秀的 Linux 终端仿真器 brotherlamp linuxlinux视频linux资料linux自学linux教程
      终端仿真器是一款用其它显示架构重现可视终端的计算机程序。换句话说就是终端仿真器能使哑终端看似像一台连接上了服务器的客户机。终端仿真器允许最终用户用文本用户界面和命令行来访问控制台和应用程序。（LCTT 译注：终端仿真器原意指对大型机-哑终端方式的模拟，不过在当今的 Linux 环境中，常指通过远程或本地方式连接的伪终端，俗称“终端”。） 你能从开源世界中找到大量的终端仿真器，它们
  • Solr Deep Paging(solr 深分页) eksliang solr深分页solr分页性能问题
    转载请出自出处：http://eksliang.iteye.com/blog/2148370 作者：eksliang(ickes) blg:http://eksliang.iteye.com/ 概述 长期以来，我们一直有一个深分页问题。如果直接跳到很靠后的页数，查询速度会比较慢。这是因为Solr的需要为查询从开始遍历所有数据。直到Solr的4.7这个问题一直没有一个很好的解决方案。直到solr
  • 数据库面试题 18289753290 面试题 数据库
    1.union ,union all 网络搜索出的最佳答案： union和union all的区别是,union会自动压缩多个结果集合中的重复结果，而union all则将所有的结果全部显示出来，不管是不是重复。 Union：对两个结果集进行并集操作，不包括重复行，同时进行默认规则的排序； Union All：对两个结果集进行并集操作，包括重复行，不进行排序； 2.索引有哪些分类？作用是
  • Android TV屏幕适配 酷的飞上天空 android
    先说下现在市面上TV分辨率的大概情况 两种分辨率为主 1.720标清，分辨率为1280x720. 屏幕尺寸以32寸为主，部分电视为42寸 2.1080p全高清，分辨率为1920x1080 屏幕尺寸以42寸为主，此分辨率电视屏幕从32寸到50寸都有   适配遇到问题，已1080p尺寸为例： 分辨率固定不变，屏幕尺寸变化较大。 如：效果图尺寸为1920x1080，如果使用d
  • Timer定时器与ActionListener联合应用 永夜-极光 java
    功能:在控制台每秒输出一次   代码: package Main; import javax.swing.Timer; import java.awt.event.*; public class T { private static int count = 0; public static void main(String[] args){
  • Ubuntu14.04系统Tab键不能自动补全问题解决 随便小屋 Ubuntu 14.04
    Unbuntu 14.4安装之后就在终端中使用Tab键不能自动补全，解决办法如下：   1、利用vi编辑器打开/etc/bash.bashrc文件（需要root权限） sudo vi /etc/bash.bashrc  接下来会提示输入密码 2、找到文件中的下列代码 #enable bash completion in interactive shells #if
  • 学会人际关系三招 轻松走职场 aijuans 职场
    要想成功，仅有专业能力是不够的，处理好与老板、同事及下属的人际关系也是门大学问。如何才能在职场如鱼得水、游刃有余呢？在此，教您简单实用的三个窍门。 　　第一，多汇报 最近，管理学又提出了一个新名词“追随力”。它告诉我们，做下属最关键的就是要多请示汇报，让上司随时了解你的工作进度，有了新想法也要及时建议。不知不觉，你就有了“追随力”，上司会越来越了解和信任你。 　　第二，勤沟通 团队的力
  • 《O2O：移动互联网时代的商业革命》读书笔记 aoyouzi 读书笔记
    移动互联网的未来：碎片化内容+碎片化渠道=各式精准、互动的新型社会化营销。   O2O：Online to OffLine 线上线下活动 O2O就是在移动互联网时代，生活消费领域通过线上和线下互动的一种新型商业模式。   手机二维码本质：O2O商务行为从线下现实世界到线上虚拟世界的入口。   线上虚拟世界创造的本意是打破信息鸿沟，让不同地域、不同需求的人
  • js实现图片随鼠标滚动的效果 百合不是茶 JavaScript滚动属性的获取图片滚动属性获取页面加载
    1,获取样式属性值 top 与顶部的距离 left 与左边的距离 right 与右边的距离 bottom 与下边的距离 zIndex 层叠层次     例子:获取左边的宽度,当css写在body标签中时 <div id="adver" style="position:absolute;top:50px;left:1000p
  • ajax同步异步参数async bijian1013 jqueryAjaxasync
            开发项目开发过程中，需要将ajax的返回值赋到全局变量中，然后在该页面其他地方引用，因为ajax异步的原因一直无法成功，需将async:false，使其变成同步的。         格式： $.ajax({ type: 'POST', ur
  • Webx3框架（1） Bill_chen eclipsespringmaven框架ibatis
    Webx是淘宝开发的一套Web开发框架，Webx3是其第三个升级版本；采用Eclipse的开发环境，现在支持java开发； 采用turbine原型的MVC框架，扩展了Spring容器，利用Maven进行项目的构建管理，灵活的ibatis持久层支持，总的来说，还是一套很不错的Web框架。 Webx3遵循turbine风格，velocity的模板被分为layout/screen/control三部
  • 【MongoDB学习笔记五】MongoDB概述 bit1129 mongodb
    MongoDB是面向文档的NoSQL数据库，尽量业界还对MongoDB存在一些质疑的声音，比如性能尤其是查询性能、数据一致性的支持没有想象的那么好，但是MongoDB用户群确实已经够多。MongoDB的亮点不在于它的性能，而是它处理非结构化数据的能力以及内置对分布式的支持(复制、分片达到的高可用、高可伸缩)，同时它提供的近似于SQL的查询能力，也是在做NoSQL技术选型时，考虑的一个重要因素。Mo
  • spring/hibernate/struts2常见异常总结 白糖_ Hibernate
    Spring ①ClassNotFoundException: org.aspectj.weaver.reflect.ReflectionWorld$ReflectionWorldException 缺少aspectjweaver.jar，该jar包常用于spring aop中   ②java.lang.ClassNotFoundException: org.sprin
  • jquery easyui表单重置(reset)扩展思路 bozch formjquery easyuireset
    在jquery easyui表单中 尚未提供表单重置的功能，这就需要自己对其进行扩展。 扩展的时候要考虑的控件有： combo,combobox,combogrid,combotree,datebox,datetimebox 需要对其添加reset方法，reset方法就是把初始化的值赋值给当前的组件，这就需要在组件的初始化时将值保存下来。 在所有的reset方法添加完毕之后，就需要对fo
  • 编程之美-烙饼排序 bylijinnan 编程之美
    package beautyOfCoding; import java.util.Arrays; /* *《编程之美》的思路是：搜索+剪枝。有点像是写下棋程序：当前情况下，把所有可能的下一步都做一遍；在这每一遍操作里面，计算出如果按这一步走的话，能不能赢（得出最优结果）。 *《编程之美》上代码有很多错误，且每个变量的含义令人费解。因此我按我的理解写了以下代码： */
  • Struts1.X 源码分析之ActionForm赋值原理 chenbowen00 struts
    struts1在处理请求参数之前，首先会根据配置文件action节点的name属性创建对应的ActionForm。如果配置了name属性，却找不到对应的ActionForm类也不会报错，只是不会处理本次请求的请求参数。 如果找到了对应的ActionForm类，则先判断是否已经存在ActionForm的实例，如果不存在则创建实例，并将其存放在对应的作用域中。作用域由配置文件action节点的s
  • [空天防御与经济]在获得充足的外部资源之前,太空投资需有限度 comsci 资源
          这里有一个常识性的问题:       地球的资源,人类的资金是有限的,而太空是无限的.....       就算全人类联合起来,要在太空中修建大型空间站,也不一定能够成功,因为资源和资金,技术有客观的限制.... &
  • ORACLE临时表—ON COMMIT PRESERVE ROWS daizj oracle临时表
    ORACLE临时表 转 临时表：像普通表一样，有结构，但是对数据的管理上不一样，临时表存储事务或会话的中间结果集，临时表中保存的数据只对当前 会话可见，所有会话都看不到其他会话的数据，即使其他会话提交了，也看不到。临时表不存在并发行为，因为他们对于当前会话都是独立的。 创建临时表时，ORACLE只创建了表的结构（在数据字典中定义），并没有初始化内存空间，当某一会话使用临时表时，ORALCE会
  • 基于Nginx XSendfile+SpringMVC进行文件下载 denger 应用服务器Webnginx网络应用lighttpd
        在平常我们实现文件下载通常是通过普通 read-write方式，如下代码所示。 @RequestMapping("/courseware/{id}") public void download(@PathVariable("id") String courseID, HttpServletResp
  • scanf接受char类型的字符 dcj3sjt126com c
    /* 2013年3月11日22:35:54 目的：学习char只接受一个字符 */ # include <stdio.h> int main(void) { int i; char ch; scanf("%d", &i); printf("i = %d\n", i); scanf("%
  • 学编程的价值 dcj3sjt126com 编程
    发一个人会编程, 想想以后可以教儿女, 是多么美好的事啊, 不管儿女将来从事什么样的职业, 教一教, 对他思维的开拓大有帮助   像这位朋友学习:   http://blog.sina.com.cn/s/articlelist_2584320772_0_1.html   VirtualGS教程 (By @林泰前): 几十年的老程序员，资深的
  • 二维数组（矩阵）对角线输出 飞天奔月 二维数组
    今天在BBS里面看到这样的面试题目,   1，二维数组（N*N），沿对角线方向，从右上角打印到左下角如N=4： 4*4二维数组  { 1 2 3 4 } { 5 6 7 8 } { 9 10 11 12 } {13 14 15 16 } 打印顺序  4 3 8 2 7 12 1 6 11 16 5 10 15 9 14 13 要
  • Ehcache（08）——可阻塞的Cache——BlockingCache 234390216 并发ehcacheBlockingCache阻塞
    可阻塞的Cache—BlockingCache          在上一节我们提到了显示使用Ehcache锁的问题，其实我们还可以隐式的来使用Ehcache的锁，那就是通过BlockingCache。BlockingCache是Ehcache的一个封装类，可以让我们对Ehcache进行并发操作。其内部的锁机制是使用的net.
  • mysqldiff对数据库间进行差异比较 jackyrong mysqld
      mysqldiff该工具是官方mysql-utilities工具集的一个脚本，可以用来对比不同数据库之间的表结构，或者同个数据库间的表结构    如果在windows下，直接下载mysql-utilities安装就可以了，然后运行后，会跑到命令行下： 1） 基本用法    mysqldiff --server1=admin:12345
  • spring data jpa 方法中可用的关键字 lawrence.li javaspring
    spring data jpa 支持以方法名进行查询/删除/统计。 查询的关键字为find 删除的关键字为delete/remove (>=1.7.x) 统计的关键字为count (>=1.7.x)   修改需要使用@Modifying注解 @Modifying @Query("update User u set u.firstna
  • Spring的ModelAndView类 nicegege spring
    项目中controller的方法跳转的到ModelAndView类，一直很好奇spring怎么实现的？ /* * Copyright 2002-2010 the original author or authors. * * Licensed under the Apache License, Version 2.0 (the "License"); * yo
  • 搭建 CentOS 6 服务器(13) - rsync、Amanda rensanning centos
    （一）rsync Server端 # yum install rsync # vi /etc/xinetd.d/rsync service rsync { disable = no flags = IPv6 socket_type = stream wait
  • Learn Nodejs 02 toknowme nodejs
    （1）npm是什么 npm is the package manager for node 官方网站：https://www.npmjs.com/ npm上有很多优秀的nodejs包，来解决常见的一些问题，比如用node-mysql，就可以方便通过nodejs链接到mysql，进行数据库的操作 在开发过程往往会需要用到其他的包，使用npm就可以下载这些包来供程序调用 &nb
  • Spring MVC 拦截器 xp9802 spring mvc
    Controller层的拦截器继承于HandlerInterceptorAdapter HandlerInterceptorAdapter.java  1  public   abstract   class  HandlerInterceptorAdapter  implements  HandlerIntercep
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他