背景

封楼期间难得空闲，也静不下心学习，空闲之余萌生了重做引导单页的想法。因为之前都是扒站(某大公司游戏官网)+小改，一来虽然很炫酷，但本人水平有限，仍有很大一部分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 = '点击开启背景音乐';

}

点击特效部分

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

暂时完工

后续 想起什么 学会点新东西再加

成品展示 以后慢慢 更新 吧

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

  1. 初遇SpringBoot踩坑与加载静态文件遇到的坑

                              SpringBoot开发 创建SpringBoot项目 大家都知道SpringBoot开发非常快,创建SpringBoot项目时,勾上SpringW ...

  2. 优化JS加载时间过长的一种思路

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...

  3. JS 加载html 在IE7 IE8下 可调试

    实际背景 就是都是HTML 公共头部底部  然后中间部分加载不同的HTML文件 有点跟模板引擎一样 jQuery 有个load函数 加载html文件的路径 获取html内容 到中间部分 正常下是不能用 ...

  4. 解决JS加载速度慢

    在网页中的js文件引用会很多,js引用通常为 <script src="xxxx.js"></script> 通过如下方法可以增加js加载速度 <sc ...

  5. FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据

          前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...

  6. [f]动态判断js加载完成

    在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内 ...

  7. 使用js加载器动态加载外部Javascript文件

    原文:http://www.cnblogs.com/xdp-gacl/p/3927417.html 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var ...

  8. (转)JS加载顺序

    原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)——第一篇 Javascrip ...

  9. JS加载时间线

    1.创建Document对象,开始解析web页面.解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中.这个阶段document.readyState = 'loading' ...

随机推荐

  1. Java多线程之线程同步【synchronized、Lock、volatitle】

    线程同步 线程同步:当有一个线程在对内存进行操作时,其他线程都不可以对这个内存地址进行操作,直到该线程完成操作, 其他线程才能对该内存地址进行操作,而其他线程又处于等待状态,实现线程同步的方法有很多. ...

  2. 《前端运维》三、Docker--1镜像与容器

    一.基本概念 如果我们想要让软件运行起来,首先要保证操作系统的设置,其次还需要依赖各种组件和库的正确安装.那么虚拟机就是一种带环境安装的一种解决方案,它可以实现在一种操作系统里面运行另外一种操作系统, ...

  3. 深入理解Java虚拟机-HotSpot虚拟机对象探秘

    一.对象的创建过程 虚拟机遇到一条new指令时,首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已被加载.解析和初始化过.如果没有,那就先执行相应的类 ...

  4. 说说 RPC 的实现原理？

    首先需要有处理网络连接通讯的模块,负责连接建立.管理和消息的传输.其次需要有编解码的模块,因为网络通讯都是传输的字节码,需要将我们使用的对象序列化和反序列化.剩下的就是客户端和服务器端的部分,服务器端 ...

  5. maven下载出现unknown文件夹

    问题场景 maven下载配置完成后,发现如上图代码包下载失败,本地maven库中出现unknown文件夹,也就是说,maven无法定位下载到上面的代码包. 解决过程 仔细观察发现,所有下载失败的代码包 ...

  6. redis有哪些功能

    基于本机内存的缓存 为了解决调用API依然需要2秒的问题,经过排查,其主要原因在于使用SQL获取热点新闻的过程中消耗了将近2秒的时间,于是乎,我们又想到了一个简单粗暴的解决方案,即把SQL查询的结果直 ...

  7. JVM-learning

    JVM是什么?? Java Virtual Mechine JRE(JavaRuntimeEnvironment,Java运行环境),也就是Java平台.所有的Java 程序都要在JRE下才能运行. ...

  8. Elasticsearch 在部署时，对 Linux 的设置有哪些优化方法？

    1.64 GB 内存的机器是非常理想的, 但是 32 GB 和 16 GB 机器也是很常见的.少于 8 GB 会适得其反. 2.如果你要在更快的 CPUs 和更多的核心之间选择,选择更多的核心更好.多 ...

  9. zookeeper 负载均衡和 nginx 负载均衡区别？

    zk 的负载均衡是可以调控,nginx 只是能调权重,其他需要可控的都需要自己写插件:但是 nginx 的吞吐量比 zk 大很多,应该说按业务选择用哪种方式.

  10. Mybatis入门程序（一）

    1.入门程序实现需求 根据用户id查询一个用户信息 根据用户名称模糊查询用户信息列表 添加用户(二) 更新用户(二) 删除用户(二) 2.引入Mybatis所需 jar 包(Maven工程) < ...