js - for循環語句
阿新 • • 發佈：2018-01-05
relative 在哪裏 微積分 最好 不變 分鐘 i++ 代碼 內嵌
這個語句可以說相當方便了，特別是數據龐大的循環簡直是神器！但難點在於理解邊界在哪裏。
先來說說 for 循環的語法吧；
for(初始條件;條件判斷;條件變化){
// 循環的代碼
}
執行順序：
1. 先初始條件
2. 開始條件判斷
3. 如果成立，執行要循環的代碼塊
4. 條件變化
2，3,4,2,3,4....
直到條件判斷不成立，整個循環結束
註意：
條件判斷一直為true，循環會一直執行下去，稱之為死循環
for循環中一定要寫兩個分號
對於執行順序，那是一定要認清的，否則循環的次數就可能跟預想的有出入, 還要註意的是最好不要讓電腦陷入死循環，除非你是勇士，瀏覽器會卡死，分分鐘掛掉，所以說，作為一個正經程序員要善待瀏覽器這個好朋友哇！！！
還記得99乘法表嗎 ？是的，我們用for循環做了一個，部分代碼如下：
<script>
var box = document.getElementById(‘box‘);
//自定義一個變量str,初始為空字符
var str =‘‘;
//使用for循環確定總共有9列，即生成九個div.
// i 為列數 ， j 為行數
for(var i = 1 ; i < 10 ; i++ ){
//將str拼合起來
str +=‘<div>‘;
//每一列列數不變， 行數從 i 開始循環一直到 9
for(var j = i ;j < 10 ;j++){
var n = i + ‘x‘ +j + ‘=‘ +i*j
str += ‘<span>‘+n+‘</span>‘
}
str += ‘</div>‘
}
box.innerHTML = str;
</script>
如果用 html+css 也能做出來，但 js 相對來說寫的字符就少一些，否則81個小方塊再填不同的算式，那得整到猴年馬月啊。
單單使用 for 循環難免太乏味，所以我做了一個 if + for 的小東東 ，一個 V 形小方盒，最有特色的地方就是找規律，定位每個小盒子left,top值，一起來看：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.box{
position:relative;
width: 300px;
height: 300px;
border:1px solid #000000;
margin:0 auto;
}
.box div{
position:absolute;
width:60px;
height: 60px;
background-color: mediumpurple;
color:#fff;
}
</style>
<body>
<!--生成一個容器放置V形變換的 div -->
<div class="box">
<!--<div style="‘left:‘+i*60‘px‘;‘top:‘+(2-i)*60+‘px‘">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>-->
</div>
<script>
//聲明變量
var box = document.getElementsByClassName(‘box‘)
//自定義空標簽（用來拼接內嵌div）
var str = ‘‘
//進入 for 循環，生成5個 div
for(var i = 0 ; i< 5; i++){
//判斷i的大小，left 值從 0 以每個 div 的寬度遞增
if(i <= 2){
//當 i <= 2 時，top值從 0 的高度以每個 div 高度遞增至 2 個 div
str +=‘<div style="left:‘+i*60+‘px;top:‘+i*60+‘px">‘+i+‘</div>‘
}else{
//當 i > 2 時，top值從 2 個 div 的高度以每個 div 高度遞減至 0
str +=‘<div style="left:‘+i*60+‘px;top:‘+(4-i)*60+‘px">‘+i+‘</div>‘
}
}
//把 str 值賦給 box 裏邊的div
box[0].innerHTML = str
</script>
</body>
</html>
現在已經意識到原來數學找規律真不是白學的，雖然買菜用不上微積分，用不上找規律，但在使用計算機時，數學真的是太重要了，嗯~要重新重視起來了，。
js - for循環語句