js 滑动条加显示数字

深藏阁楼爱情的钟 2021-07-24 22:30 376阅读 0赞

主要是让div的左边距随着鼠标x坐标改变而改变

<html>
    	<head>
    		<meta  charset="utf-8"/>
    		<title></title>
    		<style>
    			
    			.show{ 
    				width:30px;
    				height:30px;
    				border:solid 1px pink;
    				position:absolute;
    				text-align: center;
    				display: none;
    			}
    		</style>
    	</head>
    	<body>
    		<span>数值</span><input type="range" max="100" min="0" class="ra"/>
    		<div class="show">
    			
    		</div>
    		
    		<script>
    			
    			var show=document.querySelector(".show");
    			var ra=document.querySelector(".ra");
    			var flag=false;
    			
    			ra.onmousedown=function()
    			{ 
    				//div显示
    				
    				show.style.display="block";
    				//div内有range值
    				show.innerHTML=ra.value;
    				
    				var templeft=event.clientX;
    				show.style.left=templeft-15+"px";
    				flag=true;
    			}
    			
    			ra.onmousemove=function(){ 
    				//范围校验
    				//div随range变化的值
    				
    				
    				if(flag){ 
    					
    					var templeft=event.clientX;
    					if(templeft>=43&&templeft<201){ 
    				
    						show.style.left=templeft-15+"px";
    						show.innerHTML=ra.value;
    					}
    				}
    			}
    			ra.onmouseup=function(){ 
    				//添加鼠标抬起事件
    				show.style.display="none";
    				//鼠标消失
    				flag=false;
    			}
    		</script>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，376人围观）

还没有评论，来说两句吧...

相关阅读

相关原生 JS 实现进度条加载

1.获取节点的样式通过元素.style.样式只能获取到内联样式的值，就是style写在元素里面的值，不能获取嵌入式和外联样式的值 <div cla

太过爱你忘了你带给我的痛/ 2023年07月18日 09:44/ 0 赞/ 2 阅读

相关 js进度条—模拟加载—画板

\\ js通过canvas来画图模拟进度条加载动画 \\ html： <div class="wai"> <div>模拟加载—>加载进度：

骑猪看日落/ 2023年05月29日 05:01/ 0 赞/ 170 阅读

相关使用js拖拽功能实现滑动条实例教程

拖拽属于前端常见的功能，很多效果都会用到js的拖拽功能。滑动条的核心功能也就是使用js拖拽滑块来修改位置。一个完整的滑动条包括滑动条、滑动痕迹、滑块、文本等元素，先把htm

曾经终败给现在/ 2023年05月22日 22:12/ 0 赞/ 37 阅读

相关 JS上传文件显示进度条

用户反馈：图片上传过程中，如果网络比较慢，会发现上传图片后没有一点反应，体验性很差，图片回显也比较慢解决思路：通过XMLHttpRequest的progress来实现

深碍√TFBOYSˉ_/ 2023年02月24日 12:29/ 0 赞/ 3 阅读

相关滑动提示条算法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

╰半橙微兮°/ 2023年02月10日 05:25/ 0 赞/ 45 阅读

相关 Android—SeekBar（滑动条）

SeekBar介绍在我们使用音乐播放器或者是视频播放器时，下面都会有一个进度条，拖动进度条即可改变音乐的进度和视频播放的进度，那么在安卓里面也有相应的工具类，它就是Se

た入场券/ 2022年07月15日 13:30/ 0 赞/ 290 阅读

相关 ScrollView隐藏滑动条

在java代码中： scrollView.showsVerticalScrollIndicator = FALSE;//禁止竖向滑动条显示 scrollVie

逃离我推掉我的手/ 2022年06月08日 02:26/ 0 赞/ 334 阅读

相关滚动条左右滑动

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na

妖狐艹你老母/ 2022年05月13日 07:54/ 0 赞/ 353 阅读

相关 js 滑动条加显示数字

主要是让div的左边距随着鼠标x坐标改变而改变 <html> <head> <meta charset="utf-8"/> <ti

深藏阁楼爱情的钟/ 2021年07月24日 22:30/ 0 赞/ 377 阅读

相关滚动条加载后滑动到内容底部,且随内容增加而自动滑动

componentDidMount() { // 初始显示列表 window.scrollTo(0, document.body.scr

╰+哭是因爲堅強的太久メ/ 2021年07月24日 18:04/ 0 赞/ 369 阅读