js原生学习-初级-练习9

最新推荐文章于 2022-10-17 23:30:55 发布

小晓白的博客

最新推荐文章于 2022-10-17 23:30:55 发布

阅读量316

点赞数

分类专栏： javascript原生学习文章标签： JS原生开发学习 js javascript jquery 前端

本文链接：https://blog.csdn.net/wbbott/article/details/74452486

版权

javascript原生学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

js原生学习-初级-练习9

for的应用-小V字形练习




	
    
    
	
    
    
	9-小V字形练习
	
	<script type="text/javascript">
		window.onload = function(){
			var aDiv = document.getElementsByTagName('div');
			// 生成10个div
			for (var i = 0; i < 9; i++) {
				document.body.innerHTML += '
    
    
     
     ' + i + '
    
    ';
			};
			// 正小V
			for (var i = 0; i < aDiv.length; i++) {
				if (i>4) {
					aDiv[i].style.left = i*50 + 'px';
					aDiv[i].style.top = 200 - (i- 4)*50 + 'px';
				}else{
					aDiv[i].style.left = i*50 + 'px';
					aDiv[i].style.top = i*50 + 'px';
				}
			};
			// 左边小V
			for (var i = 0; i < aDiv.length; i++) {
				if (i>4) {
					aDiv[i].style.left = 200 - (i-4)*50 + 'px';
					aDiv[i].style.top = i*50 + 'px';
				}else{
					aDiv[i].style.left = i*50 + 'px';
					aDiv[i].style.top = i*50 + 'px';
				}
			};
			// 右边小V
			for (var i = 0; i < aDiv.length; i++) {
				if (i>4) {
					aDiv[i].style.left = i*50 - 200 + 'px';
					aDiv[i].style.top = i*50 + 'px';
				}else{
					aDiv[i].style.left = 200 - i*50 + 'px';
					aDiv[i].style.top = i*50 + 'px';
				}
			};
			// 倒的小V
			for (var i = 0; i < aDiv.length; i++) {
				if (i>4) {
					aDiv[i].style.left = i*50 + 'px';
					aDiv[i].style.top = i*50 - 200 + 'px';
				}else{
					aDiv[i].style.left = i*50 + 'px';
					aDiv[i].style.top = 200 - i*50 + 'px';
				}
			};
		};
	</script>