<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />
<meta name="format-detection" content="telephone=no, address=no, email=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Document</title>
<style type="text/CSS">
input[type="range"] {
width: 7.407407rem;
height: 0.037037rem;
background-color: #a1a0a0;
position: absolute;
left: 0px;
top: 0rem;
margin: 0px;
margin-top: 1rem;
-webkit-appearance: none;
z-index: 1;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: default;
background-color: #da4443;
width: 0.351852rem;
height: 0.351852rem;
border-radius: 50%;

}
input.rangeBg[type="range"]{
width: 0rem;
height: 0.037037rem;
background-color: #da4443;
z-index: 10;
}
input.rangeBg[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: default;
background-color: transparent;
width:0rem;
height: 0rem;
border-radius: 50%;

}
</style>
</head>
<body>
<input id="range" type="range" value="0" min="0" max="100" onchange="change()" />
<input id="rangeBg" class="rangeBg" type="range" value="0" min="0" max="100"/>
<script>
//获取屏幕的宽度 计算font-size
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = clientWidth / 10 + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
function change() {
var value = document.getElementById('range').value;
var nub = value/100 * document.getElementById('range').offsetWidth;
document.getElementById('rangeBg').style.width = nub + 'px';
}
</script>
</body>
</html>

input range音乐进度条的更多相关文章

  1. android 播放音乐-进度条

    今天学渣研究了一下使用MediaPlayer播放音乐时加入进度条,进度条如今用的是android自带的seekbar,后期会跟换UI的,在之前可以播放音乐的基础上,如今加入的主要功能有两个: 1实时显 ...

  2. 基于Vue的事件响应式进度条组件

    写在前面 找了很多Vue 进度条组件!,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和 ...

  3. Python的进度条的制作

    import sys,time #导入模块 for i in range(50): #进度条的长度 sys.stdout.write("#") #进度条的内容,这里要注意了,pyc ...

  4. input type=range 进度条的自定义样式

    /* 自定义进度条样式 */ .v_my input[type=range] { -webkit-appearance: none;/*清除系统默认样式*/ width: .8rem; backgro ...

  5. html上传图片（进度条变化）、音乐

    <html> <head> <title>$Title$</title> </head> <link href="css/b ...

  6. 【消灭代办】第5周 - null拷贝,input自适应,进度条加载,颜色随机值

    2018.12.10 代办一:javascript中js怎么拷贝null的值 null属于简单类型的数值,直接进行拷贝即可: 2018.12.11 代办二:怎么让input自适应宽度? 这样是写下代办 ...

  7. MediaPlayer音乐播放器、上一首、下一首、播放、停止、自动下一首、进度条

    本文介绍MediaPlayer的使用.MediaPlayer可以播放音频和视频,另外也可以通过VideoView来播放视频,虽然VideoView比MediaPlayer简单易用,但定制性不如用Med ...

  8. Android——音乐播放器完善——进度条显示当前播放进度，加可拖动进度条（未待解决完问题）

    效果: 问题:可拖动进度条随进度条移动时,会致使音乐卡顿(待解决) xml <?xml version="1.0" encoding="utf-8"?&g ...

  9. Android MediaPlayer播放音乐并实现进度条

    提前工作,往sd卡里放音乐文件 1.布局文件main.xml <?xml version="1.0" encoding="utf-8"?> < ...

随机推荐

  1. 452 Minimum Number of Arrows to Burst Balloons 用最少数量的箭引爆气球

    在二维空间中有许多球形的气球.对于每个气球,提供的输入是水平方向上,气球直径的开始和结束坐标.由于它是水平的,所以y坐标并不重要,因此只要知道开始和结束的x坐标就足够了.开始坐标总是小于结束坐标.平面 ...

  2. AJPFX区分this和super

    this和super的区别No.区别thissuper1操作属性this.属性:表示调用本类中的属性,如果本类中的属性不存在,则从父类查找super.属性:表示调用父类中的属性2操作方法this.方法 ...

  3. （6）《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记

    1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距—— ...

  4. 聊5块钱P2V

    上一秒还在写代码,下一秒就跑机房干活. 这台机器产制石器时代,重启一次后再就启动不了了.这个故障处理的方式我们以后再谈. 今天聊聊啥是P2V,国人总喜欢弄些稀奇古怪的定义来证明自己技术很牛X,就跟当年 ...

  5. html中 accept 属性

    1.HTML <input> 标签的 accept 属性 在文件上传中使用 accept 属性,本例中的输入字段可以接受 GIF 和 JPEG 两种图像: <form> < ...

  6. 【转帖】迅为iTOP-iMX6开发板 Ubuntu系统下WiFi模块mt6620的移植

    本文转自迅为论坛 :http://www.topeetboard.com 文档提供的文件如下. wpa_supplicant 拷贝到开发板 Ubuntu 系统的 /sbin 目录下,如何移植 wpa_ ...

  7. day23-2 __call__、__str__和__del__

    目录 __call__ __str__ __del__ __call__ 对象后面加括号调用时,会自动触发执行 注:构造方法的执行是由创建对象触发的,即:对象=类名();而对于__call__方法的执 ...

  8. HTTP的缺点与HTTPS

    a.通信使用明文不加密,内容可能被窃听 b.不验证通信方身份,可能遭到伪装 c.无法验证报文完整性,可能被篡改 HTTPS就是HTTP加上加密处理(一般是SSL安全通信线路)+认证+完整性保护

  9. CAD交互绘制带颜色宽度的直线（com接口）

    用户可以在控件视区任意位置绘制直线. 主要用到函数说明: _DMxDrawX::DrawLine 绘制一个直线.详细说明如下: 参数 说明 DOUBLE dX1 直线的开始点x坐标 DOUBLE dY ...

  10. HTML head meta标签详细

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...