草庐IT

初踩坑JS加载与audio接口:点击头像开始/暂停背景音乐

睿屿青衫 2023-03-28 原文

背景

封楼期间难得空闲，也静不下心学习，空闲之余萌生了重做引导单页的想法。因为之前都是扒站(某大公司游戏官网)+小改，一来虽然很炫酷，但本人水平有限，仍有很大一部分JS无从下手，甚至是看不懂|-_-|；二来对方毕竟没有开源，无论道德还是法律都说不过去，所以……先从简单处写起，后续慢慢迭代吧！

大致布局:Flex

参见 阮一峰Flex布局教程

头像部分

手残党，暂时没有用CSS或者JS绘制特效，因为之前做头像留着底图，所以偷个懒。
CSS：鼠标指针指向头像切换gif，移开切换png。
JS：音乐播放切换gif，暂停切换png。

背景音乐部分

audio接口参见 HTML audio基础API完全使用指南
我只循环播放了一首歌，所以隐藏audio主体美观一些，然后控制按钮交给头像。有需要多首歌的，可以看一下开源的APlayer

遇到的问题:JS加载阻塞,获取不到元素id

在实现头像处鼠标事件时，一直获取不到头像的id，但是控制台调试发现代码无误。原来由于JS的机制是单线程，所以先运行JS代码，再构建相关DOM，需要在外部引用JS时加上属性async,等构建完DOM再获取。

<script src="./js/reashal.js" async="async"></script>

代码部分

HTML部分

<!DOCTYPE html>
<html lang="chn">

<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,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>你听|睿屿青衫</title>
    <meta name="author" content="reashal">
    <meta name="description" content="不惦来路,轻装且行">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="shortcut icon" href="https://images.reashal.com/resources/avator/reashal.png">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <script src="https://images.reashal.com/resources/js/music.js" async="async"></script>
</head>

<body>
    <div class="box">
        <div class="about" id="bor">
            <img src="https://images.reashal.com/resources/avator/reashal.png" id="ava" title="点我有惊喜哦" alt="头像/音乐控件">
            <div id="reashal">
                <h2><b>睿屿青衫</h2>
                <p>不惦来路,轻装且行</p>
                <div class="fgx"></div>
                <div class="icon">
                    <ul id="ctr">
                        <li><a href="https://www.reashal.com/" title="Home" target="blank"><i
                                    class="fa fa-paper-plane fa-lg"></i></a></li>
                        <li><a href="https://www.reashal.com/index.php/cross.html" title="Mood" target="blank"><i
                                    class="fa fa-pencil fa-lg"></i></a></li>
                        <li><a href="http://wpa.qq.com/msgrd?v=3&uin=532266666&site=ivrpano.com&menu=yes" title="QQ"
                                target="blank"><i class="fa fa-qq fa-lg"></i></a></li>
                        <li><a href="mailto:88811@88.com" title="Mail" target="blank"><i
                                    class="fa fa-envelope fa-lg"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <a target="_blank" href="https://beian.miit.gov.cn/">
            <p>鲁ICP备18004237号</p>
        </a>
    </div>
    <div>
        <!--鼠标点击泡泡特效-->
        <canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
        <script type="text/javascript" src="https://images.reashal.com/resources/js/djtx.js"></script>
    </div>
    <div>
        <audio controls id="music" loop>
            <source src="https://images.reashal.com/resources/music/LettingGo.mp3" type="audio/mpeg">
        </audio>
    </div>

</body>

</html>

CSS部分

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-image: linear-gradient(to right, #ec6fa3, #2f4af2);
}

.box {
    position: fixed;
    height: 100%;
    width: 100%;
    /* box铺满屏幕,需要html和body取消边距 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 盒子内部水平垂直居中对齐 */
}

.about {
    width: 70%;
    max-width: 750px;
    background-color: rgba(219, 245, 245, 0.1);
    padding: 1%;
}

#ava {
    display: block;
    width: 100px;
    height: 100px;
    border: 2px solid #1eccef;
    margin: auto;
    margin-top: 3%;
    border-radius: 100px;
}

#ava:hover {
    content: url("https://images.reashal.com/resources/avator/dyAva.gif");
}

#reashal {
    color: rgb(255, 255, 255);
    text-align: center;
    margin: auto;
}

.fgx {
    height: 1px;
    background-color: white;
}

ul,
li {
    display: inline-block;
    list-style: none;
    padding: 1vh;
    margin: auto;
}

i:hover {
    color: #ec6fa3;
}

