JavaScript 3_if、for语句

71 阅读 0 评论 47 点赞

我是靠谱客的博主调皮太阳，最近开发中收集的这篇文章主要介绍JavaScript 3_if、for语句，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

条件判断

if(条件){……};
if(条件){……} else {……};
if(条件1){……} else if(条件2) {……} else if(条件3) {……} else {……};

数组

“放数据的仓库”
中括号[]，半角都好分隔，最后一个数据后面不要加逗号
数组的length属性
为数组最后塞东西用push();

for应用

for循环的使用场景：

如果想要重复执行某些代码
每次执行的时候，有个数字在变化
for循环的执行顺序：1→234→234……
1. var i = 0;
2. i < 3; 关键步骤
3. 括号里面的所有代码
4. i++

注意下面这样一个循环:
for (var i=0; i<aLi.length; i++) {
aLi[i].onclick = function(){
alert(i);
}
}

for循环案例：

<!DOCTYPE HTML>
<HTML>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>循环坐标</title>
		<style>
			div{position:absolute;width:50px;height:50px;background:#f00;left:0;color:#000;font-size:30px;line-height:50px;text-align:center;top:0;}
		</style>
		<script>
			window.onload = function(){
				var aDiv = document.getElementsByTagName('div');
				 
				for(var i=0;i<10;i++){
					document.body.innerHTML += '<div>' + i + '</div>';
				}
				
				for(var i=0;i<aDiv.length;i++){
					aDiv[i].style.left = i*50 +'px';
					aDiv[i].style.top =  i*50 + 'px';
				}
			};
		</script>
	</head>
	<body>
		
	</body>

逢十换行

    for(var i=0;i<aDiv.length;i++){
        aDiv[i].style.left = (i%10)*60 +'px';
        aDiv[i].style.top = parseInt(i/10)*60 +'px';
	}

取整
parseInt(5/2)　　// 2 丢弃小数部分,保留整数部分
Math.ceil(5/2)　　// 3 向上取整,有小数就整数部分加1
Math.floor(5/2)　　// 2 向下取整,丢弃小数部分
Math.round(5/2)　　// 3 四舍五入
6%4　　// 2 取余

V字坐标

var num = 10;
for(var j=0;j<aDiv.length;j++){
    if(j<num/2){
        aDiv[j].style.left = j*50 +'px';
        aDiv[j].style.top =  j*50 + 'px';
    }else{
        aDiv[j].style.left = j*50 +'px';
        aDiv[j].style.top =  (aDiv.length-j-1)*50 + 'px';
        }
    };