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写一个简易的音乐播放器（仅播放一首歌）)

  • 计算机组成原理（知识点+易错点，超详细）|第四章 指令系统 sailing_c 计算机组成原理计算机组成原理学习笔记
    目录4.1指令系统4.1.1指令集体系结构4.1.2指令的基本格式4.1.3定长操作码指令格式4.1.4扩展操作码指令格式4.1.5指令的操作类型4.2指令的寻址方式4.2.1指令寻址和数据寻址4.2.2常见的数据寻址方式4.3程序的机器级代码表示4.3.1常用汇编指令介绍4.3.2选择语句的机器级表示4.3.3循环语句的机器级表示4.3.4过程调用的机器级表示4.4CISC和RISC的基本概念4
  • 打卡信奥刷题（775）用C++信奥P9945[普及组/提高] [USACO21FEB] Clockwise Fence B Loge编程生活 C++c++算法开发语言数据结构青少年编程
    P9945[USACO21FEB]ClockwiseFenceB题目描述围绕FarmerJohn最大的草地的栅栏已经损坏了，如今他终于决定要换一个新的栅栏。不幸的是，当FarmerJohn在铺设新栅栏时，一只巨大的蜜蜂突然出现，在他的草地上追着他跑，导致最后栅栏被沿着一条相当不规则的路径铺设。栅栏可以用一个字符串表示，每个字符为N（north，北）、E（east，东）、S（south，南）、W（w
  • 打卡信奥刷题（641）用C++信奥P8267[普及组/提高] [USACO22OPEN] Counting Liars B Loge编程生活 C++c++开发语言算法青少年编程数据结构
    [USACO22OPEN]CountingLiarsB题目描述奶牛Bessie躲在数轴上的某处。FarmerJohn的NNN头奶牛（1≤N≤10001\leN\le10001≤N≤1000）中的每头奶牛都有一条信息要分享：第iii头奶牛说Bessie躲在小于或等于pip_ipi的某个位置，或者说Bessie躲在大于或等于pip_ipi的某个位置（0≤pi≤1090\lep_i\le10^90≤pi
  • 打卡信奥刷题（036）用C++信奥P9950[普及组/提高] [USACO20FEB] Mad Scientist B Loge编程生活 C++c++开发语言算法青少年编程数据结构
    [USACO20FEB]MadScientistB题目描述FarmerJohn的远房亲戚Ben是一个疯狂的科学家。通常这会在家庭聚会时造成不小的摩擦，但这偶尔也会带来些好处，尤其是当FarmerJohn发现他正面对一些有关他的奶牛们的独特而不寻常的问题时。FarmerJohn当前正面对一个有关她的奶牛们的独特而不寻常的问题。他最近订购了NNN头奶牛（1≤N≤10001\leN\le10001≤N≤
  • 软件测试工程师面试题（含答案） 美团程序员 自动化测试软件测试软件测试面试软件测试软件测试面试面试职场和发展
    面试题列表1、自我介绍，涉及工作经历答：基本信息+擅长测试方向+个人突出亮点+以往工作经历等等。2、在公司中测试的流程是什么答：测试流程：需求评审>测试计划>测试计划>测试方案>编写用例>执行用例>回归测试>提交缺陷报告>提交测试报告3、举例一个项目，在项目中做了什么答：可以聊聊做了性能、自动化、工具开发，测试平台开发、功能等自己擅长的地方。4、如何提升测试效率，如何保障测试质量答：测试人员应该从
  • 从零开始学机器学习——构建一个推荐web应用 努力的小雨 机器学习机器学习前端人工智能
    首先给大家介绍一个很好用的学习地址：https://cloudstudio.net/columns今天，我们终于将分类器这一章节学习完活了，和回归一样，最后一章节用来构建web应用程序，我们会回顾之前所学的知识点，并新增一个web应用用来让模型和用户交互。所以今天的主题是美食推荐。美食推荐Web应用程序首先，请不要担心，本章节并不会涉及过多的前端知识点。我们此次的学习重点在于机器学习本身，因此我们
  • docker容器迁移，以mysql容器为例 风萧易去情难还 dockerdockermysql容器
    在容器化环境中，容器迁移是确保应用程序在不同环境中平滑部署和运行的关键。本文将详细介绍如何将一个正在运行的MySQL容器从一台机器迁移到另一台机器。特别内网安装数据库等软件时，所需依赖和工具下载困难，可以通过镜像迁移方式完成软件安装。一、准备工作在开始迁移之前，我们需要准备以下几项工作：源机器（A机器）：正在运行的MySQL容器。#拉取mysql镜像dockerpullmysql:8.0.25#创
  • 【西安电子科技大学考研】25官方复试专业课参考书目汇总 西电研梦 考研西电经验分享面试西安电子科技大学
    初试已经顺利考完啦、成绩已经公布，现在已经有很多同学来问学长学姐，复试参考书有哪些，复试应该做好哪些准备。故此学长学姐给大家整理好了西安电子科技大学各个学院的复试参考书目录，有需要的同学可以参考一下哈。大家可以结合本篇文章内容与招生目录参考书对比一下：【西电考研复试资料、讲课班陆续上线中~~~】有的参考书更新了版本，但是招生目录里仍然是之前的一些旧版本，关于参考书的版本问题，大家也可以在群内问一下
  • 西安电子科技大学 | 近期官方视频＋文章（涵盖招生＋录取统计） 西电研梦 西电经验分享考研
    今年、明年考研的学弟学妹们可以看看涵盖今年讲课西电录取统计【西安电子科技大学官方】研究生招生宣传你一定值得一看02、计算机科学与技术学院（近期视频＋文章）QQ群：867684593①、西电考研|833、834初+复试第一名许学长经验分享https://www.bilibili.com/video/BV1oE4m1R72a/②、25西电考研|计科院专业课139分学长经验分享https://www.b
  • 西安电子科技大学考研833计算机专业基础综合初试备考经验 西电研梦 考研
    本人21考研，报考西安电子科技大学。初试分数345。本科211机电专业，去年毕业出国受阻因此6月决定跨考西电计算机学硕833。回想自己备考的经历，有一些经验与不足之处，在这里分享给大家，尤其是一些跨考的同学。本次分别介绍数学、英语、政治、专业课、复试经历五部分。数学:数学和专业课是初试四门中最为重要的两门，决定能不能考上研基本就看这两门的复习情况!因为西电专硕学硕都是考察数学一，所以不需要考虑是否
  • rStar论文精读 MoyiTech 推理模型OpenAI-O1原理
    论文简介论文标题：《MutualreasoningmakessmallerLLMsstrongerproblem-solvers》论文地址：https://arxiv.org/abs/2408.06195录用会议：ICLR2025背景与挑战挑战1：在SLM中平衡exploration与exploitation。一些方法有很大的exploitation但限制任务多样性泛化性不好；一些方法有很大的ex
  • Hive SQL 精进系列：REGEXP_REPLACE 函数的用法 进一步有进一步的欢喜 HiveSQL精进系列hivesqlhadoop
    目录一、引言二、REGEXP_REPLACE函数基础2.1基本语法参数详解2.2简单示例三、REGEXP_REPLACE函数的应用场景3.1去除特殊字符3.2统一字符串格式四、REGEXP_REPLACE与REPLACE函数的对比4.1功能差异4.2适用场景五、REGEXP_REPLACE与REGEXP函数的对比5.1功能差异5.2适用场景六、总结一、引言字符串处理是数据处理中的常见需求，Hive
  • 国产芯片替代方案：解析沁恒USB桥接芯片转四串/双串/单串口 禾川兴 13242400688 沁恒直替系列单片机嵌入式硬件桥接模式
    沁恒国产USB桥接芯片：高兼容性方案加速国产化替代随着USB通信接口在工业控制、消费电子、智能设备等领域的广泛应用，国产芯片厂商沁恒微电子（WCH）推出了一系列高性能USB转串口芯片，以高集成度、低成本、全兼容设计实现对国际品牌芯片的完美替代。本文针对沁恒多款USB桥接芯片与国际主流型号进行对比，展现其技术竞争力与国产化价值。‌一、沁恒USB桥接芯片核心优势‌‌全兼容设计‌硬件引脚定义、封装尺寸、
  • Hive SQL 精进系列：SUBSTR 函数的多样用法 进一步有进一步的欢喜 HiveSQL精进系列hivesqlhadoop
    目录一、引言二、SUBSTR函数基础介绍2.1基本语法2.2参数详解2.3简单示例三、SUBSTR函数常见应用场景3.1提取日期中的年份、月份或日期3.2隐藏部分敏感信息四、SUBSTR函数高级用法4.1结合条件判断动态截取4.2处理复杂字符串模式五、总结一、引言SUBSTR函数是HiveSQL中一个用于字符串截取的重要函数，在处理文本数据时发挥着关键作用。本文将全面且深入地介绍HiveSQL中S
  • 嵌入式Linux网络编程实战：基于DNS解析的HTTP客户端实现 银河码 Linux网络编程网络linuxhttpc语言windowsvscodejson
    嵌入式Linux网络编程实战：基于DNS解析的HTTP客户端实现【本文代码已在树莓派4B（Linux内核5.10）平台验证通过，适用于物联网设备数据上报等场景】一、需求场景与功能亮点1.1典型物联网通信场景嵌入式设备DNS服务器云服务器域名解析请求返回目标IP发送传感器数据返回HTTP响应嵌入式设备DNS服务器云服务器1.2代码核心功能DNS智能解析：支持域名自动转换为IPv4地址协议合规性：严格
  • 在使用selenium进行爬虫时， add_experimental_optio(),add_argument()的用法 数据牧马人 selenium爬虫测试工具
    driver.add_experimental_option('excludeSwitches',['enable-automation'])是在使用SeleniumWebDriver与浏览器交互时设置的一行代码。这行代码用于禁用浏览器中的自动化检测。具体来说，当你在使用SeleniumWebDriver与浏览器交互时，有些浏览器（例如GoogleChrome）可能会检测到自动化行为（例如，通过检
  • 【2025年春季】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 白帽子凯哥 web安全学习安全CTF夺旗赛网络安全
    基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15
  • 计算机信息安全 若水心境 软件架构师知识库信息安全
    等保2.0与等保1.0区别※等保2.0在2019年12月1日正式实施。等级保护制度2.0在1.0的基础上，注重全方位主动防御、动态防御、整体防控和精准防护，实现对云计算、移动互联网、物联网、工业控制信息系统等保护对象全覆盖。对象范围扩大将云计算、移动互联网、物联网、工业控制系统等技术列入标准中。分类结构统一“基本要求、设计要求和测评要求”分类框架统一，形成了“安全通信网络”、“安全区域边界”、“安
  • CVE-2017-5645(使用 docker 搭建) JM丫 网络安全
    介绍:是一个与ApacheLog4j2相关的安全漏洞,属于远程代码执行,它可能允许攻击者通过构造恶意的日志信息在目标系统上执行任意代码Log4j2介绍Log4j2是Apache的一个日志记录工具,属于Java应用的日志框架,它是Log4j的升级版,性能更好,功能更多.它被广泛的适用于Java应用程序中,帮助开发者记录程序运行的时候的日子信息,是Java生态系统中最重要的一个日志框架之一漏洞编号:C
  • 浩方wms:什么是海外仓WMS系统?作用是什么？ haofang_software 大数据个人开发sass数据库科技
    浩方动力科技认为，海外仓作为连接卖家与海外消费者的关键节点，其重要性愈发凸显。海外仓WMS系统（WarehouseManagementSystem），作为一种专门针对海外仓运营的信息化管理系统，正成为提升海外仓运营效率和服务水平的得力助手。什么是海外仓WMS系统呢？海外仓管理系统又有什么作用？浩方WMS，今天来为大家讲解一下海外仓WMS的作用和意义。海外仓WMS系统，顾名思义，是专为海外仓储业务设
  • 云原生：K8s（Kubernetes）高频典型面试题汇总 老舅的火箭爱扫地 云原生kubernetes容器
    1.简述etcd及其特点？答：etcd是CoreOS团队发起的开源项目，是一个管理配置信息和服务发现（servicediscovery）的项目，它的目标是构建一个高可用的分布式键值（key-value）数据库，基于Go语言实现。特点：l简单：支持REST风格的HTTP+JSONAPIl安全：支持HTTPS方式的访问l快速：支持并发1k/s的写操作l可靠：支持分布式结构，基于Raft的一致性算法，R
  • 软件测试面试题 bobob_ Testing
    您所熟悉的测试用例设计方法都有哪些？请分别以具体的例子来说明这些方法在测试用例设计工作中的应用。答：有黑盒和白盒两种测试种类，黑盒有等价类划分法，边界分析法，因果图法和错误猜测法。白盒有逻辑覆盖法，循环测试路径选择，基本路径测试。例子：在一次输入多个条件的完整性查询中。利用等价类划分法则和边界分析法则，首先利用等价划分法，可以一个或多个结果是OK的测试用例，然后确认多个NG的测试用例，然后利用边界
  • 【前端入门】应该了解和知道的几个国内外前端开发资源网站 爱上大树的小猪 前端
    与大家分享一下几个国内外前端开发资源网站国际资源MDNWebDocs(MozillaDeveloperNetwork)用途：MDN是Web技术领域最全面的文档库之一，涵盖了HTML、CSS、JavaScript以及浏览器API等。链接:https://developer.mozilla.orgW3Schools用途：适合初学者学习Web技术，提供从基础到进阶的教程，同时还有在线练习环境。链接:ht
  • 【前端】如何依靠纯前端实现拍照获取/选择文件等文字识别OCR技术 爱上大树的小猪 前端ocr前端框架react.js
    本文仅介绍第三方依赖包Tesseract.js，Tesseract.js是一个基于网页的OCR（光学字符识别）引擎，可以识别图像中的文本并将其转换为可供计算机处理的文本数据。支持多框架编译，如Vue、React等，这里展示步骤为React开发。下面直接进入主题：附Tesseract.js官方（https://github.com/naptha/tesseract.js）下载安装依赖包npminst
  • Hive----Hive进阶操作(三) HIVE 特殊分隔符处理 XiaodunLP Hive
    HIVE特殊分隔符处理补充：hive读取数据的机制：1、首先用InputFormat的一个具体实现类读入文件数据，返回一条一条的记录（可以是行，或者是你逻辑中的“行”）2、然后利用SerDe的一个具体实现类，对上面返回的一条一条的记录进行字段切割Hive对文件中字段的分隔符默认情况下只支持单字节分隔符，如果数据文件中的分隔符是多字符的，如下所示：01||huangbo02||xuzheng03||
  • 【第14届蓝桥杯】软件赛CB组省赛 Guiat 算法竞赛真题题解蓝桥杯
    个人主页：Guiat归属专栏：算法竞赛真题题解文章目录A.日期统计B.01串的熵C.冶炼金属D.飞机降落E.接龙数列F.岛屿个数G.子串简写H.整数删除I.景区导游J.砍树正文总共10道题。A.日期统计【题目】日期统计【分析】【答案】235【AC_Code】#include#defineIOSios::sync_with_stdio(0);cin.tie(0);cout.tie(0);usingn
  • Docker 中 MySQL 迁移策略（单节点） Java咩 dockermysql容器
    目录一、简介二、操作流程2.1进入mysql容器2.2导出MySQL数据2.3.将导出的文件复制到宿主机2.4创建DockerCompose配置2.5启动新的Docker容器2.6导入数据到新的容器2.7验证数据2.8删除旧的容器（删除操作需慎重）三、推荐配置四、写在后面一、简介本人发现自己Docker中Mysql的时区不对，导致每次连接数据库都需要设置时区，所以考虑进行数据库迁移，重新搭建一个正
  • Python（1）Python全方位指南：定义、应用与零基础入门实战 一个天蝎座 白勺 程序猿 Python入门到精通python开发语言
    背景：为什么Python成为开发者必备技能？‌Python自1991年发布以来，凭借‌“简单高效”‌的设计理念，成为全球增长最快的编程语言。根据TIOBE2023年榜单，Python稳居前三，其核心竞争力包括：‌开发效率高‌：代码量仅为Java的1/5，C++的1/10。‌跨领域通吃‌：从Web开发到AI训练，覆盖90%以上技术场景。‌企业级应用‌：YouTube用Python处理视频推荐，NAS
  • Python 赋能经济趋势与股票研究：数据驱动的投资洞察 Small踢倒coffee_氕氘氚 笔记经验分享
    在当今数据爆炸的时代，Python凭借其强大的数据处理能力和丰富的开源库，已成为经济趋势分析和股票研究的利器。本文将探讨如何利用Python进行以下方面的研究：**一、数据获取与清洗*****数据来源:*****财经数据API:**Tushare、AKShare、YahooFinance、AlphaVantage等提供丰富的股票、基金、宏观经济等数据。***网络爬虫:**使用BeautifulSo
  • GitHub一周热门ai项目 2025.3.17 BillyXie23 AI探索ai人工智能
    项目1：Significant-Gravitas/AutoGPT地址:significant-gravitas.github.com/AutoGPT描述:AutoGPT致力于为所有人提供可访问的AI工具，让用户专注于重要事务。Stars:173,449推荐理由:适合想要探索自动化AI应用的开发者，支持自定义扩展，开源生态强大，适合构建智能助手、自动化流程等场景。项目2：AUTOMATIC1111/
  • 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其他