javaScript原生点击画方框

最新推荐文章于 2022-11-21 08:58:31 发布

前端真难

最新推荐文章于 2022-11-21 08:58:31 发布

阅读量560

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/qq_57047498/article/details/120483964

版权

先写个随机颜色

			//随机颜色
			function qou(){
				var all = "0,1,2,3,4,5,6,7,8,9,a,b,c,,e,f"
				var allty = all.split(",")
				var color = "#"
				for (var i = 0; i < 6; i++) {
					var random = parseInt(Math.random() * allty.length)
					color += allty[random]
					}
					return color
			}

创建一个div 设置css样式

	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		#box1{
			width: 100%;
			height: 100vh;
			border: #00FFFF solid 1px;
		}
	</style>

<body>
    	<div id="box1"></div>
</body>

创建点击事件

		box1.onmousedown = function(c){
				let x = c.pageX
				let y = c.pageY
				//创建一个div标签
				let div = document.createElement("div")
				//鼠标移动时获取
				box1.onmousemove=function(e){
					e = e||window.event
					//获取位置
					let aa = qou()
					let x2 = e.pageX
					let y2 = e.pageY
					//取最小值
					var mixx = Math.min(x,x2)+"px"
					var mixy = Math.min(y,y2)+"px"
					//求绝对值
					let wi = Math.abs(x-x2)+"px"
					let he = Math.abs(y-y2)+"px"
				
					div.style.width = wi
					div.style.height = he
					div.style.position="absolute"
					div.style.top = mixy
					div.style.left = mixx
					div.style.border = "solid  5px" 
					div.style.borderColor = aa
				}
				box1.appendChild(div)
				box1.onmouseup=function(){
					box1.onmousemove = null
				}
				
			}