用js做一个可显示可拖动的缩放数值条

说明：可拖拽数值条进行值的变化；单击缩放按钮则+1（可设定）；长按则持续+5（可设定）；点击恢复则返回到最初值（可设定）；值的范围为0~100（可设定），超出则按0/100作为最终值；zoom.value内存放着值，可进行传参，应用于你的程序。

 

用js制作缩放拖动条

 controlCamera.js

/*用于云台控制界面
 * 主要功能有：	
 * 				传递方向控制参数、传递缩放参数（值为zoom.value内的值）
 * 				缩放点击效果（点击加1，长按连续加5）
 * 
 * */
				var oldvalue='';//为存放当前操作的id
		        let time="";//延时时间初始化
		        let lock=true;//锁，防止单击与长按相互冲突
				var minvalue=0;//设定范围最小值
				var maxvalue=100;//设定范围最大值
				var inivalue=50;//设定范围最初值
				var short=1;//短按增（减）量
				var long=5;//长按增（减）量

//减小数值，单击减1
			    function minus(){
			    	if(lock){
				    	var num=document.getElementById("zoom").value;
				    	if(num==minvalue){
				    		num=minvalue;
				    	}
				    	else{
				    		num=Number(num)-short;
				    	}
						document.getElementById("zoom").value=num;
						document.getElementById("showZoom").innerHTML=num;
			    	}
			    }
//减小数值，长按1s持续减5		    
				function downMinus(){
		            time=setInterval(()=>{
		            	lock=false;
				    	var num=document.getElementById("zoom").value;
				    	num=Number(num)-long;
				    	if(num{
		            	lock=false;
				    	var num=document.getElementById("zoom").value;
				    	num=Number(num)+long;
				    	if(num>maxvalue){
				    		num=maxvalue;
				    	}
						document.getElementById("zoom").value=num;
						document.getElementById("showZoom").innerHTML=num;
		             },1000)
 
		        }
//松开鼠标计时器清零，重新计时
		        function up(){
		        
		            clearTimeout(time);
		        
                    setTimeout(()=>{
               			lock=true;
           			})
		        }
//将缩放值显示
		        function range(){
		        	document.getElementById("showZoom").innerHTML=document.getElementById("zoom").value;
		        }		        
//点击事件
			    document.getElementById("repeatbtn").addEventListener("click", function(){repeat()});

 可在此处进行数值范围的设定：

 id值图示：

 

 

main.html全部内容如下：

	
		
		
		
		
		
		
		
		

		
	
	
		 

			

				

							         
				
				

					
50
				
				
%
				

							         
				
				

							         
				
				

					
				
			
		 
		     
		 
	

我的项目目录：

 

项目代码（百度云资源）：

链接：https://pan.baidu.com/s/1QIVypWhdFMEl2i3XA3W5gw?pwd=y4q5 
提取码：y4q5