背景

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

    1.函数返回的多个值会被组织成元组被返回,也可以用多个值来接收 2.调用函数时候,传入的参数叫实际参数,简称实参,定义函数的参数叫做形式参数,简称形参-- 位置参数 def mymax(x,y): a ...

  2. 简述 synchronized 和 java.util.concurrent.locks.Lock 的异同？

    Lock 是 Java 5 以后引入的新的 API,和关键字 synchronized 相比主要相同点: Lock 能完成 synchronized 所实现的所有功能:主要不同点:Lock 有比 sy ...

  3. JS Promise对象学习

    Promise对象的三个状态 pending(进行中) fulfilled(已成功) rejected(已失败) Promise代表一个异步操作,对象的状态一旦改变,就不会再改变 Promise构造函 ...

  4. PRODUCER配置加载

    1.入口 Kafka通过new一个KafkaProducer将配置项进行加载.将用户定义的properties作为参数,构造成一个ProducerConfig对象. public KafkaProdu ...

  5. 学习Walle（一）

    一.概述 Walle 一个web部署系统工具,配置简单.功能完善.界面流畅.开箱即用!支持git.svn版本管理,支持各种web代码发布,PHP,Python,JAVA等代码的发布.回滚,可以通过we ...

  6. spi协议

    1. 概述 SPI = Serial Peripheral Interface,是串行外围设备接口,是一种高速,全双工,同步的通信总线.常规只占用四根线,节约了芯片管脚,PCB的布局省空间.现在越来越 ...

  7. 顺利通过EMC实验（18）

  8. 从问题找原因之CSS浮动清除

    问题描述 浮动元素导致的后面img标签居中对齐"失败",如下图 <div> <div class="content1"> <div ...

  9. CSS实例：翻转图片、滚动图片栏、打开大门

    CSS 翻转图片主要用到的技术除了3D翻转和定位 ,还用到了一个属性 backface-visibility:visable|hidden;该属性主要是用来设定元素背面是否可见. 效果图如下: 具体的 ...

  10. 基于HTML5的拓扑图编辑器（2）

    继续来说编辑器的需求, 前面介绍了拖拽创建节点.以及连线的方法,并加入到了其后的 Qunee 类库,实际应用中需要更多功能,Qunee 的拓扑图编辑器也在逐渐完善,一方面增加多种编辑交互,一方面提供数 ...