知识要点

  • 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语法) 实现 简单的音乐盒的更多相关文章

  1. 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5

    Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...

  2. gulp打包js多个文件夹并压缩混淆,编译ES6语法,及多个import依赖由一个入口打包成一个cdn

    感觉和webpack的步骤差不多 首先安装gulp:参考上一篇 安装完之后 新建一个文件目录起名 在当前目录下打开cmd 执行:npm init 创建package.json文件 然后安装第一个插件g ...

  3. WebStorm ES6 语法支持设置和ES6语法的JS文件编译为ES5语法文件

    ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...

  4. webpack4 使用babel处理ES6语法的一些简单配置

    一,安装包 npm install --save-dev babel-loader @babel/corenpm install @babel/preset-env --save-devnpm ins ...

  5. 用js中的let等操作,要手动开启ECMAScript6(如果不设置,let等ES6语法会报错)

    问题:idea默认没有开启ECMAScript6,需要进行设置:(如果不设置,let等ES6语法会报错)步骤: File | Settings | Languages & Frameworks ...

  6. 前端工程师面试问题归纳(一、问答类html/css/js基础)

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  7. DIV+CSS+JS基础+正则表达式

    ...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...

  8. HTML/CSS/JS编码规范

    最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...

  9. 一个小公司的前端笔试HTML CSS JS

    网上有这套题的答案,版本也很多,我做了很多参考.本文就当个小笔记,可能有错误,还望指正~ 第1章  Html篇 1. 你做的网页在哪些浏览器测试过?这些浏览器的内核分别是什么? 浏览器类型 内核 Fi ...

随机推荐

  1. 第09组 Beta冲刺(1/4)

    队名:软工9组 组长博客:https://www.cnblogs.com/cmlei/ 作业博客:https://edu.cnblogs.com/campus/fzu/SoftwareEngineer ...

  2. SQL优化-如何分析性能瓶颈

    MySQL优化一览图 笔者将优化分为了两大类:软优化和硬优化.软优化一般是操作数据库即可:而硬优化则是操作服务器硬件及参数设置. 1.软优化 1)查询语句优化 首先我们可以用EXPLAIN或DESCR ...

  3. MySQL导入csv文件内容到Table及数据库的自增主键设置

    写在前面 目的是测试将csv文件内容导入到表中, 同时记录一下自增主键的设置. 测试采用MySQL8.0. 新建表customer_info如下, 未设置主键. 修改上表, 添加主键id, 并设置为自 ...

  4. webconfig 配置 分离

    https://blog.csdn.net/zhifeiya/article/details/38828711 如标题,如何把 asp.net webconfig的appSettings分离到单独文件 ...

  5. python:当文件中出现特定字符串时执行robot用例

    #coding:utf-8 import os import datetime import time def execute_rpt_db_full_effe_cainiao_city(): fla ...

  6. SQL server触发器学习记录

    作为C#程序员,我工作内容基本就是winform,wpf,asp.net.sql接触的比较少,今天突然来了一个ticket要我修改触发器脚本....只会select*的我顿感迷茫... 需求描述:as ...

  7. consul集群搭建以及ACL配置

    由于时间匆忙,要是有什么地方没有写对的,请大佬指正,谢谢.文章有点水,大佬勿喷这篇博客不回去深度的讲解consul中的一些知识,主要分享的我在使用的时候的一些操作和遇见的问题以及解决办法.当然有些东西 ...

  8. 【网络开发】详谈socket请求Web服务器过程

    最开始我们需要明白一件事情,因为这是这篇文章的前提: HTTP协议只是一个应用层协议,它底层是通过TCP进行传输数据的.因此,浏览器访问Web服务器的过程必须先有"连接建立"的发生 ...

  9. LeetCode 74. 搜索二维矩阵(Search a 2D Matrix)

    74. 搜索二维矩阵 74. Search a 2D Matrix 题目描述 编写一个高效的算法来判断 m x n 矩阵中,是否存在一个目标值.该矩阵具有如下特性: 每行中的整数从左到右按升序排列. ...

  10. mvn命令着中package、install、deploy的区别

    参考:https://blog.csdn.net/zhaojianting/article/details/80324533 常用操作区别 mvn clean package 依次执行了clean.r ...