html,css,js(包含简单的 ES6语法) 实现 简单的音乐盒
知识要点
- videoObject.load(): 加载某个视频(音频)文件,即重新播放
- videoObject.play(): 播放视频(音频)文件
- videoObject.remove(): 停止播放视频(音频)文件
ES6小知识
- const关键字:用来声明常量(即保持不变的量)
- let关键字:用来声明变量(即可以变化的量)
代码(背景图片,音频文件可以自己替换哈):
html:
<div class="container">
<div class="musicBox">
<div class="bottom"><img src="data:images/musicb.jpg" width="300" height="300"></div>
<div class="top"><img src="data:images/musict.jpg" width="300" height="300"></div>
</div>
<div class="musicBox">
<div class="bottom"><img src="data:images/01.jpg" width="300" height="300"></div>
<div class="top"><img src="data:images/00.jpg" width="300" height="300"></div>
</div>
<div class="musicBox">
<div class="bottom"><img src="data:images/03.jpg" width="300" height="300"></div>
<div class="top"><img src="data:images/02.jpg" width="300" height="300"></div>
</div>
<audio src="autios/music0.mp3" loop></audio>
<audio src="autios/music1.mp3" loop></audio>
<audio src="autios/music2.mp3" loop></audio>
</div>
css:
<style type="text/css">
body {
background: url("images/bg.jpg") no-repeat;
}
.musicBox {
width: 300px;
height: 300px;
position: relative;
margin: 100px 100px;
float: left;
border-radius: 50%;
}
.bottom, .top {
position: absolute;
left:;
top:;
width: 100%;
height: 100%;
border-radius: inherit;
box-shadow: 0 0 14px 2px #FF9800;
overflow: hidden;
}
.top {
transition: all 1s ease-in-out;
transform-origin: bottom;
}
.bottom_rotate {
animation: bottom_rotate 6s linear infinite;
}
@keyframes bottom_rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.music {
transform: rotateX(180deg);
}
</style>
javascript:
<script type="text/javascript">
const topList = document.querySelectorAll(".top");
const bottomList = document.querySelectorAll(".bottom");
const audioList = document.querySelectorAll("audio");
// 声明一个阀门:用来表示音频的是否播放
let flag = 1;
for (let i = 0; i < topList.length; i++) {
topList[i].addEventListener("click", function () {
if (flag == 1) {
this.classList.add("music");
// videoObject.load(): 用来加载某个视频(音频)文件,即重新播放
audioList[i].load();
// videoObject.play(): 播放
audioList[i].play();
// element.classList.add(): 为元素添加 CSS 类
bottomList[i].classList.add("bottom_rotate");
flag = 0;
} else {
this.classList.remove("music");
// videoObject.pause(): 停止播放
audioList[i].pause();
// element.classList.remove(): 为元素移除 CSS 类
bottomList[i].classList.remove("bottom_rotate");
flag = 1;
}
}, false);
}
</script>
html,css,js(包含简单的 ES6语法) 实现 简单的音乐盒的更多相关文章
- 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5
Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...
- gulp打包js多个文件夹并压缩混淆,编译ES6语法,及多个import依赖由一个入口打包成一个cdn
感觉和webpack的步骤差不多 首先安装gulp:参考上一篇 安装完之后 新建一个文件目录起名 在当前目录下打开cmd 执行:npm init 创建package.json文件 然后安装第一个插件g ...
- WebStorm ES6 语法支持设置和ES6语法的JS文件编译为ES5语法文件
ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...
- webpack4 使用babel处理ES6语法的一些简单配置
一,安装包 npm install --save-dev babel-loader @babel/corenpm install @babel/preset-env --save-devnpm ins ...
- 用js中的let等操作,要手动开启ECMAScript6(如果不设置,let等ES6语法会报错)
问题:idea默认没有开启ECMAScript6,需要进行设置:(如果不设置,let等ES6语法会报错)步骤: File | Settings | Languages & Frameworks ...
- 前端工程师面试问题归纳(一、问答类html/css/js基础)
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- DIV+CSS+JS基础+正则表达式
...............HTML系列.................... DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...
- HTML/CSS/JS编码规范
最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...
- 一个小公司的前端笔试HTML CSS JS
网上有这套题的答案,版本也很多,我做了很多参考.本文就当个小笔记,可能有错误,还望指正~ 第1章 Html篇 1. 你做的网页在哪些浏览器测试过?这些浏览器的内核分别是什么? 浏览器类型 内核 Fi ...
随机推荐
- [RoarCTF 2019]simple_uplod
目录 [RoarCTF 2019]simple_uplod 1.ThinkPHP文件上传 2.upload()多文件上传 ThinkPHP上传文件名暴破 [RoarCTF 2019]simple_up ...
- LeetCode 7. 反转整数(Reverse Integer)
题目描述 给定一个 32 位有符号整数,将整数中的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出: 21 ...
- uniapp - 关于调试跨域
[] 1.右键Chrome图标 2.选中属性(R) 3.在目标(T) chrome.exe后添加 --disable-web-security --user-data-dir --allow-runn ...
- [Angular] ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'name' of undefined
在数据请求完成通过 ionViewDidLoad 展示页面的时候 报错误 : ERROR Error: Uncaught (in promise): TypeError: Cannot read pr ...
- (八)Knockout 组件 Components
概述 :组件和自定义元素 Components 是将UI代码组织成自包含的.可重用的块的一种强大而干净的方法.他们: -可以表示单个控件/窗口小部件或应用程序的整个部分 -包含它们自己的视图,并且通常 ...
- [转]curl 命令模拟 HTTP GET/POST 请求
在 Linux 操作系统上对后端程序进行测试的时候,需要进行模拟连接或者书写测试脚本 curl 访问百度,通过GET方法请求 命令格式: curl protocol://address:port/ur ...
- Uni-app 使用总结
1.去掉顶部导航 在page.json中添加 "globalStyle" : { "navigationBarTextStyle" : "black& ...
- Hive Authorization
https://cwiki.apache.org/confluence/display/Hive/LanguageManual+Authorization https://www.cloudera.c ...
- 【LeetCode算法-38】Count and Say
LeetCode第38题 The count-and-say sequence is the sequence of integers with the first five terms as fol ...
- 【LeetCode算法-26】Remove Duplicates from Sorted Array
LeetCode第26题 Given a sorted array nums, remove the duplicates in-place such that each element appear ...