functionrandom_bg_color() { // Get a random number between 64 to 256
// (for getting lighter colors) let red = Math.floor(Math.random() * 255) + 64; let green = Math.floor(Math.random() * 255) + 64; let blue = Math.floor(Math.random() * 255) + 64; let a = 0.5
// Construct a color withe the given values let bgColor = "rgba(" + red + ", " + green + ", " + blue + ", " + a + ")";
var bg = $(document.body).css('background', `${bgColor}`); // Set the background to the new color bg = bgColor; console.log(bg)
// Check input length functioncheckLength(input, min, max) { if (input.value.length < min) { showError( input, `${getFieldName(input)} must be at least ${min} characters` ); } elseif (input.value.length > max) { showError( input, `${getFieldName(input)} must be less than ${max} characters` ); } else { showSuccess(input); } }
密碼檢查
1 2 3 4 5 6
// check password match functioncheckPasswordMatch(input1, input2) { if (input1.value !== input2.value) { showError(input2, 'Password do not match') } }
//計算加總 var total = 0; $.each(amounts_arr, function () { total += parseFloat((this)) || 0; }); //傳回YOUR BALANCE $('#balance').text(`$${total}`); console.log(total);
//*************************** */ //從陣列找出>0的值，放置income //console.log(amounts) var income = amounts_arr.filter( function (item) { return item > 0 } ) console.log(income);
var totalIncome = 0; $.each(income, function () { totalIncome += parseFloat((this)) || 0; });
//計算加總 var total = 0; $.each(amounts_arr, function () { total += parseFloat((this)) || 0; }); //傳回YOUR BALANCE $('#balance').text(`$${total}`); console.log(total);
//*************************** */ //從陣列找出>0的值，放置income //console.log(amounts) var income = amounts_arr.filter( function (item) { return item > 0 } ) console.log(income); var totalIncome = 0; $.each(income, function () { totalIncome += parseFloat((this)) || 0; });
var total = 0; $.each(amounts_arr, function () { total += parseFloat((this)) || 0; }); //傳回YOUR BALANCE $('#balance').text(`$${total}`); console.log(total);
income 收入加總計算
1 2 3 4 5 6 7 8 9 10 11 12 13 14
//從陣列找出>0的值，放置income //console.log(amounts) var income = amounts_arr.filter( function (item) { return item > 0 } ) console.log(income); var totalIncome = 0; $.each(income, function () { totalIncome += parseFloat((this)) || 0; });
var currency_one = $("#currency-one").val(); var currency_two = $('#currency-two').val(); var amountOne = $('#amount-one').val(); var amountTwo = $('#amount-two').val();
//為什麼我們需要function //DRY -> Don't repeat yourself functionechoSheep(index) { console.log('第' + i + '隻綿羊') } for (var i = 1; i < 11; i++) { echoSheep(i) }
與過去所學結合
也可以return後面接物件
回傳結果為20
簡單練習題
創建空陣列，並於陣列中放數1,2,3,…10
要放入return，否則會出現undefined
也可以將參數改成兩個數
1 2 3 4 5 6 7 8
functiongenerateArray(a, b) { //a,b 可以改為 from,to var result = []; for (var i = a; i <= b; i++) { result.push(i); } return result; } console.log(generateArray(3, 10))
// for(初始值;終止條件;每次執行的語句) for (var i = 0; i < 100; i++) { console.log("第" + (i + 1) + "隻綿羊");
} //會印出1~9 //i++ 意思指 i+=1 ，也是i=i+1
用 for 迴圈倒著數綿羊
1 2 3 4 5 6
for (var k = 100; k > 0; k--) { console.log("第" + k + "隻綿羊"); if (k === 1) { console.log('睡著了!'); } }
用 for 迴圈 數到第 31 隻綿羊就睡著了！ (break)
1 2 3 4 5 6 7 8 9 10
for (var i = 1; i <= 100; i++) { console.log("第" + i + "隻綿羊"); if (i === 31) { console.log('睡著了！'); break; } if (i === 10) { console.log('覺得想睡了！'); //到10不會停止 } }
用 for 迴圈 跳著數
奇數 -> 對2取於數為1者
1 2 3 4 5 6
for (var i = 1; i <= 10; i++) { if (i % 2 === 1) { console.log("第" + i + "隻綿羊"); }
}
印出1,4,7,10
1 2 3 4 5
for (var i = 1; i <= 10; i++) { if (i % 3 === 1) console.log("第" + i + "隻綿羊");
let x = 0; while (x < 10) { console.log(x); x++; }
利用console來debug
1 2 3 4 5 6 7 8
let x = 0; while (x < 10) { //利用console來debug console.log(x) x++; console.log("第" + x + "隻綿羊");
}
搭配continue
1 2 3 4 5 6 7 8 9 10
let x = 0; while (x < 10) { //利用console來debug console.log(x) x++; if (x == 4) continue; console.log("第" + x + "隻綿羊");
}
搭配break
1 2 3 4 5 6 7 8 9 10
let k = 0; while (k < 10) {
k++; console.log("第" + k + "隻綿羊"); if (k == 5) break;
}
3.迴圈 do..while
()放條件，{}放區塊
1 2 3 4 5 6
let i = 0; do { i++ console.log('第' + i + '隻綿羊') } while (i < 10)
與while的不同
因為i<10的條件在最後面，所以他會先跑完do，再到while終止
i++完之後，跑到while(11>10)，跳出迴圈，執行console.log
1 2 3 4 5 6
let i = 10; do { i++ console.log('第' + i + '隻綿羊') } while (i < = 10); console.log('i=',i); //i=11
另一種寫法
1 2 3 4 5 6 7 8 9 10
let i = 10; do { i++ console.log('第' + i + '隻綿羊') if (i>10){ break//同等於終止條件 } } while (true); //如果沒有if條件，這裡又設true，此狀況下會形成無限迴圈 console.log('i=',i); //11
同樣放入while回圈，結果就不會顯示，因為一開始k=10，進入比較，就不符合條件
1 2 3 4 5
let k = 10; while (k < 10) { k++; console.log('第' + k + '隻綿羊') }
雙層回圈
用 99 乘法表學雙層迴圈
1 2 3 4 5 6 7 8 9 10 11 12 13
//有兩層，需數2次 for (i = 1; i < 10; i++) {
for (k = 1; k < 10; k++) {
console.log("i:" + i, "k:" + k); // console.log(i + '*' + k + '=' + (i * k)); let result = i * k; let str = i + "x" + k + "=" + result; console.log(str); }
