JavaScript学习实战演练(一)音乐播放器进度条

 时间:2024-10-12 01:53:43

主要是对于js的简单运用,这里只是做一个进度条

HTML+CSS

1、确认做出来的样式。在开始做一个dome前,首先要对于整个项目进行分析,虽然进度条很简单,但还是需要解析,理出思路。为了好看仿照随便找一个播放器的来用

JavaScript学习实战演练(一)音乐播放器进度条

2、分解要做的内容样式和步骤整体一个播放器,中间有纳骥姘鹚滑动条(slider),缓冲进度条(buffbar),播放进度条(processor)和控制点(controller)。

JavaScript学习实战演练(一)音乐播放器进度条

3、将页面样式显示出来具体代码如图所示。

JavaScript学习实战演练(一)音乐播放器进度条JavaScript学习实战演练(一)音乐播放器进度条JavaScript学习实战演练(一)音乐播放器进度条JavaScript学习实战演练(一)音乐播放器进度条JavaScript学习实战演练(一)音乐播放器进度条

JavaScript事件添加

1、明白具体步骤缓冲进度条进度会往前走(速度与网速有关,这里直接设置值)鼠标在进度条上点击获取位置以后进度条和控制点到达鼠标点击位置

2、先获取各个控件元素缓冲条可以先进行写入,这个并不需要用户操作。

JavaScript学习实战演练(一)音乐播放器进度条JavaScript学习实战演练(一)音乐播放器进度条

3、鼠标事件发生,主要是三个事件,左键按下(mousedown),移动(mousemove)和抬起(mouseup)。使用选择进行判断。

JavaScript学习实战演练(一)音乐播放器进度条

4、开始写鼠标左键按下事件。首先要在函数外部添加监听,监听对象是滑动条钱砀渝测(slider)。然后在case “mousedown”中写入,对控制点进行监听,获得鼠标坐标位置以后更改控制点位置。

JavaScript学习实战演练(一)音乐播放器进度条JavaScript学习实战演练(一)音乐播放器进度条JavaScript学习实战演练(一)音乐播放器进度条JavaScript学习实战演练(一)音乐播放器进度条

5、鼠标移动事件与按下事件相同。最后是抬起事件,需要将移动事件和按下事件的监听移除。

  • 怎么通过jquery获取元素长度
  • 如何使用powerdesigner建立UML组件图?
  • 剑盾 仙伊布怎么进化
  • Windows10多项剪贴板
  • Navicat 导出mysql数据库表到sql文件
  • 热门搜索
    金盏花的功效与作用 黑木耳的功效与作用 灵芝孢子粉的功效作用 藕是莲的什么 小学生预防传染病知识 花红片的功效与作用 简谱乐理知识 爆菊花什么意思 党的知识 什么牌子的沐浴露好