js 滑动条加显示数字

最新推荐文章于 2022-10-24 14:01:47 发布
最新推荐文章于 2022-10-24 14:01:47 发布
阅读量2.2k 收藏 3
点赞数 2
分类专栏： javaScript 文章标签： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43294560/article/details/103275699
版权

主要是让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>
神奇大叔
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5鼠标拖动游标滑块条显示百分比代码
06-12
一款横条上可以有指定多个游标，每个游标都能拖动，调整显示占用的百分比效果的HTML5鼠标拖动游标滑块条显示百分比代码。
滚动条显示
weixin_53935634的博客
06-28 314
先设置一高度 使用scrollbar属性设置滚动条样式::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-button 滚动条两端的按钮::-webkit-scrollbar-track 外层轨道::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）::-webkit-scrollbar-thumb 滚动条里面可以拖动的那个::-webkit-scrollbar-corner 边角::-webkit-resizer 定
用js做一个可显示可拖动的缩放数值条
滔滔不会轻易狗带
10-24 380
用js做一个可显示可拖动的缩放数值条。可拖拽数值条进行值的变化；单击缩放按钮则+1（可设定）；长按则持续+5（可设定）；点击恢复则返回到最初值（可设定）；值的范围为0~100（可设定），超出则按0/100作为最终值；zoom.value内存放着值，可进行传参，应用于你的程序。用js制作缩放拖动条。
纯js实现滑动条
Sissi的个人笔记
09-07 4619
效果图 页面构成 <span class="box" id="box-lj-sgj"> <i class="hd"></i> <i class="hdt"></i> </span> css .tab-con .box,.tab-con .box .hd,.tab-con .box .hdt{ dis...
HTML5鼠标拖动滑块条百分比特效代码
03-20
HTML5鼠标拖动滑块条百分比代码是一款横条上可以有指定多个游标，每个游标都能拖动，显示占用的百分比效果。
javascript 时间滑动条
10-29
JavaScript时间滑动条是一种用户界面元素，用于让用户以直观的方式选择或输入时间。它通常包含一个可拖动的滑块，表示时间的流逝，而滑块的位置则对应于特定的时间值。这种控件在需要用户指定时间范围或者精确时间点...
可以全部展开的新闻滑动条控件JS代码.zip
12-10
总的来说，"可以全部展开的新闻滑动条控件JS代码"应该包含了实现以上功能的JavaScript代码，通过解压并查看这些文件，你可以学习到如何利用JS和CSS创建一个可操作的新闻滑动条，进一步提升你的前端开发技能。
Jquery实现滑动数值选择
10-09
然后，在JavaScript中初始化滑动条。使用`$("#slider").slider()`方法，可以设置滑动条的属性，例如最小值、最大值、初始值和回调函数： ```javascript $(document).ready(function() { $("#slider").slider({ ...
js-swiper-分页标签加进度条-自定义位置加进度条
07-30
Swiper 是一个流行的JavaScript滑动插件，常用于创建轮播图、滑动导航和其它交互式的滚动效果。在这个特定的场景中，我们关注的是如何在Swiper中添加分页标签以及进度条，并且能够自定义它们的位置。下面将详细探讨...
jQuery点击星星评分数字显示出来代码.zip
最新发布
09-27
`<input type="range">`标签可以创建一个滑动条，通过设置`min`、`max`、`step`属性，我们可以将其定制为星星评分条。例如，我们可以设定`min`为1，`max`为5，`step`为1，表示从1星到5星的评分。 接下来，jQuery...
js实现数字滚动显示(最短滚动版)
ruienger的博客
10-20 5286
前言 标题解释： 数字滚动： 数字 0 变为 5，显示该数字的元素向上滚动最后显示 5 最短滚动： 数字 9 变为 1，向下滚动依次显示 9 - 0 - 1 如果这是你需要的‘组件’，那就继续吧！ 需求 存在两个数字 start、end，需要实现一个类似滚轮滚动的效果，由 start 滚动到 end，其中，每次滚动都需要以尽量少的次数滚动 例如：9 - 1 ==> 9 - 0 - 1; 2 - 0; 2 - 1 - 0 实现 首先，一步步的来，我们先实现滚动效果，暂不考虑 最短滚动 先来一个窗口用来
CSS实现自定义滑动条(input)，动态监听改变数值
weixin_42063071的博客
06-04 6820
有时候我们需要一个滑杆滑动，可以移动的同时，还能够获取到从小到大的数值，如图：向后滑动值越大，能够做到实时监听。我的可能不是最优解决方案，仅供大家参考！代码如下：这是建立一个input元素，最小值为0，最大值为100，每次加1，默认值为10.&lt;input type="range" min="0" max="100" step="1" value="10"&gt;样式如下：input[ty
html5自带滑动条(input type=range)实现实时显示滑动值
热门推荐
choumoyin5005的博客
10-27 1万+
一个滑动条的实时显示： 方法一：javascript原生代码实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> &...
使用Vue3和JavaScript 实现数字实时动态滚动
程序员雅痞的博客
08-17 796
记录实现营业额的数字实时动态滚动的实现过程。
（适用于大部分浏览器）js+css 实现 滚动条滑动时显示，不滑动时隐藏
ck07
04-09 6427
思路 把原有的滚动条隐藏，创建个新的滚动条，并拓展其宽度，达到隐藏的效果,而判断滚动条是否滚动，保存原有的滚动条到顶部的距离，看是否发生改变，做出相应的判断。 html &lt;body&gt; &lt;div id='wrapper'&gt; ... ... &lt;/div&gt; &lt;/body&gt; css b...
打开的页面全部显示html,【求助】页面上显示几个数字，打开html的时候希望能滚动起来...
weixin_39661405的博客
06-03 171
该楼层疑似违规已被系统折叠隐藏此楼查看此楼*{padding: 0;margin: 0;}div{width:60px;height:50px;border:1px solid red;overflow: hidden;position: relative;margin: 200px 400px;}ul{width:200px;height:20px;float:left;position: a...
html 滑块不断显示数值,显示HTML5范围“滑块”旁边的值
weixin_33556941的博客
06-18 801
我有一个范围“滑块”，我希望它可以显示它旁边的数据库中的值(次数)。 以下是我到目前为止。最早的和最新的日期在滑动条之前回声良好，所以我知道我从DB中获得它们，但是当我希望它们显示在滑动条旁边时，它们不会。我只是从0到100的值。任何想法来解决这个问题？谢谢显示HTML5范围“滑块”旁边的值$sqltime = "SELECT Time FROM Test";$resulttime = mysql...
JS——背景色的滑动效果以及输入框的状态切换效果实现
Bonsoir777的博客
08-23 716
在之前的文章中有分享过利用HTML+CSS制作静态页面（例如前文的阿里矢量图标库官网的实现），但之前的实现过程并未涉及JS的内容，今天实现了几个小功能，其中运用到了之前所讲的知识点，在这里一并分享给大家吧
input滑动条显示数字
03-31
要在input滑动条上显示数字，可以使用JavaScript和CSS。以下是一个示例： HTML代码： ``` <input type="range" id="slider" min="0" max="100" step="1"> <div id="slider-value"></div> ``` JavaScript代码： ``` var slider = document.getElementById("slider"); var output = document.getElementById("slider-value"); output.innerHTML = slider.value; slider.oninput = function() { output.innerHTML = this.value; } ``` CSS代码： ``` #slider-value { margin-top: 10px; font-size: 18px; text-align: center; } ``` 这将在滑动条下方显示一个带有数字的div。每当滑动条的值更改时，JavaScript会更新div中的数字。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值