.footer {
    bottom: 3%;
    width: 100%;
    position: fixed;
    text-align: center;
}

a,
p {
    color: white;
    font-size: 16px;
    text-decoration: none;
}

#music {
    display: none;
}

JS部分

音乐部分

var x = document.getElementById('ava');
// 单击头像开始/暂停背景音乐
var music = document.getElementById('music');
x.onclick = function () {
  if (music.paused) {
    music.play();
  }
  else {
    music.pause();
  }
}
//播放音乐旋转头像
music.onplay = function () {
  x.src = 'https://images.reashal.com/resources/avator/dyAva.gif';
  x.title = '点击暂停背景音乐';
}
//暂停音乐停止旋转头像
music.onpause = function () {
  x.src = 'https://images.reashal.com/resources/avator/reashal.png';
  x.title = '点击开启背景音乐';
}

点击特效部分

不贴了，想要的自己从我这里下载，别人写的我也看不懂……

暂时完工

后续 想起什么 学会点新东西再加
成品展示 以后慢慢 更新 吧

背景音乐audiogtltreashalHtml/Css

有关初踩坑JS加载与audio接口:点击头像开始/暂停背景音乐的更多相关文章

  1. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  2. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  3. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  4. Observability：从零开始创建 Java 微服务并监控它 （二） - 2

    这篇文章是继上一篇文章“Observability：从零开始创建Java微服务并监控它（一）”的续篇。在上一篇文章中，我们讲述了如何创建一个Javaweb应用，并使用Filebeat来收集应用所生成的日志。在今天的文章中，我来详述如何收集应用的指标，使用APM来监控应用并监督web服务的在线情况。源码可以在地址 https://github.com/liu-xiao-guo/java_observability 进行下载。摄入指标指标被视为可以随时更改的时间点值。当前请求的数量可以改变任何毫秒。你可能有1000个请求的峰值，然后一切都回到一个请求。这也意味着这些指标可能不准确，你还想提取最小/

  5. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

  6. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，

  7. ruby-on-rails - Rails 3 - 过滤器链暂停为 :authentication rendered or redirected - 2

    我仍然收到标题中的“错误”消息，但不知道如何解决。在ApplicationController中，classApplicationController在routes.rb#match'set_activity_account/:id/:value'=>'users#account_activity',:as=>:set_activity_account--thisdoesn'tworkaswell..resources:usersdomemberdoget:action_a,:action_bendcollectiondoget'account_activity'endend和User

  8. ruby-on-rails - Ruby/Rails 中的夏令时开始和结束日期 - 2

    我正在开发一个Rails应用程序，我需要在其中找到给定特定偏移量或时区的夏令时开始和结束日期。我基本上在我的数据库中保存了从用户浏览器接收到的时区偏移量(“+3”，“-5”)，我想在它出现时修改它由于夏令时的变化。我知道Time实例变量有dst?和isdst方法，如果存储在它们中的日期在夏令时与否。>Time.new.isdst=>true但是使用它来查找夏令时的开始和结束日期会占用太多资源，而且我还必须为我拥有的每个时区偏移量执行此操作。我想知道更好的方法。 最佳答案 好的，基于你所说的和@dhouty'sanswer:您希望能够

  9. ruby-on-rails - 使用 gmaps4rails 动态加载谷歌地图标记 - 2

    如何只加载map边界内的标记gmaps4rails？当然，在平移和/或缩放后加载新的。与此直接相关的是，如何获取map的当前边界和缩放级别？ 最佳答案 我是这样做的，我只在用户完成平移或缩放后替换标记，如果您需要不同的行为，请使用不同的事件监听器:在你看来(index.html.erb):{"zoom"=>15,"auto_adjust"=>false,"detect_location"=>true,"center_on_user"=>true}},false,true)%>在View的底部添加:functiongmaps4rail

  10. ruby-on-rails - phusion passenger 和 ruby​​ 1.9.1 已经开始工作了吗？ - 2

    我有一台生产机器和一台开发机器，都运行ubuntu8.10并且都运行最新的phusionpassenger。当我在osx上的本地开发机器上使用ruby​​1.9.1时，我想知道外面的人是否已经在使用带有ruby​​1.9.1甚至1.9.2的phusionpassenger？如果是这样，请告诉我们您的设置!此外，有没有办法在apache上使用phusionpassenger同时运行ruby​​1.8.7(ree)和1.9.1？感谢您的指点，我在任何地方都找不到任何提示... 最佳答案 是的，从某些2.2.x版本开始就正式支持它，我不记

随机推荐