前端移动端刻度尺实现

最新推荐文章于 2023-09-27 18:41:00 发布

qq_43476178

最新推荐文章于 2023-09-27 18:41:00 发布

阅读量2.6k

点赞数 4

分类专栏： H5 文章标签：刻度尺 H5 前端

本文链接：https://blog.csdn.net/qq_43476178/article/details/97758276

版权

H5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言：每个刻度都是使用div实现的，再添加css样式。
效果图：在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>尺子(ruler)</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.container {
				position: relative;
				width: 220px;
				margin: 0 auto;
				border: 1px solid #A52A2A;
			}
			
			.box {
				width: 100%;
				box-sizing: border-box;
				height: 100%;
				padding-bottom: 10px;
				padding-top: 20px;
				overflow-y: hidden;
				overflow-x: auto;
				font-size: 12px;
			}
			
			.box::-webkit-scrollbar {
				display: none;
			}
			
			.scale {
				height: 100%;
				display: flex;
				position: relative;
				z-index: 2;
			}
			
			.scale>div {
				width: 1px;
				padding: 0 5px;
				border-bottom: 1px solid #A52A2A;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
			}
			
			.scale>div:first-child {
				padding-left: 109.5px;
			}
			
			.scale>div:last-child {
				padding-right: 109.5px;
			}
			
			.scale>div>div {
				width: 1px;
				text-align: center;
				height: 10px;
				background: #A52A2A;
			}
			
			.Pointer {
				position: absolute;
				top: 0px;
				left: 50%;
				margin-left: -10px;
				border: 10px solid #A52A2A;
				border-color: #A52A2A transparent transparent transparent;
			}
			.mask{
				width: 100%;
				height: 100%;
				position: absolute;
				top:0;
				display: flex;
				justify-content: space-between;
			}
			.mask>div{
				width: 100px;
				background: rgba(200,200,200,0.2);
			}
		</style>
	</head>
	<body>
		<div class="rule"></div>
	</body>
</html>
<!-- <script src="js/index.js"></script> -->
<script>
	let setting={
		width			:300				,	//宽度
		height			:90					,	//高度
		minScale		:0					,	//最小刻度
		maxscale		:200				,	//最大刻度
		shortScaleLength:15					,	//短刻度长度
		longScaleLength	:5					,	//长刻度长度
		shortScaleColor	:'black'			,	//短刻度颜色
		scaleSpace		:5					,	//刻度间隔
		longScaleColor	:'black'			,	//长刻度颜色
		bottomColor		:'1px solid black'	,	//下边框线颜色
		// pointerColor	:						//指针颜色
	}
	function insertOption(setting){
		var html = "<div style='text-align: center;'>刻度:<span class='scroll_num'>0</span></div><div class='container' style='height:"+setting.height+"px;width:"+setting.width+"px;'><div class='box'><div class='scale'>";
		for (i = setting.minScale; i <= setting.maxscale; i++) {
			var flag = i % 5;
			if (!flag) {
				html += "<div style='padding:0 "+setting.scaleSpace+"px;border-bottom:"+setting.bottomColor+"'><span>"+i+"</span><div style='background:"+setting.shortScaleColor+";height:"+setting.shortScaleLength+"px'></div></div>";
			} else {
				html += "<div style='padding:0 "+setting.scaleSpace+"px;border-bottom:"+setting.bottomColor+"'><span></span><div style='background:"+setting.longScaleColor+";height:"+setting.longScaleLength+"px'></div></div>";
			}
		}
		html+="</div><div class='Pointer'></div><div class='mask'><div style='width:"+(setting.width/2-10)+"px;'></div><div style='width:"+(setting.width/2-10)+"px;'></div></div></div></div>"
		document.getElementsByClassName('rule')[0].innerHTML=html;
		/* 样式 */
		let elementScale=document.getElementsByClassName('scale')[0].childNodes;
		elementScale[0].style.paddingLeft=setting.width/2-0.5+'px';
		elementScale[elementScale.length-1].style.paddingRight=setting.width/2-0.5+'px';
	}
	function isScroll(){
		let timer = null; // 定时器
		let t1 = 0;
		let t2 = 0;
		/* 监听滚动停止 */
		function isScrollEnd() {
			t2 = document.getElementsByClassName('box')[0].scrollLeft;
			if (t2 === t1) {
				document.getElementsByClassName('box')[0].scrollLeft = (document.getElementsByClassName('scroll_num')[0].innerHTML *
					(setting.scaleSpace*2+1));
			}
		}
		document.getElementsByClassName('box')[0].onscroll = function(event) {
			event.preventDefault();
			clearTimeout(timer);
			t1 = this.scrollLeft;
			timer = setTimeout(isScrollEnd, 300);
			/* 修改此处进行数值的精确 */
			//个位
			document.getElementsByClassName('scroll_num')[0].innerHTML = Math.round(t1 / (setting.scaleSpace*2+1));
			//十分位
			// document.getElementsByClassName('scroll_num')[0].innerHTML = (t1 / (setting.scaleSpace*2+1)).toFixed(1);
		}
	};
	insertOption(setting)
	isScroll();
</script>

直接拷贝代码就可以看到效果