知识要点

  • 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. Mybatis(下)

    Mybatis(下) 一.MaBatis核心配置文件 Mybatis 中文文档 Mybatis 中文文档 1. properties 定义属性及读取属性文件,取的时候用 $(name) ,name 为 ...

  2. python项目总结--学生选课

    题目要求: 根据业务需求,现要对慕课学院(1)班的所有学员进行选修课程分配,使得每一名学生都可以选修到一门课程.具体要求如下: 1.自定义学生信息.课程信息.教师信息三者的具体描述 2.自定义exam ...

  3. 网络公开课和MOOC资源

    美国(USA) 1. 麻省理工学院开放课程(Free Online Course Materials/ MIT OpenCourseWare) 2. 耶鲁大学开放课程(Online Video Lec ...

  4. ListView中嵌入布局的Button或多个点击事件

    有时候在ListView嵌入的布局中有多个事件需要点击,比如一个item中有TextView和Button两个布局,当我们需要获取这两个点击事件时,我们应该如何去获取呢,通常来说,我们都是已经固定好了 ...

  5. easyui 如何为datagrid添加自定义列属性(如:width,align,editor)

    我在实际业务需要为datagrid添加一个自定义属性 原先的datagrid列属性包括:title.width.align.formattter.editor等 我们可以通过datagrid的一个方法 ...

  6. 用于抓取vijos所有题目信息的node.js脚本

    代码如下: var superagent = require('superagent'); var fs = require('fs'); /* fetch_vijos_problems 这个脚本用于 ...

  7. 【Shell常用命令二】管道符 通配符

    ======================================

  8. [LeetCode] 112. Path Sum 路径和

    Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...

  9. [LeetCode] 113. Path Sum II 路径和 II

    Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...

  10. Exsi6.6主机网络不通解决办法

    Exsi虚拟机网络偶尔不通,防火墙性能不足 解决办法,断开网络连接再重连