滚动条可以滑动，也可以输入数据滑动

最新推荐文章于 2023-04-06 11:15:12 发布

右想小小怪

最新推荐文章于 2023-04-06 11:15:12 发布

阅读量844

点赞数 2

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_42705221/article/details/86612903

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

		<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="css/main.css">
		<link rel="stylesheet" href="css/rangeslider.css">
	</head>
	<style>
		input[type=range] {
			margin-top: 8px;
			outline: none;
			-webkit-appearance: none;
			/*清除系统默认样式*/
			width: 56% !important;
			background: -webkit-linear-gradient(#00A0CF, #E0E0E0) no-repeat, #ddd;
			/*border-bottom: 2px solid #00A0CF;*/
			background-size: 0% 100%;
			/*设置左右宽度比例*/
			height: 3px;
			/*横条的高度*/
		}
		/*拖动块的样式*/
		
		input[type=range]::-webkit-slider-thumb {
			-webkit-appearance: none;
			/*清除系统默认样式*/
			height: 16px;
			/*拖动块高度*/
			width: 16px;
			/*拖动块宽度*/
			background: #fff;
			/*拖动块背景*/
			border-radius: 50%;
			/*外观设置为圆形*/
			border: solid 1px #ddd;
			/*设置边框*/
		}
	</style>

	<body>
		<!--<section id="examples">-->
			<div id="js-example-change-value">
				<input type="range" name="range_speed" id="range_speed" value="3" oninput="cop1()" onpropertychange="cop1()"/>
				
				<!--<input type="range" min="0" max="100" id="txt" value="3" data-rangeslider onpropertychange="cop1()" oninput="cop1()">-->
				<!--<output></output>-->
				<input class="addBtn min" type="button" value="-" />
				<input class="join-money" type="text" id="test" value="3" onpropertychange="cop()" oninput="cop()">
				<input class="addBtn add" type="button" value="+" />
			</div>
		<!--</section>-->

		<script src="js/jquery.min.js"></script>
		<script src="js/rangeslider.min.js"></script>
		<script>
			function cop() {
				document.getElementById("range_speed").value = document.getElementById("test").value;
			}

			function cop1() {
				document.getElementById("test").value = document.getElementById("range_speed").value;
				$('.range_speed').css("background-size","")
			}

			$(function() {
				var $document = $(document);
				var t = $(".join-money");
				var m = $(".allMoney").text();
				var mm = $(".allMoney");

				$(".add").click(function() {
					t.val(parseInt(t.val()) + 1); //点击加号输入框数值加1
					cop();
				});
				$(".min").click(function() {
					t.val(parseInt(t.val()) - 1); //点击减号输入框数值减1
					if(t.val() <= 0) {
						t.val(parseInt(t.val()) + 1); //最小值为1
					}
					cop();
				});
				//			$(".join-money").keyup(function() {
				//				var c = $(this);
				//				if(/[^\d]/.test(c.val())) { //替换非数字字符
				//					var amount = c.val().replace(/[^\d]/g, '');
				//					$(this).val(amount);
				//				}
				//				updateMoney(); //手动输入数值金额随之改变
				//			});

			});
		</script>

		<script>
		 
		</script>

	</body>

</html>