js实现图片的随机定位但不超出可视区域 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			span{
				position: absolute;
				top: 0px;
				left: 0px;
				display: block;
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background-color: #00498B;
				font-size: 60px;
				line-height: 100px;
				color: #fff;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<!-- <span></span> -->
	</body>
</html>

window.onload = function(){
		//初始化圆
		for(var i=0; i<16; i++){
			document.body.innerHTML += '<span style="background-color:'+randomColor()+'">'+ i +'</span>';
		}
		//获取元素
		var spanS = document.getElementsByTagName('span');
		// console.log(spanS,getStyle(spanS[0],'left'),randomColor())
		//获取可视屏幕宽高 - 元素的宽度或高度
		var Width = document.documentElement.clientWidth-100;
		var Height = document.documentElement.clientHeight-100;
		console.log(Width,Height);
		for(var i=0; i<spanS.length; i++){
			spanS[i].style.top = random(0,Height) +'px';
			spanS[i].style.left = random(0,Width) +'px';
		}
		// console.log(random(0,Height))
		
		
		// 随机颜色
		function randomColor() {
			return "rgb(" + random(0, 250) + "," + random(0, 250) + "," + random(0, 250) + ")";
		}
		// 范围随机数
		function random(max, min) {
			return Math.round(Math.random() * (max - min) + min);
		}
		//获取样式
		function getStyle(ele,attr){
			if(ele.currentStyle){
				return ele.currentStyle[attr];
			}else{
				return getComputedStyle(ele)[attr];
			}
		}
	}

 

posted @ 2020-04-04 12:44  JackieDYH  阅读(4)  评论(0)  编辑  收藏  举报  来源