<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type="text/css">
.container{
300px;
border:1px solid #6C9C2C;
height:25px;
margin: auto
}
#bar{
top: 10px;
position: relative;
background:#95CA0D;
height:5px;
100%;
background: rgba(0,0,0,0.2);
border-radius: 5px;
}
#gress{
150px;
position: absolute;
height: 5px;
left: 0;
top: 0;
background: green;
}
#point{
20px;
height: 20px;
background: red;
position: absolute;
top: -7.5px;
left: 150px;
}
</style>
</head>
<body>
<div class="container">
<div id="bar" >
<span id="gress"></span>
<span id="point"></span>
</div>
</div>
</body>
<script type="text/javascript">
function run(){
//获取总进度条
var bar = document.getElementById("bar");
//获取绿色进度条
var gress = document.getElementById("gress");
//获取拖动的正方形
var point=document.getElementById("point");
//拖动进度条 onmousedown 鼠标按下事件
//event 表示事件对象
//event.clientX表示鼠标按下的当前在x轴的位置 参照物是body
//this.offsetLeft 表示当前元素偏移位置 参照物是有定位的父元素
if(IsPC()){
point.onmousedown=function(event){
var event=event||window.event;//兼容ie
var left=event.clientX-this.offsetLeft;
//鼠标移动事件
document.onmousemove=function(){
var event=event||window.event;//兼容ie
var leftVal=event.clientX-left;
if(leftVal<=0){
leftVal=0;
}
//进度条总宽度
var Awidth =~~(window.getComputedStyle(bar).width.replace(/px/g,''));
if(leftVal>=Awidth){
leftVal=Awidth;
}
point.style.left=leftVal-10+'px';
gress.style.width=leftVal+"px";
}
//解除绑定
document.onmouseup=function(){
document.onmousemove=null;
};
}
}else{
point.addEventListener('touchstart',function(event){
var event=event||window.event;//兼容ie
var left=event.changedTouches[0].clientX-this.offsetLeft;
//鼠标移动事件
document.addEventListener('touchmove',function(event){
var event=event||window.event;//兼容ie
var leftVal=event.changedTouches[0].clientX-left;
if(leftVal<=0){
leftVal=0;
}
//进度条总宽度
var Awidth =~~(window.getComputedStyle(bar).width.replace(/px/g,''));
if(leftVal>=Awidth){
leftVal=Awidth;
}
point.style.left=leftVal-10+'px';
gress.style.width=leftVal+"px";
},false)
//解除绑定
document.addEventListener('touchend',function(){
document.addEventListener('touchmove',null)
},false)
},false)
}
}
//判断是pc还是手机
var IsPC=function() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
run();
</script>
</html>