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

  • RabbitMQ 高级特性：从 TTL 到消息分发的全面解析 （下） ngioig RabbitMQruby开发语言后端
    RabbitMQ高级特性RabbitMQ高级特性解析：RabbitMQ消息可靠性保障（上）-CSDN博客RabbitMQ高级特性：从TTL到消息分发的全面解析（下）-CSDN博客引言RabbitMQ作为一款强大的消息队列中间件，在分布式系统中发挥着至关重要的作用。除了基本的消息收发功能外，它还具备许多高级特性，如TTL、死信队列、延迟队列、事务和消息分发等。本文将详细介绍这些高级特性。1.TTL（
  • Your Battery Is a Blast! Safeguarding Against Counterfeit Batteries with Authentication 介绍 XLYcmy 论文阅读网络安全课程论文机器学习CCS论文阅读课程设计大作业
    本文主要围绕论文《YourBatteryIsaBlast!SafeguardingAgainstCounterfeitBatterieswithAuthentication》展开，这篇论文出自2023年丹麦哥本哈根举行的会议CCS’23，会议日期为2023年11月26日至30日。论文共有两个作者，一个是FrancescoMarchiori，来自意大利帕多瓦大学的Padua分校，其电子邮件地址为fr
  • 苹果签名的战略价值：解析六大核心优势与商业赋能逻辑 ios
    苹果签名的战略价值：解析六大核心优势与商业赋能逻辑（因篇幅过长所以分为两篇帖子发~）在iOS应用生态中，签名机制既是技术护城河，也是开发者突破分发限制的关键武器。本文将从开发效率、商业变现、安全管控等维度，深度剖析苹果签名体系带来的独特价值。一、突破AppStore审核壁垒，加速产品验证苹果签名最核心的优势在于规避冗长审核流程。根据2023年统计，AppStore平均审核周期为24小时，首次提交通
  • 栈区、堆区、静态区 励志的小陈 c语言开发语言
    一、栈区（Stack）1.栈区是什么•栈区（Stack）是计算机内存中的一部分，用于存储程序运行时的临时数据。2.栈区的有关性质（1）存储临时数据•栈区主要用于存储局部变量（比如函数内部定义的变量）和函数调用时的上下文信息（比如返回地址和参数）。（2）后进先出•就像你把一张便签纸放在一堆便签纸的顶部，当你需要拿一张便签纸时，你总是先拿最上面的那张。在栈区中，最后被放入的数据会最先被取出。（3）自动
  • HarmonyOS Next ohpm-repo 权限管理与安全策略优化 harmonyos
    在企业级的HarmonyOSNext开发中，ohpm-repo私有仓库的安全性至关重要。它不仅关乎代码资产的保护，还影响着整个开发流程的稳定性。下面我们将从访问控制策略配置、公私钥认证以及安全优化与入侵防护等方面，详细探讨如何实现企业级安全策略，确保ohpm-repo私有仓库的安全性，防止未经授权访问。如何配置访问控制策略？通过ohpmconfigsetregistry绑定私有仓库在使用ohpm-
  • HarmonyOS Next ohpm-repo实战案例——搭建企业级私有仓库 harmonyos
    在企业级开发环境中，搭建一个稳定、高效且安全的HarmonyOSNextohpm-repo私有仓库至关重要。它不仅能集中管理项目依赖的三方库，还能提升开发效率、保障代码安全。接下来，我们将从部署架构设计、包管理优化以及访问控制等方面，详细介绍企业级ohpm-repo私有仓库的搭建指南。企业级ohpm-repo部署架构设计（私有仓库+反向代理+多实例高可用架构）私有仓库ohpm-repo作为私有仓库
  • 【CMake指南】第5篇：跨平台配置与工具链（实现多环境无缝构建） JuicyActiveGilbert CMake指南嵌入式硬件单片机c++CMake教程
    本文中的相关代码、文件皆为示例。1.跨平台路径处理1.1统一路径分隔符#将路径转换为当前平台的格式file(TO_CMAKE_PATH"/usr/local/include"NORMALIZED_PATH)message("转换后路径:${NORMALIZED_PATH}")#Windows输出:usr\local\include1.2路径拼接最佳实践#错误方式（硬编码分隔符）set(INC_PA
  • IP证书如何让企业提升网络信任度 ssl证书ip地址
    IP证书，作为一种专门设计用于保护IP地址安全的数字证书，正逐渐成为提升企业网络信任度的关键工具。###IP证书申请入口申请时记得填写注册码230931，获取一对一技术支持一、身份验证与加密通信IP证书的核心在于通过PKI技术实现设备身份与IP地址的强绑定。当企业为服务器或设备部署IP证书后，通信双方通过交换证书验证身份，并协商对称密钥加密数据，确保通信的机密性与完整性。这一机制有效抵御了IP欺骗
  • 代码签名证书：快速消除不安全警告！ ssl证书
    一、代码签名证书的作用代码签名证书是由受信任的证书颁发机构（CA）颁发给软件开发者的数字证书，用于对软件代码进行数字签名。通过数字签名，开发者可以证明代码自签名以来未被篡改，从而确保软件的完整性和真实性。代码签名证书是消除“未知发布者”警告的最有效方式。二、如何申请和使用代码签名证书1、选择合适的证书类型：根据软件类型和开发需求，选择标准代码签名证书或EV代码签名证书。EV证书提供了更高级别的身份
  • 80或者443端口不能开放也可签发的IP SSL证书 https
    以IP地址来申请SSL证书的时候，通常需要以上传服务器文件的方式来验证IP地址的管理权限，这就涉及常规端口的开放，一般需要开放80或者443端口，如不能开放则无法签发SSL证书。DunTrust提供的IP地址证书，除了支持80或者443端口验证外，还支持其他端口验证。申请网址：www.yundunssl.comhttps://www.yundunssl.cn/下面是具体的申请流程注册账号：在Dun
  • 批量检查QQ域名是否被封的C++代码示例 qq
    概述：此C++代码示例展示了如何批量请求指定的API接口，检查QQ域名的状态。根据API返回的status值，status为1表示域名正常，status为0表示域名被封禁。我们将使用libcurl来进行HTTP请求，使用jsoncpp解析返回的JSON数据。目标：通过C++编写代码，批量请求https://api.52an.fun/qq/api.php?url=接口，检查多个QQ域名的封禁状态，并
  • 【C语言】C语言数据类型和变量练习巩固 ChiaWei Lee C语言c语言开发语言
    1、关于scanf函数说法正确的是？A.scanf中也有占位符，占位符和后边的参数提供的地址一一对应。B.scanf()处理所有占位符时，会自动过滤起首的空白字符，包括空格、制表符、换行符C.scanf的占位符%s表示读取一个字符串，遇到空白字符也全部读取D.scanf是库函数，库函数不需要包含头文件正确答案：AB：scanf()处理数值占位符时，会自动过滤空白字符，包括空格、制表符、换行符，sc
  • 深度合成算法备案十大雷区拆解 AI产品备案 人工智能算法语言模型ai
    最近后台收到了很多小伙伴的私信，基本上都是在问算法备案被打回了；哪部分的材料有什么问题；不清楚驳回原因等等。今天结合大家最关心的问题，为大家详细剖析一下备案过程中常见的十大难题及解决方法。一、备案主体性质界定不明不少企业在备案过程中往往难以明确自身是否属于备案主体范围，尤其是涉及技术提供与应用服务的交叉领域，无法判断自身是否属于“具有舆论属性或者社会动员能力”主体。解决方案：仔细研读相关政策法规，
  • 【技术实测】单一世界承载数万单位无分片同步！全球低延迟互动DEMO开放测试 微网兔子 後端技術c++服务器unity后端分布式
    核心突破分散式同步引擎`实现三大关键指标：✅无分片架构-全域实体即时同步✅毫秒级延迟-跨洲网路优化✅万级货运-秒登入不排队万人单一世界最新技术测试影片目前，我们已实现一定的技术突破，并希望收集开发者的回馈，以确定下一步的优化方向。为了验证这项技术，我们部署了一个测试环境，具体情况如下：3万名玩家的即时互动3D测试环境(512×512平方米)已部署12,000个模拟客户端，开放18,000个名额给开
  • 如何减少跨团队交付摩擦？——基于 DevOps 与敏捷的最佳实践 pythonyaml
    摘要在现代软件开发中，跨团队协作的挑战主要体现在需求变更、测试环境不匹配、沟通不畅，这些问题往往导致交付延迟。本文将探讨如何通过DevOps、Scrum以及协作文档来提升跨团队协作效率，并提供可运行的Demo代码模块，帮助读者落地最佳实践。引言在企业软件开发中，产品、开发、测试、运维、设计团队之间的交付摩擦是常见问题。造成这些摩擦的核心原因包括：需求变更频繁：需求文档未同步，开发与产品理解偏差。测
  • Spring Cloud Eureka快速搭建：微服务注册中心的配置步骤 勤劳兔码农 springcloudeureka微服务
    SpringCloudEureka快速搭建：微服务注册中心的配置步骤目录引言SpringCloud微服务架构概述什么是Eureka？EurekaServer的搭建步骤4.1创建EurekaServer项目4.2配置EurekaServer4.3启动EurekaServer4.4多实例EurekaServer的搭建EurekaClient的配置步骤5.1创建EurekaClient项目5.2配置Eu
  • C++和C语言的区别有哪些 残余的记忆 c++c语言数据结构开发语言
    C++和C语言是两种不同的编程语言，虽然它们有许多相似之处，但是它们之间也存在着很多区别。本文将介绍C++和C语言之间的一些主要区别。1.面向对象编程C++是一种面向对象编程语言，相较于C语言，其具有更多的特性。面向对象编程（OOP）作为一种编程方法论，通过对数据进行封装、继承、多态等操作，来实现程序的灵活性和可维护性。C++提供了很多面向对象编程的特性，例如类、继承、多态等。这些特性能够让程序员
  • 走出内卷的困局 盐论君 创业创新社交电子远程工作求职招聘
    《逃避自由》的作者若能体会《平凡的世界》中孙少平的苦难，就不会以一种消极的口吻提出：人们想要的自由是不需要负责任的自由。如果一个人连体会工作伦理的前提都不具备，那么我们不妨认为父辈们希望后代追求稳定的生活和工作是对的。对于一直生活在不稳定中的大多数人，自由是令人畏惧的，只有当他们拥有对抗这份恐惧的能力时，自由才能真正让人‘横眉冷对千夫指’，但想要做到这一点的前提恰恰是先要拥有一份较为稳定的工作，内
  • What Are Optimal Coding Functions for Time-of-Flight Imaging?文章解读，TOG2018 吃饭睡觉发paper 数学建模
    总结：1.ToF成像基础飞行时间（Time-of-Flight,ToF）相机通过发射调制光信号（如近红外光）并测量反射信号的时延来计算目标物体的距离。其核心原理可分为两类：连续波调制（CW-ToF）：发射连续的正弦波调制光，通过测量反射信号的相位偏移计算距离。脉冲调制（PulsedToF）：发射短脉冲光，直接测量光脉冲的往返时间。**编码函数（CodingFunction）**在此过程中定义了调制
  • windows协议不再续签，华为再无windows可用，将于四月发布鸿蒙PC 国货崛起 华为harmonyos
    大家好，我是国货系创始人张云泽，最近不少小伙伴在后台问：“听说Windows协议要到期了？我的电脑会不会变砖？”还有人说：“华为笔记本以后用不了Windows了？鸿蒙系统能用吗？”今天咱们就唠唠这事儿，不整虚的！windows协议到期将不再续签，华为将于四月发布鸿蒙PC版一、普通用户的Windows协议到期，慌不慌？其实啊，Windows协议到期一般分两种情况：个人用户：比如用了临时激活码或者第三
  • 【sklearn 04】DNN、CNN、RNN @金色海岸 sklearndnncnn
    DNNDNN（DeepNeuralNetworks，深度神经网络）是一种相对浅层机器学习模型具有更多参数，需要更多数据进行训练的机器学习算法CNNCNN（convolutionalNeuralNetworks，卷积神经网络）是一种从局部特征开始学习并逐渐整合的神经网络。卷积神经网络通过卷积层来进行特征提取，通过池化层进行降维，相比较全连接的神经网络，卷积神经网络降低了模型复杂度，减少了模型的参数，
  • 【sklearn 02】监督学习、非监督下学习、强化学习 @金色海岸 sklearn学习人工智能
    监督学习、非监督学习、强化学习**机器学习通常分为无监督学习、监督学习和强化学习三类。-第一类：无监督学习（unsupervisedlearning），指的是从信息出发自动寻找规律，分析数据的结构，常见的无监督学习任务有聚类、降维、密度估计、关联分析等。-第二类：监督学习（supervisedlearning），监督学习指的是使用带标签的数据去训练模型，并预测未知数据的标签。监督学习有两种，当预测
  • 前端存储后端响应数据方式详解 z2637305611 前端
    在前端存储后端响应数据是常见需求，可以优化性能（减少重复请求）、支持离线访问或提升用户体验。以下是超详细的实现方式和注意事项：一、前端存储后端数据的核心步骤1.获取后端数据使用fetch或axios发送请求：//使用fetchfetch('https://api.example.com/data').then(response=>response.json()).then(data=>saveDa
  • 养生，开启健康生活之门 yy0821yy 生活
    在这个快节奏的时代，人们在忙碌奔波中，往往忽略了自身健康。养生保健，不再是老年人的专属，而是各个年龄段维持良好生活状态的关键，它是我们开启健康生活的一把钥匙。规律作息是养生的基石。人体就像一台精密的仪器，各个器官按照生物钟有条不紊地运转。熬夜追剧、通宵工作，看似是在争取时间，实则是在打乱身体的正常节奏。长期熬夜会导致内分泌失调，脸上冒出痘痘，精神萎靡不振，免疫力下降，各种疾病也容易找上门来。因此，
  • 解锁健康密码：拥抱养生，重塑生活 yy0821yy 生活
    在当下，快节奏的生活如汹涌浪潮，裹挟着我们一路向前。高强度的工作、繁杂的生活琐事，让人们在忙碌中常常忽略了自身健康。然而，健康并非从天而降的幸运，而是精心呵护的成果，养生则是开启健康之门的钥匙。饮食养生是基石。俗话说：“病从口入。”合理的饮食结构对健康至关重要。多摄入富含膳食纤维的粗粮，像燕麦、糙米，它们能促进肠道蠕动，预防便秘，降低心血管疾病风险。新鲜的蔬果更是必不可少，菠菜、橙子等富含维生素与
  • 健康养生：活力生活的基石 yy0821yy 生活
    在当下，生活节奏快得像飞驰的列车，我们在忙碌里穿梭，愈发明白健康才是最珍贵的财富。健康养生可不是一阵风似的潮流，它实实在在是开启活力生活的关键，精心呵护着我们身体与心灵的方方面面。就拿饮食来说，这可是健康养生的根基。践行均衡饮食，就如同为身体精心筹备一场满汉全席。多吃那些颜色鲜艳的蔬菜，像绿油油的西兰花，它富含维生素与矿物质，给身体补充满满的营养；还有红彤彤的番茄，既能抗氧化，又美味可口。水果也不
  • 健康养生：滋养身心的生活智慧 yy0821yy 生活
    健康养生，是一场与身体和心灵的对话，是对生命细致入微的呵护，它贯穿于生活的点滴之中，为我们开启优质生活的大门。情志养生在健康养生中占据重要地位。人的情绪如同四季的天气，或晴或雨，但长期的负面情绪如狂风暴雨，会冲击身体的健康防线。我们要学会保持平和、乐观的心态。当遇到挫折时，把它视为成长的机遇，以积极的思维去化解困难。比如，工作上的项目失败了，可以从中总结经验，看到自己提升的空间，而不是一味自责。平
  • 健康养生：开启高品质生活之门 yy0821yy 生活
    健康是人生最宝贵的财富，而养生则是守护健康的智慧之选。在快节奏的现代生活中，掌握健康养生之道，能让我们精力充沛地面对每一天。饮食养生首当其冲。我们应追求均衡饮食，确保每餐都有适量的碳水化合物、蛋白质、脂肪、维生素和矿物质。主食多选择粗粮，如燕麦、玉米等，它们富含膳食纤维，能促进肠道蠕动。优质蛋白质来源包括豆类、鱼类、鸡胸肉等，它们是身体修复和生长的基石。减少高油、高盐、高糖食物的摄入，多吃新鲜的蔬
  • IntelliJ IDEA 2023.3.1安装指南从下载到配置的完整教程（附资源下载） 心灵宝贝 intellij-ideajavaide
    安装IntelliJIDEA2023.3.1非常简单，以下是详细的安装步骤，适用于Windows、macOS和Linux系统。1.下载IntelliJIDEAIntelliJIDEA下载链接：https://pan.quark.cn/s/3ad975664934选择适合你的操作系统的版本：Ultimate版：功能全面，支持所有开发语言和框架（需付费）。Community版：免费版，适合Java和K
  • 数据产品赋能数字化转型 wengad 数字化转型数据产品人工智能大数据
    数据产品赋能数字化转型引言：数据产品的创新与发展：赋能决策智能化的钥匙一、数据产品的定义与特征二、数据产品的核心功能三、应用实践与案例分析四、未来展望引言：数据产品的创新与发展：赋能决策智能化的钥匙在数字化转型的浪潮下，数据已成为企业核心竞争力的关键要素。数据产品的出现，不仅是信息技术发展的必然产物，更是企业实现数据价值最大化、推动决策智能化的重要工具。本文旨在探讨数据产品的概念、功能特性、应用实
  • 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其他