背景

封楼期间难得空闲，也静不下心学习，空闲之余萌生了重做引导单页的想法。因为之前都是扒站(某大公司游戏官网)+小改，一来虽然很炫酷，但本人水平有限，仍有很大一部分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. VS Code通过code runner插件编译运行多个cpp文件 | 链接编译.h文件

    1.多个cpp文件在同一级目录 参考:https://jingyan.baidu.com/article/2f9b480d7ceb3d01ca6cc224.html 此时可通过修改Code Runne ...

  2. kafka消费组创建和删除原理

    0.10.0.0版本的kafka的消费者和消费组已经不在zk上注册节点了,那么消费组是以什么形式存在的呢? 1 入口 看下kafka自带的脚本kafka-consumer-groups.sh,可见脚本 ...

  3. BeanFactory – BeanFactory 实现举例?

    Bean 工厂是工厂模式的一个实现,提供了控制反转功能,用来把应用的配置和依赖从正真的应用代码中分离. 最常用的BeanFactory 实现是XmlBeanFactory 类.

  4. Serlvet 输出中文

    1 response.setHeader("Content-type", "text/html;charset=UTF-8"); 2 response.setC ...

  5. Swing 是线程安全的？

    不是,Swing 不是线程安全的.你不能通过任何线程来更新 Swing 组件,如 JTable.JList 或 JPanel,事实上,它们只能通过 GUI 或 AWT 线程来更新. 这就是为什么 Sw ...

  6. Spring与Web项目整合的原理

    引言: 在刚开始我们接触IOC时,我们加载并启用SpringIOC是通过如下代码手动加载 applicationContext.xml 文件,new出context对象,完成Bean的创建和属性的注入 ...

  7. template7入门教程及对它的一些看法

    template7是framework7的内置模板引擎,在此之前使用过jquery-tmpl,不过刚刚打开github看了下,已经停止更新,并且将要被JsRender所替代.妹的,JsRender又是 ...

  8. 原生js实现架子鼓特效

    这是代码完成的效果,按下abcd会出现对应的架子鼓音乐的效果. 简单的介绍下代码思路,html和css部分就不多说了. 重要的是js部分. 大致是这样的, 首先获取到所有的按钮为一个数组,然后遍历整个 ...

  9. 微信小程序&mpvue问题总结（1）

    微信小程序进入到首页的时候,日志打印出"created", "onlaunch", "mounted",具体代码如下:那么,在小程序中 cr ...

  10. 深入解析丨母婴App如何迅速收割2W新用户？

    在讲案例前,我们需要先说一下精细化分析. 我们常说的精细化分析,就是一个持续"解构"的过程,通过像漏斗.留存.细分等高级分析功能,将"整体"按照事件属性解构成& ...