js 滑动条加显示数字

深藏阁楼爱情的钟 2021-07-24 22:30 359阅读 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 条评论，359人围观）

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

相关阅读

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

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

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

相关滑动提示条算法

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

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

相关 HTML5 Canvas 圆形进度条并显示数字百分比

HTML5 Canvas 圆形进度条并显示数字百分比原文链接：`https://www.cnblogs.com/moqiutao/p/6430079.html` 效

雨点打透心脏的1/2处/ 2023年01月09日 14:27/ 0 赞/ 157 阅读

相关 js编写点击按钮数字加一

标题每次单击按钮可以使数字加一在页面中加入三个input标签，类型分别是text、submit、submit，text里面的value是普通数字，其余两个是加一和清除两

野性酷女/ 2022年11月07日 11:37/ 0 赞/ 292 阅读

相关 Android—SeekBar（滑动条）

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

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

相关 ScrollView隐藏滑动条

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

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

相关滚动条左右滑动

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

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

相关 QT 进度条、滑动条、调色板、取色器

QT 进度条、滑动条、调色板、取色器一、简述记--QT 进度条、滑动条简单的使用例子，调色板练习。例子1：链接: https://p

超、凢脫俗/ 2022年04月10日 07:29/ 0 赞/ 320 阅读

相关 js 滑动条加显示数字

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

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

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

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

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