初踩坑JS加载与audio接口:点击头像开始/暂停背景音乐
背景
封楼期间难得空闲，也静不下心学习，空闲之余萌生了重做引导单页的想法。因为之前都是扒站(某大公司游戏官网)+小改，一来虽然很炫酷，但本人水平有限，仍有很大一部分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接口:点击头像开始/暂停背景音乐的更多相关文章
- 初遇SpringBoot踩坑与加载静态文件遇到的坑
SpringBoot开发 创建SpringBoot项目 大家都知道SpringBoot开发非常快,创建SpringBoot项目时,勾上SpringW ...
- 优化JS加载时间过长的一种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...
- JS 加载html 在IE7 IE8下 可调试
实际背景 就是都是HTML 公共头部底部 然后中间部分加载不同的HTML文件 有点跟模板引擎一样 jQuery 有个load函数 加载html文件的路径 获取html内容 到中间部分 正常下是不能用 ...
- 解决JS加载速度慢
在网页中的js文件引用会很多,js引用通常为 <script src="xxxx.js"></script> 通过如下方法可以增加js加载速度 <sc ...
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...
- [f]动态判断js加载完成
在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内 ...
- 使用js加载器动态加载外部Javascript文件
原文:http://www.cnblogs.com/xdp-gacl/p/3927417.html 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var ...
- (转)JS加载顺序
原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)——第一篇 Javascrip ...
- JS加载时间线
1.创建Document对象,开始解析web页面.解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中.这个阶段document.readyState = 'loading' ...
随机推荐
- 为什么要从Web form过渡到MVC中
可以说,在未来几年中,Web form的使用会逐渐减少,而取而代之的就是MVC.可能你不会同意我的观点,那么我就试着阐述一下我的观点,如果你还是不能接受,那么请你反驳我. 学习一个新语言或者是新架构是 ...
- bzoj5130 字符串的周期(kmp，最小表示法)
bzoj5130 字符串的周期(kmp,最小表示法) bzoj 题解时间 m很大,n很小. 周期很容易求,就是kmp之后n-fail[n]. 之后对于枚举所有的字符串用最小表示法,暴力搜索. 能过就完 ...
- Golang 包了解以及程序的执行
Golang 包了解以及程序的执行 引言 Go 语言是使用包来组织源代码的,包(package)是多个 Go 源码的集合,是一种高级的代码复用方案.Go 语言中为我们提供了很多内置包,如 fmt.o ...
- zookeeper有几种部署模式？ zookeeper 怎么保证主从节点的状态同步？
一.zookeeper的三种部署模式 Zookeeper 有三种部署模式分别是单机模式.伪集群模式.集群模式.这三种模式在不同的场景下使用: 单机部署:一般用来检验 Zookeeper 基础功能,熟悉 ...
- 解释AOP模块 ？
AOP模块用于发给我们的Spring应用做面向切面的开发, 很多支持由AOP联盟提供,这样就确保了Spring和其他AOP框架的共通性.这个模块将元数据编程引入Spring.
- kafka的message格式是什么样的？
一个Kafka的Message由一个固定长度的header和一个变长的消息体body组成 header部分由一个字节的magic(文件格式)和四个字节的CRC32(用于判断body消息体是否正常)构成 ...
- Redis的集群搭建（四）
1.redis-cluster架构图 2.redis-cluster投票:容错 架构细节: (1)所有的redis节点彼此互联(PING-PONG机制),内部使用二进制协议优化传输速度和带宽. (2) ...
- jinfo介绍
1. jinfo 1.1 简介 jinfo用于打印java的配置信息,这些配置信息包括: java system properties jvm命令行参数 通过查看这些配置信息,可以了解java进程的运 ...
- 读懂jstack
1 jstack jstack是JDK自带的一种线程栈跟踪工具,用于生成java虚拟机当前时刻线程快照.在定位线程卡顿.死锁.block等原因的时候非常有用.使用方法是: jstack [-l] pi ...
- Zookeeper Watcher 机制 -- 数据变更通知 ?
Zookeeper 允许客户端向服务端的某个 Znode 注册一个 Watcher 监听,当服务 端的一些指定事件触发了这个 Watcher,服务端会向指定客户端发送一个事件通 知来实现分布式的通知功 ...