js写带有提示文字的滚动条

最新推荐文章于 2024-05-13 01:07:15 发布

要膨胀的爆米花

最新推荐文章于 2024-05-13 01:07:15 发布

阅读量316

点赞数 1

分类专栏：前端文章标签： js web前端

本文链接：https://blog.csdn.net/weixin_44229136/article/details/103328830

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

	<style>
		div{
			width: 20px;
			height: 20px;
			border: 1px solid black;
			line-height: 20px;
			text-align: center;
			position: absolute;
			display: none;  //隐藏
		}
		
	</style>
	<body>
		<input type="range"min=0 max="100"value="5">
		<div></div>
		<script>
			var input=document.querySelector('input');
			var div=document.querySelector('div');
			var flag=false;
			input.οnmοusemοve=function(){
				if(flag){    //flag==true
				// console.log('(x,y):('+event.clientX+','+event.clientY+')');
				var left=event.clientX;
				if(left>135){left=135;}
				if(left<14){left=14;}
					div.style.left=left+'px';//style后面必须接  字符串   +'px'  就变成了字符串
					div.innerHTML=input.value; //将input的值赋给div
					div.style.display='block';//将div{display: none;}  隐藏 ;  这句代码是事件发生  ;div显示出来  ;下面两个事件也是这样
			}
			}
			input.οnmοusedοwn=function(){
				flag=true;
				div.style.display='none';
				// console.log('(x,y):('+event.clientX+','+event.clientY+')');
			}
			input.οnmοuseup=function(){
				flag=false;
				div.style.display='none';
			}
		</script>
	</body>

要膨胀的爆米花

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js写带有提示文字的滚动条

<style> div{ width: 20px; height: 20px; border: 1px solid black; line-height: 20px; text-align: center; position: absolute; display: none; //隐藏 } </style> &...
复制链接

扫一扫