js拖拽实现动态评分以及九宫格的实现

最新推荐文章于 2023-03-31 09:04:33 发布

布朗狗熊

最新推荐文章于 2023-03-31 09:04:33 发布

阅读量462

点赞数 1

分类专栏： JavaScript CSS HTML

本文链接：https://blog.csdn.net/weixin_40196539/article/details/98237336

版权

JavaScript 同时被 3 个专栏收录

39 篇文章 4 订阅

订阅专栏

HTML

30 篇文章 0 订阅

订阅专栏

CSS

25 篇文章 0 订阅

订阅专栏

拖拽实现动态评分效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,i,em{padding: 0;margin: 0;}
			i,em{font-style: normal;}
			#box{
				position: relative;
				height: 300px;
				width: 400px;
				margin: 50px auto;
				line-height: 30px;
			}
			#sp1{
				position: absolute;
				text-align: center;
				left: 0;
				display: block;
				width: 30px;
				height: 30px;
				border:solid #0f0 1px;
			}
			i{
				position: absolute;
				left: 40px;
				width: 30px;
				height: 30px;
				display: block;
			}
			em{
				position: absolute;
				right: 0;
				width: 30px;
				height: 30px;
				display: block;
			}
			#box1{
				position: absolute;
				left: 60px;
				top:5px;
				width: 300px;
				height: 20px;
				border-radius: 15px;
				border: 1px solid #cecece;
			}
			#box2{
				width: 0px;
				height: 20px;
				border-radius: 15px 0 0 15px;
				background: #00FF00;
			}
			#sp2{
				height: 25px;
				top:-3px;
				width: 5px;
				border-radius: 5px;
				position: absolute;
				background: #008000;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<span id="sp1">0.0</span>
			<i>0</i>
			<div id="box1">
				<div id="box2">
					<span id="sp2"></span>
				</div>
			</div>
			<em>5</em>
		</div>
		<script type="text/javascript">
			function $(id){//取id函数
				return document.getElementById(id);
			}
			//获取dom对象
			var oSp1 = $("sp1");
			var oSp2 = $("sp2");
			var oBox1 = $("box1");
			var oBox = $("box");
			var oBox2 = $("box2");
			
			oSp2.onmousedown = function(e){
				var evt = e || event;
				var x =  evt.clientX - oSp2.offsetLeft;
				
				document.onmousemove = function(e){
					var evt = e || event;
                    oSp2.style.left = evt.clientX - x + "px";
                    oBox2.style.width  = event.clientX - x + "px";
                   var biLi = 5*(evt.clientX - x)/280;//按比例变化

                   if (evt.clientX - x<=0) {
                       oSp2.style.left = "0";
                       biLi = 0;
                   }
                   if (event.clientX - x>=280) {
                       oSp2.style.left = "300px";
                       oBox2.style.width = "300px";
                       biLi = 5;
                   }
                  oSp1.innerHTML = biLi.toFixed(1);//取一位小数
               }
               document.onmouseup = function () {
                   document.onmousemove = null;
                   document.onmouseup = null;
               }

               return false;
           
			}
		
		</script>
	</body>
</html>

九宫格效果

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>九宫格</title>
		<style type="text/css">
			#wrap {
				position: relative;
				margin-left: 50px;
			}
			
			#wrap div {
				width: 100px;
				height: 100px;
				line-height: 100px;
				font-size: 50px;
				position: absolute;
				border-radius: 10px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div id="wrap">

		</div>

		<script type="text/javascript">
			//创建div
			var oWrap = document.getElementById("wrap");
			var mt = ml = 10; //设置间距
			for(var i = 0; i < 3; i++) { //行数
				for(var j = 0; j < 3; j++) { //列数
					var oDiv = document.createElement("div"); //创建div
					oWrap.appendChild(oDiv); //放入大盒子里
					oDiv.style.top = i * (oDiv.offsetHeight + mt) + "px"; //每一行的定位
					oDiv.style.left = j * (oDiv.offsetWidth + ml) + "px"; //每一列的定位
					oDiv.style.background = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")"; //每个div加随机颜色
				}
			}

			//向div中放置文本
			var arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I"];
			var aItems = oWrap.children;
			for(var i = 0; i < aItems.length; i++) {
				aItems[i].innerHTML = arr[i];
			}

			//拖拽     onmousedown   onmousemove  onmouseup
			for(var i = 0; i < aItems.length; i++) {
				aItems[i].onmousedown = function(e) {
					var evt = e || event;
					//获取鼠标相对于事件源的坐标
					var x = evt.offsetX;
					var y = evt.offsetY;

					var dragItem = this; //下面用到div
					var cloneNode = dragItem.cloneNode();//克隆新节点
					oWrap.replaceChild(cloneNode, dragItem);//替换
					oWrap.appendChild(dragItem);//放入div中
					//设置样式
					cloneNode.style.border = "1px dashed #eee";
					dragItem.style.zIndex = 1;

					document.onmousemove = function(e) {
						var evt = e || event;
						var _left = evt.clientX - x - oWrap.offsetLeft;
						var _top = evt.clientY - y - oWrap.offsetTop;
						dragItem.style.top = _top + "px";
						dragItem.style.left = _left + "px";
						return false;
					}
					document.onmouseup = function() {

						document.onmousemove = null;
						//两个空数组来去最小索引,也可以用Math.min.apply()方法来取最小索引
						var disArr = [];
						var newArr = [];
						for(var i = 0; i < aItems.length - 1; i++) {
							var disx = dragItem.offsetLeft - aItems[i].offsetLeft;
							var disy = dragItem.offsetTop - aItems[i].offsetTop;
							var dis = Math.sqrt(Math.pow(disx, 2) + Math.pow(disy, 2));
							disArr.push(dis);
							newArr.push(dis);
						}
						//排序，数组发生改变
						disArr.sort(function(a, b) {
							return a - b;
						})

						//取对应最小索引值
						var minVal = disArr[0];
						var minIndex = newArr.indexOf(minVal);

						//交换位置
						dragItem.style.left = aItems[minIndex].style.left;
						dragItem.style.top = aItems[minIndex].style.top;

						aItems[minIndex].style.left = cloneNode.style.left;
						aItems[minIndex].style.top = cloneNode.style.top;

						oWrap.removeChild(cloneNode);

						document.onmouseup = null;

					}
					return false;
				}
			}
		</script>
	</body>

</html>

布朗狗熊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js拖拽实现动态评分以及九宫格的实现

拖拽实现动态评分效果<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,i,em{padding: 0;margin: 0;} i,em{fon...
复制链接

扫一扫