<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
<title>Document</title>
<style>
html,body{
height: %;
}
body{
margin: ;
}
body>div{
padding-top: px;
margin-left: px;
}
#tiao{
display: inline-block;
width: px;
height: px;
background: #ddd;
border-radius: px;
position: relative;
margin-left: px;
}
input{
border: px solid #ddd;
width: px;
text-align: center;
vertical-align: top;
}
#yuan{
display: inline-block;
width: px;
height: px;
border-radius: % %;
background: #177ad8;
position: absolute;
margin-top: -px;
cursor: pointer;
box-shadow: px px px #177ad8;
}
#jindu{
width: px;
height: px;
background-color: #177ad8;
border-radius: px;
}
</style>
</head>
<body>
<div>
<input type="text" id="input" value="" placeholder="0" autocomplete="off">%
<div id="tiao">
<div id="yuan"></div>
<div id="jindu"></div>
</div>
</div>
<script>
var scale =function(input,yuan,jindu,tiao){
this.input =document.getElementById(input);
this.yuan =document.getElementById(yuan);
this.jindu=document.getElementById(jindu);
this.tiao=document.getElementById(tiao);
this.tiaoW =this.tiao.offsetWidth;
this.init()
}
scale.prototype ={
init: function(){
var isfalse =false,
f = this,
m = Math,
b = document.body,
minValue =,
maxValue =;
f.yuan.onmousedown =function(e){
isfalse =true;
var X =e.clientX;
var offleft =this.offsetLeft;
var max = f.tiao.offsetWidth - this.offsetWidth;
b.onmousemove =function(e){
if (isfalse == false){
return;
}
var changeX= e.clientX;
var moveX =m.min(max,m.max(-,offleft+(changeX-X)));
f.input.value =m.round(m.max(,moveX / max) * );
f.yuan.style.marginLeft =m.max(, moveX) +"px";
f.jindu.style.width =moveX +"px";
}
}
b.onmouseup =function(){
isfalse =false;
}
f.input.onblur =function(){
var theV =this.value*;
if(theV >maxValue || theV <minValue){
alert("輸入的數值不正确");
f.input.value ="";
f.yuan.style.marginLeft ="0px";
f.jindu.style.width ="0px";
return;
}
var xxx =theV/*f.tiaoW;
f.yuan.style.marginLeft =xxx +"px";
f.jindu.style.width =xxx +"px";
}
}
}
new scale("input","yuan","jindu","tiao");
</script>
</body>
</html>
https://www.cnblogs.com/wyhlightstar/p/6655920.html
![js常用插件(四)之jsonExportExcel導出表格(背景系統必備)[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)