js 移动端滑动评分滑动改变进度条

最新推荐文章于 2022-09-27 16:32:53 发布

阿髙

最新推荐文章于 2022-09-27 16:32:53 发布

阅读量730

点赞数

本文链接：https://blog.csdn.net/weixin_43515759/article/details/100034774

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<title></title>
		<style>
			.pf {
				width: 90%;
				height: 50px;
				margin: 0 auto;
				background: #aaa;
				border-radius: 100px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.pf .continer {
				background: #fff;
				width: 97%;
				height: 85%;
				border-radius: 100px;
				overflow: hidden;
				position: relative;
			}

			.pf .scoll {
				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 100px;
				background: linear-gradient(to right, rgb(133, 133, 243), rgb(241, 86, 85));
				top: 0;
				transition: all 0.1s;
			}

			.pf .continer .text {
				height: 100%;
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				z-index: 2;
				position: absolute;
				top: 0;
				left: 0;
			}

			.pf .continer .text span {
				width: 20%;
				text-align: center;
				/* border-right: 2px solid #fff; */
			}

			.pf .continer .text span:nth-last-of-type(1) {
				border-right: 0
			}
		</style>
	</head>
	<body>
		<div class="pf" id="pf">
			<div class="continer" id="continer">
				<div class="text">
					<span>X</span>
					<span>7</span>
					<span>8</span>
					<span>9</span>
					<span>10</span>
				</div>
				<div class="scoll" id="scoll"></div>
			</div>
		</div>
		<div class="num" id="num">评分</div>
		<script>
			window.onload = function() {

				var scoll = document.querySelector("#scoll");
				var continer = document.querySelector("#continer");
				var num = document.querySelector("#num");

				continer.addEventListener('touchmove', function(event) {
					event.preventDefault();
					var touch = event.targetTouches[0];
					var clientX = touch.clientX;
					var continerWidth = continer.clientWidth;
					var percent = clientX / continerWidth;
					if (percent >= 0.19 && percent <= 1) {
						scoll.style.width = percent * 100 + "%";
						changeWidthEvent(percent)
					}

				})

				function changeWidthEvent(p) {
					var text = '';
					text = (p / 2 * 10 + 6 - 1).toFixed(1)
					if (text == "6.0") {
						text = '不及格';
					}
					// console.log(p, text)
					num.innerText = text;
				}

			}
		</script>
	</body>
</html>

阿髙

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js 移动端滑动评分滑动改变进度条

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-...
复制链接

扫一扫