这个小案例使用到的属性和方法，希望大家好好熟悉一下，代码复制过去就能用
CSS用到的属性
CSS
1.
overflow 属性 用于设置内容溢出隐藏或设置滚动条
visible 默认值 内容不会修剪，会呈现在元素框之外
hidden 内容会被隐藏，不会呈现在元素之外
scroll 内容会被隐藏，会以滚动条方式展现内容
auto 如果内容被隐藏，会以滚动条方式展现内容
2.
display 属性 用于设置元素是否被视为块或者是内联元素或用于子元素的布局
常用的属性值
flex 弹性盒
none 隐藏元素
block 将内联元素设置为块级元素
inline 将块级元素设置为内联元素
inline-block 将内联元素或块级元素设置为行内块元素
不常用属性值
list-item div元素放在ul的列表里面会被设置为列表，更li一样
run-in 此元素会根据上下文作为块级元素或内联元素显示，不必研究该属性，因为浏览器不支持
table 元素会以表格的形式显示，可以根据页面大小自动调整布局
inline-table 此元素会作为内联表格来显示
table-row-group 此元素会作为一个或多个行的分组来显示 类似 tbody
tabke-header-group 此元素会作为一个或多个行的分组来显示 类似 thead
flow-root 生成一个块级元素，其会建立一个新的块级格式化上下文
tanle-row 此元素会作为一个表格来显示 类似 tr
table-column-group 此元素会作为一个或多个列的来分组显示 类似 colgroup
table-column 此元素会作为一个单元格列显示 类似 col
table-cell 此元素会作为一个表格单元格显示
table-caption 此元素会作为一个表格标题显示
inherit 规定应该从父元素继承display属性的值
3.
align-items 属性 用于定义flex子元素在容器当前的侧轴和纵轴方向上的对齐方式
stretch 默认值，元素被拉伸以适应容器,填满属性,子元素要加 flex:1;属性
center 元素位于容器的中心
flex-start 元素位于容器的开头
flex-end 元素位于容器的结尾
baseline 元素位于容器的基线山
initial 设置该属性为它的默认值
inherit 从父元素继承属性
4.
justify-content 属性 用于设置或检索弹性盒子元素在主轴/横轴方向上的对齐方式
flex-start 默认值，从行首起始位置开始排列/左对齐
flex-end 从行尾位置开始排列/右对齐
center 居中排列
space-between 均匀排列每个元素，首个元素放置于起点/末尾元素放置于终点
space-evenly 均匀排列每个元素之间的间隔相等
space-around 均匀排列每个元素，每个元素周围分配相同的空间
initial 设置该属性的默认值
5.
background 属性 可以在一个声明中设置所有的背景属性
background-color 指定要使用的背景颜色
background-position 指定背景图像的位置
background-size 指定背景图的大小
background-repeat 指定如何重复背景图像
background-origin 指定背景图像的定位区域
background-clip 指定背景图像的绘画区域
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动
background-image 指定要使用的一个或多个背景图像
6.
z-index 属性 指定一个元素的堆叠顺序
auto 默认值，堆叠顺序与父元素相等
number 设置元素的堆叠顺序/数值越大,层级越高
inherit 规定应该从父元素继承z-index属性的值
7.
border-radius 属性 设置元素的外边框圆角，当使用一个半径时确定一个圆形，当使用两个半径时确定一个圆
每个半径的四个值顺序是：左上角，右上角，右下角，左下角
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
缩写方式
border-radius:左上角15px,右上角50px,右下角30px,左下角5px;
8.
box-shadow 属性 设置一个或多个下拉阴影的框,该属性有6个值
h-shadow 必须的，水平阴影的位置，允许负值
v-shadow 必须的，垂直阴影的位置，允许负值
blur 模糊距离
spread 阴影大小
color 阴影的颜色
inset 外层的阴影,改变阴影内测阴影
9.
border-top 属性 简写属性把上边框的所有属性设置到一个声明中
border-top-width 规定上边框的宽度
border-top-style 规定上边框的样式
border-top-color 规定上边框的颜色
inherit 规定应该从父元素继承border-top属性的设置
10.
border-left 属性 简写把左边框的所有属性设置到一个声明中
border-left-width 规定左边框的宽度
border-left-style 规定左边框的样式
border-left-color 规定左边框的颜色
inherit 规定应该从父元素继承border-left属性的设置
11.
background:linear-gradient 背景线性渐变
linear-gradient()函数用于创建一个表示两种或多种颜色线性渐变的图片
先来理解一下线性渐变的角度
线性渐变可以在渐变序列前指定一个角度值,表示渐变将从位置开始,起始位置是一个角度值
介于0°和360°都之间，0都位于容器的底部，也就是渐变从底部向顶部延申，默认值是180度
即渐变从顶部向底部延申。
更语义化的参数是关键字to开头，角度值以关键字from开头，但from关键字不必写出，给水平方向
left或right和垂直方向top或bottom，比如:to top 表示渐变从下到上延申，相当于0°。再比如
to right 表示渐变从左到右延申，相当于90°。还可以同时指定水平方式和垂直方向，如：to right
bottom 表示向渐变从左到右延申.
来个例子：
div {
// 从左到右延申
background:linear-gradient(to right
// 从orangered开始，经过orange，gold，lightgreen,最后到 cyan结束
orangered,orange,gold,lightgreen,cyan
)
}
12.
backdrop-filter 属性 用于元素内容遮盖，一般配合position定位使用
blur() 高斯模糊
brightness() 亮度
contrast() 对比度
drop-shadow() 阴影
grayscale() 灰度
hue-rotate() 色相旋转
invert() 反色
opacity() 透明度
sepia() 褐色
saturate() 饱和度
13.
flex-direction 属性 设置子元素的排列方向
row 默认值 主轴为水平方向,起点在左端
row-reverse 主轴为水平方向,七点在右端
column 主轴为垂直方向,起点在上沿
column-reverse 主轴为垂直方向,起点在下沿
14.
position 属性 指定一个元素,静态的/相对的/绝对的/固定的定位方法类型
static 没有定位
fixed 元素的位置相对于浏览器窗口是固定位置，即使窗口滚动元素也不会移动
relative 相对定位的元素的定位是相对其正常位置，所占据的空间不会改变
absolute 绝对定位元素的位置相对于最近已定位的父元素，定位元素的位置脱离文档流，不占据空间
sticky 粘性定位,基于用户滚动位置来定位。
15.
-webkit-appearance 属性 改变按钮和其他控件的外观，使其类似于原生控件
不同浏览器有不同的兼容性，这里有文档请自行查阅：https://blog.csdn.net/weixin_41900808/article/details/83068748
16.
outline 属性 绘制元素周围的一条线,位于边跨边缘的外围
outline-color 规定边框的颜色
outline-style 规定边框的样式
outline-width 规定边框的宽度
17.
cursor 属性 设置鼠标的光标,过于简单，请自行查阅文档：https://www.dotcpp.com/course/1145
18.
text-align 属性 指定文字水平对其方式,该属性有4个值
left 把文字排列到左边
right 把文字排列到右边
center 把文字居中
justify 文字两端对齐
19.
transfor 属性 用于改变元素的形状，大小和位置，以及创建各种动画效果
在X轴上向右移动50个像素
transform:translateX(50px);
在Y轴上向下移动50个像素
transform:translateY(50px);
同时在X轴和Y轴上移动50个像素
transform:translate(50px,50px)
这个属性常用于制作轮播图/弹出层等需要移动的场景
transform:rotate(45deg); 这个属性用于旋转元素，它可以接受一个角度值作为参数，单位为度数
顺时针旋转45度
transform:rotate(45deg);
逆时针旋转45度
transform:rotate(-45deg);
这个属性常用于制作菜单/tu'biao1需要xuan'zhuan1的场景
transform:scale(0.5);这个属性用于缩放元素的大小，它可以接受一个或两个参数，分别表示横向
和纵向的缩放比例。
横向缩小到原来的一半
transform:scaleX(0.5);
纵向放大到原来的1.5倍
transform:scaleY(1.5);
横向和纵向同时缩小到原来的一半
transform:scale(0.5,0.5);
这个属性常用于制作放大镜，图标等需要缩放的场景
transform:skew(30deg,10deg);这个属性用来扭曲元素，它可以接受一个或两个参数，分别表示横向和纵向的扭曲角度
横向扭曲30度
transform:skewx(30deg);
纵向扭曲10度
transform:skewY(10deg);
纵向横向同时扭曲
transform:skew(30deg,10deg);
这个属性常用于制作文字倾斜，图形变形等需要扭曲的场景
动画效果除了以上基本属性,transform还可以与transition和animation等属性组合使用
鼠标悬停在元素上时，元素逐渐旋转369度
.box:hover {
transform:rotate(360deg);
transition:transform 1s ease;
}
元素从左侧移入屏幕
@keyframes move-in {
form {
transform:translateX(-100%)
}
to {
transform:translaeX(0)
}
}
.box {
animation:move-in 1s ease;
}
这些属性常用于制作载入动画，悬停效果。
20.
transition 属性用于元素过度效果
transition-property 指定CSS属性的name,transition效果
transition-duration transition 效果需要指多少秒或毫秒才能完成
transition-timing-function 指定transition 效果的转速曲线
transition-delay 定义transition效果开始的时候
**JS用到的属性和方法**#
1.
let 声明变量,有块级作用域,只能在代码块内有效,代码在外部无法访问let声明的内容
也不存在变量提升,也不能重复声明同一个name的变量，同时也存在暂时性死区
2.
document 文档对象,HTML的跟节点,通过document对象可以操作所有HTML元素
document有很多属性和方法,由于属性和方法有点多,可以自行去查文档：
https://www.runoob.com/jsref/dom-obj-document.html
3.
querySelector 返回文档中指定的CSS选择器的第一元素,有几种用法
获取标签:querySelector('div')
获取class类:querySelector('.div')
获取id:querySelector('#div')
获取元素中有target的属性:querySelector('div[target]')
4.
addEventListener是DOM二级事件,用于指定元素事件监听
参数详情
4.1: event 必须,指定事件名称,类型是 string
4.2: function 指定事件触发时执行的函数
4.3: false/true,可选的布尔值,指定事件是否捕获或冒泡阶段执行
此属性可以监听很多事件:鼠标事件/键盘事件/表单事件/剪贴板事件/打印事件
拖动事件/多媒体事件/动画事件/过度事件/等等
5.
paused() 方法 暂停音乐 (属于HTML5中的 audio标签 的对象方法)
6.
play() 方法 播放音乐 (属于HTML5中的 audio标签 的对象方法)
7.
className 属性 设置或返回class属性
8.
innerHTML 方法 设置或返回元素的内容
9.
currentTime 属性 设置或返回音频当前播放的位置 (属于HTML5中的 audio标签 的对象属性)
10.
duration 属性 返回音频的总时长，返回的是秒 (属性HTML5中的 audio 标签的对象属性)
11.
parseInt() 全局函数 把字符串转换为整数，只有字符串中的第一个数字会被返回
如果字符串不能被转换为数字将返回 NaN
12.
% 求模运算符，也就是求余数 (10 % 3 = 1) 余数是1,其实就是一个数除以一个数得出来的余数
% 一般用来判断一个数是奇数还是偶数
13.
loop 属性 设置音频循环播放 (属于HTML5中的 audio标签 的对象属性)
14.
classList 属性 返回元素的类名,它有添加和删除等等方法
元素.classList.add('style') 添加类名
元素.classList.remove('style') 删除类名
元素.classList.contains('style') 检查类名是否存在
元素.classList.item(0) 使用下表返回元素的类名
元素.classList.toggle('style') 切换类名,如果类名存在，那就删除,反则添加
15.
Number() 把其它转换成数值类型
全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS播放器</title>
// 这里引入的是阿里巴巴字体图标库，请自行重新引入
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4448672_7e8a2t46r78.css">
</head>
<style>
* {
/* 内边距 */
padding: 0;
/* 外边距 */
margin: 0;
/* 全局屏蔽选中文字 */
-webkit-user-select: none;
}
body {
/* 高度 */
height: 100%;
/* 弹性盒布局 */
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
/* 高度 */
height: 100vh;
/* 内容溢出隐藏 */
overflow: hidden;
/* 背景颜色 */
background-color: #6e7cf5;
}
.shell {
/* 层叠上下文，数值越大，层级越高 */
z-index: 99;
/* 宽度 */
width: 330px;
/* 高度 */
height: 580px;
/* 边框圆角 */
border-radius: 15px;
/* 盒子阴影 */
box-shadow: 0 10px 30px #00000085;
/* 上边框 */
border-top: 1px solid rgba(189, 195, 199, 1.0);
/* 左边框 */
border-left: 1px solid rgba(255, 255, 255, .9);
/* 背景线性渐变 */
background: linear-gradient(to, right, bottom, rgba(52, 73, 94, .3), rgba(52，73，94，.3), rgba(52, 73, 94, .3));
/* 背景模糊度,高斯模糊*/
backdrop-filter: blur(16px);
/* 弹性盒 */
display: flex;
/* 内容从上到下排列 */
flex-direction: column;
/* 子元素的垂直居中，配合display:flex;使用 */
align-items: center;
/* 子元素水平居中 */
justify-content: center;
}
.cover {
/* 宽度 */
width: 280px;
/* 高度 */
height: 270px;
/* 溢出隐藏，内容不会展现出来 */
overflow: hidden;
/* 绝对定位，脱离文档流 */
position: absolute;
top: 20px;
/* 圆角边框 */
border-radius: 5px;
/* 盒子阴影 外部阴影 */
box-shadow: 0 5px 30px #7d70ecb7;
}
.cover img {
/* 宽度 */
width: 100%;
}
.shell input[type=range] {
/*
去掉系统默认的样式，常用于IOS移除原生样式
文档：https://www.w3cschool.cn/lugfe/lugfe-361m25yx.html
*/
-webkit-appearance: none !important;
/* 外边距 */
margin: 0;
/* 内边距 */
padding: 0;
/* 背景颜色 */
background: rgb(255, 255, 255);
/* 高度 */
height: 5px;
/* 宽度 */
width: 150px;
/* 去掉输入框的默认外轮廓样式 */
outline: none;
/* 小手 */
cursor: pointer;
/* 溢出隐藏，内容不会展现出来 */
overflow: hidden;
/* 圆角边框 */
border-radius: 5px;
}
.shell input[type=range]::-webkit-slider-thumb {
/*
去掉系统默认的样式，常用于IOS移除原生样式
文档：https://www.w3cschool.cn/lugfe/lugfe-361m25yx.html
*/
-webkit-appearance: none !important;
/* 背景 */
background: #ff3677;
/* 高度 */
height: 5px;
/* 宽度 */
width: 5px;
/* 圆角边框 */
border-radius: 50%;
/* 盒子阴影 外阴影 */
box-shadow: -100vw 0 0 100vw rgb(160, 200, 250);
}
.shell input[type=range]::-moz-range-thumb {
/* 背景 */
background: #ff3677;
/* 高度 */
height: 8px;
/* 宽度 */
width: 8px;
/* 边框圆角 */
border-radius: 100%;
}
.shell input[type=range]::-ms-thumb {
/*
去掉系统默认的样式，常用于IOS移除原生样式
文档：https://www.w3cschool.cn/lugfe/lugfe-361m25yx.html
*/
-webkit-appearance: none !important;
/* 背景 */
background: #ff3677;
/* 高度 */
height: 8px;
/* 宽度 */
width: 8px;
/* 边框圆角 */
border-radius: 100%;
}
.info {
/* 绝对定位,脱离文档流 */
position: absolute;
top: 305px;
/* 文字居中 */
text-align: center;
}
.info .title {
/* 字体大小 */
font-size: 35px;
/* 字体颜色 */
color: rgb(40, 45, 100);
}
.info .singer {
/* 字体大小 */
font-size: 20px;
/* 字体颜色 */
color: #6e7cf5;
}
.volume-box {
/* 隐藏元素 */
display: none;
/* 绝对定位,脱离文档流 */
position: absolute;
top: 370px;
/* 层叠上下文,数值越大,层级越高 */
z-index: 1;
padding: 0 20px;
}
.volume-box .volume-down {
/* 绝对定位,脱离文档流 */
position: absolute;
left: -15px;
/* 小手 */
cursor: pointer;
/* 字体颜色 */
color: rgb(40, 45, 100);
}
.volume-box .vloume-up {
/* 绝对定位,脱离文档流 */
position: absolute;
right: -15px;
top: 50%;
/* 垂直移动 */
transform: translateY(-50%);
/* 小手 */
cursor: pointer;
/* 字体 */
color: rgb(40, 45, 100);
}
.volume-box .vloume-up::selection {
/*
取消属性背景的任何样式，重置为元素的默认值
链接：https://linuxcpp.0voice.com/?id=90244
*/
background-color: unset;
}
.volume-box input[type=range] {
/* 高度 */
height: 5px;
/* 宽度 */
width: 150px;
/* 外边距 */
margin: 0 0 15px 0;
}
.volume-box.active {
/* 将元素设置为块级元素 */
display: block;
}
.btn-box {
/* 绝对定位，脱离文档流 */
position: absolute;
top: 400px;
/* 宽度 */
width: 100%;
/* 弹性盒 */
display: flex;
/* 水平居中 */
justify-content: center;
/* 将项目对齐到中心，但是在弹性盒子中是无效的 */
/* justify-items: center; */
}
.btn-box i {
/* 字体大小 */
font-size: 24px;
/* 字体颜色 */
color: rgb(40, 45, 100);
/* 外边距 */
margin: 0 30px;
/* 小手 */
cursor: pointer;
}
.btn-box i.active {
/* 字体颜色 */
color: #ff3677;
}
.music-box {
/* 绝对定位，脱离文档流 */
position: absolute;
top: 445px;
}
/* 修改进度条样式 */
.music-box input[type=range] {
/* 高度 */
height: 5px;
/* 宽度 */
width: 150px;
/* 外边距 */
margin: 0 0 10px 0;
}
/* 给thumb滑块添加样式 */
.music-box input[type=range]::-webkit-slider-thumb {
/* 高度 */
height: 5px;
/* 宽度 */
width: 7px;
}
.music-box .current-time {
/* 绝对定位，脱离文档流 */
position: absolute;
left: -35%;
top: 50%;
/* 垂直移动 */
transform: translateY(-50%);
/* 字体大小 */
font-size: 12px;
/* 字体颜色 */
color: #252525;
}
.music-box .duration {
/* 绝对定位，脱离文档流 */
position: absolute;
right: -35%;
top: 50%;
/* 垂直移动 */
transform: translateY(-50%);
/* 字体大小 */
font-size: 12px;
/* 字体颜色 */
color: rgb(40, 45, 100);
}
.music-box .play,
.music-box .pause {
/* 绝对定位，脱离文档流 */
position: absolute;
left: 50%;
top: 55px;
/* 水平移动 */
transform: translateX(-50%);
/* 宽度 */
width: 50px;
/* 高度 */
height: 50px;
/* 边框圆角 */
border-radius: 50px;
/* 背景颜色 */
background-color: rgb(160, 200, 250);
/* 小手 */
cursor: pointer;
/* 动画过渡 */
transition: all 10s;
}
.music-box .play i,
.music-box .pause i {
/* 字体大小 */
font-size: 36px;
/* 字体颜色 */
color: rgb(40, 45, 100);
/* 绝对定位，脱离文档流 */
position: absolute;
left: 52%;
top: 50%;
/* 垂直和平移 */
transform: translate(-48%, -50%);
}
.music-box .pause i {
/* 字体大小 */
font-size: 32px;
/* 垂直和平移 */
transform: translate(-50%, -50%);
}
.btn-box .loop {
/* 字体大小 */
font-size: 16px !important;
/* 字体颜色 */
color: rgb(40, 45, 100);
/* 外边距 */
margin: 0 0;
/* 小手 */
cursor: pointer;
}
video {
/* 绝对定位，脱离文档流 */
position: absolute;
/* 宽度 */
width: 100%;
}
</style>
<body>
<video src="./2.mp4" muted loop autoplay></video>
<div class="shell">
<!-- 图片 -->
<div class="cover">
<img src="./img/1.jpg" alt="">
</div>
<!-- 歌曲文字 -->
<div class="info">
<div class="title">有点甜</div>
<div class="singer">汪苏泷</div>
</div>
<!-- 控制加减号 -->
<div class="volume-box">
<span class="volume-down">
<i class="iconfont icon-jian1"></i>
</span>
<input type="range" class="volume-range" step="1" value="80" min="0" max="100" oninput="">
<span class="vloume-up">
<i class="iconfont icon-jia2"></i>
</span>
</div>
<!-- 图标 循环 喜欢 音量 -->
<div class="btn-box">
<i class="iconfont icon-shunxu_shunxu_ loopPlay"></i>
<i class="iconfont icon-aixin"></i>
<i class="iconfont icon-yangshengqi volumeIc"></i>
</div>
<div class="music-box">
<!-- 歌曲进度条 -->
<input type="range" class="seekbar" step="1" value="0" min="0" max="100">
<!-- 音乐 -->
<audio class="music-element">
<source src="./汪苏泷、BY2 - 有点甜.mp3">
</audio>
<!-- 音乐开始时间和结束时间 -->
<span class="current-time">0:00</span>
<span class="duration">0:00</span>
<!-- 暂停和开始播放图标 -->
<span class="play">
<i class="iconfont icon-bofang"></i>
</span>
</div>
</div>
<script>
// 获取到音乐盒子
let music = document.querySelector('.music-element')
// 获取到音乐播放和暂停按钮
let playBtn = document.querySelector('.play')
// 获取到音乐进度条
let seekbar = document.querySelector('.seekbar')
// 获取到音乐的开始时间
let currentTime = document.querySelector('.current-time')
// 获取都音乐的结束时间
let duration = document.querySelector('.duration')
// 给播放音乐和暂停按钮添加DOM二级事件
playBtn.addEventListener('click', function () {
// 如果音乐为暂停状态
if (music.paused) {
// 开始播放音乐
music.play()
// 给音乐更改样式
playBtn.className = 'pause'
// 更改音乐播放图标
playBtn.innerHTML = '<i class="iconfont icon-bofang1"></i>'
} else {
// 暂停音乐
music.pause()
// 给音乐更改样式
playBtn.className = 'play'
// 更改音乐播放图标
playBtn.innerHTML = '<i class="iconfont icon-bofang"></i>'
}
// 给音乐标签设置播放结束的事件/ended音乐或者视频播放结束的时候会触发此事件
music.addEventListener('ended', function () {
// 给音乐更改样式
playBtn.className = 'play'
// 更改音乐播放图标
playBtn.innerHTML = '<i class="iconfont icon-bofang"></i>'
// 把音乐事件设置为零
music.currentTime = 0
})
})
// loadeddata 事件在当前帧的数据加载完成而且还没有足够的数据播放视频/音频的下一帧数时触发
/*
1.帧数是什么?
简单理解一下帧数,帧数就是在1秒的时间传输图片的恭数,也可以理解为图形处理器每秒钟能过刷新几次
通常同fps表示,每一帧都是静止的图像,快速连续地显示帧便形成了运动的假象,高的帧率可以得到更流畅
更逼真的动画,每秒钟帧数fps越多,所显示的动作就会越流畅
一般来说30fps是可以接受的,所以要避免动作不流畅的最低是fps是30,除了30fps外,有些计算机视频格式
列入AVl,每秒只能提供15帧,我们之所以能过利用摄像头来看到连续不断的影像,是因为影响传感器不断摄取
画面并传输到屏幕上来,当传输速度到达一定的水平时,人眼就无法辨别画面之间的时间间隙,所以大家就能
看到连续的动态画面
2.FPS和帧数是什么意思?有什么关系呢?
游戏运行时每秒运行的帧数，简称FPS，和视频一样，FPS越大，在屏幕上的视频就越来越平滑
知道一个临界点大约是100FPS，超过这个临界点，再高的FPS都只是一个令人惊奇的数值，400FPS
和100FPS在人的视觉中几乎没有差别。
帧数为帧生成数量的简称，我们通常将帧数与帧率混淆，每一帧都是静止的图像，快速连续地显示帧
便形成了运动假象，因此高的帧率可以得到更流畅画面，更逼真的动画。
FPS
帧数就是每秒钟显示器显示的图片，帧数越高，效果越好，越流畅，通常60以上的FPS，就感觉不到卡顿
40一下，就会明显觉得卡卡的感觉，这体现在大型单机游戏里面的场景特别的明显
这里有份文档大家可以参考一下:https://zhidao.baidu.com/question/992496361909504339.html
*/
music.addEventListener('loadeddata', function () {
// 把音乐的总时长赋值给歌曲进度条
seekbar.max = music.duration
// 去掉音乐总时长的小数点并求模它的余数,返回音乐的秒数
let ds = parseInt(music.duration % 60)
// 去掉音乐的总时长小数点再除以60，再求余数，得到音乐的分钟
let dm = parseInt((music.duration / 60) % 60)
// 音乐分钟秒数相加赋值给音乐结束时间的标签
duration.innerHTML = dm + ':' + (ds < 10 ? '0' + ds : ds)
}, false)
// timeupdate 事件在音频或是视频播放时不断触发此事件/更新手动快进和快退时间
music.addEventListener('timeupdate', function () {
// 把音乐时长不断的赋值给歌曲进度条，实现实时动态更新歌曲的进度条
seekbar.value = music.currentTime
})
// 点击歌曲进度条改变音乐时间的播放/快进/快退
seekbar.addEventListener('input', function () {
// 把音乐进度条赋值给音乐时间
music.currentTime = seekbar.value
})
// timeupdate 事件在音频或是视频播放时不断触发此事件/更新音乐的开始播放时间
music.addEventListener('timeupdate', function () {
// 去掉音乐时间小数点并求余数音乐时间的余数得到音乐的秒数
let cs = parseInt(music.currentTime % 60)
// 去掉音乐时间的小数点再除以60，并求余数得到音乐的分钟
let cm = parseInt((music.currentTime / 60) % 60)
// 音乐的秒数和分钟数相加并赋值给音乐开始时间
currentTime.innerHTML = cm + ':' + (cs < 10 ? '0' + cs : cs)
}, false)
// 循环图标
let loopPlay = document.querySelector('.loopPlay')
// 给循环图标添加点击事件
loopPlay.addEventListener('click', function () {
// 如果当前音乐不是循环播放
if (music.loop == false) {
// 把音乐设置为循环播放
music.loop = true
// 给音乐图标更换样式
loopPlay.className = 'loop'
// 更换图标
loopPlay.innerHTML = '<i class="iconfont icon-xunhuan"></i>'
} else {
// 关闭循环播放
music.loop = false
// 更换图标
loopPlay.innerHTML = '<i class="iconfont icon-shunxu_shunxu_"></i>'
}
})
// 获取到爱心图标
let iconAixin = document.querySelector('.icon-aixin')
// 给爱心图标添加点击事件
iconAixin.addEventListener('click', function () {
// 给爱心图标切换样式
iconAixin.classList.toggle('active')
alert('已加入我的喜欢')
})
// 获取到音量图标
let volumeIc = document.querySelector('.volumeIc')
// 获取到音量最大层盒子
let volBox = document.querySelector('.volume-box')
// 获取到音量进度条
let volumeRange = document.querySelector('.volume-range')
// 获取到减号图标
let volumeDown = document.querySelector('.volume-down')
// 获取到加号图标
let volumeUp = document.querySelector('.vloume-up')
// 给音量图标添加点击事件
volumeIc.addEventListener('click', function () {
// 音量图标切换样式
volumeIc.classList.toggle('active')
// 音量最大层盒子切换样式
volBox.classList.toggle('active')
})
// 给减号图标添加点击事件
volumeDown.addEventListener('click', function () {
// 把减号的数值转换为数值再减10,赋值给音量进度条
volumeRange.value = Number(volumeRange.value) - 10;
// 设置减的音量
music.volume = volumeRange.value / 100;
})
// 给加号添加点击事件
volumeUp.addEventListener('click', function () {
// 把加号的数值转换为数值再加10,赋值给音量进度条
volumeRange.value = Number(volumeRange.value) + 10
// 设置加的音量
music.volume = volumeRange.value / 100
})
</script>
</body>
</html>
!给大家写文章实属不易，很累，熬夜也很多，请作者喝一瓶饮料吧，呜呜呜，有问题我会耐心解答的，呜呜呜
也可以联系我回答问题，v: i77540 我还会不断的输出更高内容的文章
332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
