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 ...
随机推荐
- 第09组 Beta冲刺(1/4)
队名:软工9组 组长博客:https://www.cnblogs.com/cmlei/ 作业博客:https://edu.cnblogs.com/campus/fzu/SoftwareEngineer ...
- SQL优化-如何分析性能瓶颈
MySQL优化一览图 笔者将优化分为了两大类:软优化和硬优化.软优化一般是操作数据库即可:而硬优化则是操作服务器硬件及参数设置. 1.软优化 1)查询语句优化 首先我们可以用EXPLAIN或DESCR ...
- MySQL导入csv文件内容到Table及数据库的自增主键设置
写在前面 目的是测试将csv文件内容导入到表中, 同时记录一下自增主键的设置. 测试采用MySQL8.0. 新建表customer_info如下, 未设置主键. 修改上表, 添加主键id, 并设置为自 ...
- webconfig 配置 分离
https://blog.csdn.net/zhifeiya/article/details/38828711 如标题,如何把 asp.net webconfig的appSettings分离到单独文件 ...
- python:当文件中出现特定字符串时执行robot用例
#coding:utf-8 import os import datetime import time def execute_rpt_db_full_effe_cainiao_city(): fla ...
- SQL server触发器学习记录
作为C#程序员,我工作内容基本就是winform,wpf,asp.net.sql接触的比较少,今天突然来了一个ticket要我修改触发器脚本....只会select*的我顿感迷茫... 需求描述:as ...
- consul集群搭建以及ACL配置
由于时间匆忙,要是有什么地方没有写对的,请大佬指正,谢谢.文章有点水,大佬勿喷这篇博客不回去深度的讲解consul中的一些知识,主要分享的我在使用的时候的一些操作和遇见的问题以及解决办法.当然有些东西 ...
- 【网络开发】详谈socket请求Web服务器过程
最开始我们需要明白一件事情,因为这是这篇文章的前提: HTTP协议只是一个应用层协议,它底层是通过TCP进行传输数据的.因此,浏览器访问Web服务器的过程必须先有"连接建立"的发生 ...
- LeetCode 74. 搜索二维矩阵(Search a 2D Matrix)
74. 搜索二维矩阵 74. Search a 2D Matrix 题目描述 编写一个高效的算法来判断 m x n 矩阵中,是否存在一个目标值.该矩阵具有如下特性: 每行中的整数从左到右按升序排列. ...
- mvn命令着中package、install、deploy的区别
参考:https://blog.csdn.net/zhaojianting/article/details/80324533 常用操作区别 mvn clean package 依次执行了clean.r ...