W3CSchool實戰闖關筆記（JavaScript）

1 //handsome
2 /** 3 *ugly 4 **/

第一關注釋

1 // 舉例
2 var myName; 3 
4 // Define myName below this line

第二關聲明變量

1 // Setup
2 var a; 3 var b = 2; 4 
5 // Only change code below this line
6 var a = 7; 7 var b = a;

第三關變量賦值

1 // 舉例
2 var ourVar = 19; 3 
4 // Only change code below this line
5 
6 var a = 9;

第四關賦初值

 1 // Initialize these three variables
 2 var a = 5;  3 var b = 10;  4 var c = "I am a";  5 
 6 // Do not change code below this line
 7 
 8 a = a + 1;  9 b = b + 5; 10 c = c + " String!";

第五關未定義變量

1 // Declarations
2 var studlyCapVar; 3 var properCamelCase; 4 var titleCaseOver; 5 
6 // Assignments
7 studlyCapVar = 10; 8 properCamelCase = "A String"; 9 titleCaseOver = 9000;

第六關大小寫敏感

1 var sum = 10 + 10;

第七關加法

1 var difference = 45 - 33;

第八關減法

1 var product = 8 * 10;

第九關乘法

1 var quotient = 66 / 33;

第十關除法

1 var myVar = 87; 2 
3 // Only change code below this line
4 myVar++;

第十一關自增

1 var myVar = 11; 2 
3 // Only change code below this line
4 myVar--;

第十二關自減

1 var ourDecimal = 5.7; 2 
3 // Only change code below this line
4 
5 
6 var myDecimal = 5.7;

第十三關浮點數

1 var product = 2.0 * 2.5;

第十四關小數乘法

1 var quotient = 4.4 / 2.0;

第十五關小數除法

1 // Only change code below this line
2 
3 var remainder = 11 % 3;

第十六關取餘

1 var a = 3; 2 var b = 17; 3 var c = 12; 4 
5 // Only modify code below this line
6 
7 a += 12; 8 b += 9; 9 c += 7;

第十七關+=

1 var a = 11; 2 var b = 9; 3 var c = 3; 4 
5 // Only modify code below this line
6 
7 a -= 6; 8 b -= 15; 9 c -= 1;

第十八關 -=

1 var a = 5; 2 var b = 12; 3 var c = 4.6; 4 
5 // Only modify code below this line
6 
7 a *= 5; 8 b *= 3; 9 c *= 10;

第十九關 *=

1 var a = 48; 2 var b = 108; 3 var c = 33; 4 
5 // Only modify code below this line
6 
7 a /= 12;
8 b /= 4;
9 c /= 11;

第二十關 /=

 1 function convert(celsius) {  2 // Only change code below this line
 3 var fahrenheit = 32 + celsius * 9 / 5;  4 
 5 // Only change code above this line
 6 return fahrenheit;  7 }  8 
 9 // Change the inputs below to test your code
10 convert(30);

第二十一關基本運算綜合

1 // 舉例
2 var firstName = "Alan"; 3 var lastName = "Turing"; 4 
5 // Only change code below this line
6 var myFirstName = "zhong"; 7 var myLastName  = "liu";

第二十二關聲明字符串

1 var myStr = "I am a \"double quoted\" string inside \"double quotes\""; // Change this line

第二十三關轉義字符串中的引號

1 var myStr = '<a href="http://www.example.com" target="_blank">Link</a>';

第二十四關單引號

1 var myStr = "\\ \t \r \n";

第二十五關轉義特殊符號

1 // 舉例
2 var ourStr = "I come first. " + "I come second."; 3 
4 // Only change code below this line
5 
6 var myStr = "This is the start. " + "This is the end.";

第二十六關字符串鏈接

1 // 舉例
2 var ourStr = "I come first. "; 3 ourStr += "I come second."; 4 
5 // Only change code below this line
6 
7 var myStr = "This is the first sentence. "; 8 myStr += "This is the second sentence.";

第二十七關 +=字符串

1 // 舉例
2 var ourName = "Free Code Camp"; 3 var ourStr = "Hello, our name is " + ourName + ", how are you?"; 4 
5 // Only change code below this line
6 var myName = "edward"; 7 var myStr = "My name is " + myName + " and I am swell!";

第二十八關變量鏈接字符串

 1 // 舉例
 2 var anAdjective = "awesome!";  3 var ourStr = "Free Code Camp is ";  4 ourStr += anAdjective;  5 
 6 // Only change code below this line
 7 
 8 var someAdjective = "happy";  9 var myStr = "Learning to code is "; 10 myStr += someAdjective;

第二十九關追加變量到字符串

 1 // 舉例
 2 var firstNameLength = 0;  3 var firstName = "Ada";  4 
 5 firstNameLength = firstName.length;  6 
 7 // Setup
 8 var lastNameLength = 0;  9 var lastName = "Lovelace"; 10 
11 // Only change code below this line.
12 
13 lastNameLength = lastName.length;

第三十關獲取字符串的長度

 1 // 舉例
 2 var firstLetterOfFirstName = "";  3 var firstName = "Ada";  4 
 5 firstLetterOfFirstName = firstName[0];  6 
 7 // Setup
 8 var firstLetterOfLastName = "";  9 var lastName = "Lovelace"; 10 
11 // Only change code below this line
12 firstLetterOfLastName = lastName[0];

第三十一關獲取字符串中的第一個字符

1 // Setup
2 var myStr = "Jello World"; 3 
4 // Only change code below this line
5 
6 myStr = "Hello World"; // Fix Me

第三十二關字符串的不可變性

1 // 舉例
2 var firstName = "Ada"; 3 var secondLetterOfFirstName = firstName[1]; 4 
5 // Setup
6 var lastName = "Lovelace"; 7 
8 // Only change code below this line.
9 var thirdLetterOfLastName = lastName[2];

第三十三關索引查找字符串中的第N個字符

1 // 舉例
2 var firstName = "Ada"; 3 var lastLetterOfFirstName = firstName[firstName.length - 1]; 4 
5 // Setup
6 var lastName = "Lovelace"; 7 
8 // Only change code below this line.
9 var lastLetterOfLastName = lastName[lastName.length - 1];

第三十四關索引查找字符串中的最後一個字符

1 // 舉例
2 var firstName = "Ada"; 3 var thirdToLastLetterOfFirstName = firstName[firstName.length - 3]; 4 
5 // Setup
6 var lastName = "Lovelace"; 7 
8 // Only change code below this line
9 var secondToLastLetterOfLastName = lastName[lastName.length - 2];

第三十五關索引查找字符串中倒數第N個字符

 1 function wordBlanks(myNoun, myAdjective, myVerb, myAdverb) {  2 var result = "";  3 // Your code below this line
 4 result = myAdjective + " " + myNoun + " " + myVerb + " " + myAdverb;  5 // Your code above this line
 6 return result;  7 }  8 
 9 // Change the words here to test your function
10 wordBlanks("dog", "big", "ran", "quickly");

第三十六關字符串操做綜合

1 // 舉例
2 var array = ["John", 23]; 3 
4 // Only change code below this line.
5 var myArray = ["Edward",23,"China","173cm"];

第三十七關數組

1 // 舉例
2 var ourArray = [["the universe", 42], ["everything", 101010]]; 3 
4 // Only change code below this line.
5 var myArray = [["quan",24],["Edward",23]];

第三十八關多維數組

 1 // 舉例
 2 var ourArray = [1,2,3];  3 var ourData = ourArray[0]; // equals 1
 4 
 5 // Setup
 6 var myArray = [1,2,3];  7 
 8 // Only change code below this line.
 9 
10 var myData = myArray[0];

第三十九關查找數組中的數據

 1 // 舉例
 2 var ourArray = [1,2,3];  3 ourArray[1] = 3; // ourArray now equals [1,3,3].
 4 
 5 // Setup
 6 var myArray = [1,2,3];  7 
 8 // Only change code below this line.
 9 
10 myArray[0] = 3;

第四十關修改數組中的數據

1 // Setup
2 var myArray = [[1,2,3], [4,5,6], [7,8,9], [[10,11,12], 13, 14]]; 3 
4 // Only change code below this line.
5 var myData = myArray[2][1];

第四十一關操做多維數組

 1 // 舉例
 2 var ourArray = ["Stimpson", "J", "cat"];  3 ourArray.push(["happy", "joy"]);  4 // ourArray now equals ["Stimpson", "J", "cat", ["happy", "joy"]]
 5 
 6 // Setup
 7 var myArray = [["John", 23], ["cat", 2]];  8 
 9 // Only change code below this line.
10 
11 myArray.push(["dog",3]);

第四十二關push()函數追加數組數據

 1 // 舉例
 2 var ourArray = [1,2,3];  3 var removedFromOurArray = ourArray.pop();  4 // removedFromOurArray now equals 3, and ourArray now equals [1,2]
 5 
 6 // Setup
 7 var myArray = [["John", 23], ["cat", 2]];  8 
 9 // Only change code below this line.
10 var removedFromMyArray = myArray.pop();

第四十三關pop()函數彈出數組最後數據

 1 // 舉例
 2 var ourArray = ["Stimpson", "J", ["cat"]];  3 removedFromOurArray = ourArray.shift();  4 // removedFromOurArray now equals "Stimpson" and ourArray now equals ["J", ["cat"]].
 5 
 6 // Setup
 7 var myArray = [["John", 23], ["dog", 3]];  8 
 9 // Only change code below this line.
10 var removedFromMyArray = myArray.shift();

第四十四關shift()函數移出數組第一個數據

 1 // 舉例
 2 var ourArray = ["Stimpson", "J", "cat"];  3 ourArray.shift(); // ourArray now equals ["J", "cat"]
 4 ourArray.unshift("Happy");  5 // ourArray now equals ["Happy", "J", "cat"]
 6 
 7 // Setup
 8 var myArray = [["John", 23], ["dog", 3]];  9 myArray.shift(); 10 
11 // Only change code below this line.
12 
13 myArray.unshift(["Paul",35]);

第四十五關unshift()函數移入數據到數組第一位

1 var myList = [["soap",3],["toothbrush",2],["tissue",3],["shoes",2],["wallet",1]];

第四十六關建立購物清單

 1 // 舉例
 2 function ourFunction() {  3 console.log("Heyya, World");  4 }  5 
 6 ourFunction();  7 
 8 // Only change code below this line
 9 function myFunction(){ 10     console.log("Hi World"); 11 } 12 
13 myFunction();

第四十七關函數

 1 // 舉例
 2 function ourFunction(a, b) {  3 console.log(a - b);  4 }  5 ourFunction(10, 5); // Outputs 5
 6 
 7 // Only change code below this line.
 8 function myFunction(a,b){  9     console.log(a + b); 10 } 11 
12 myFunction(3,4);

第四十八關帶參數函數

 1 // Declare your variable here
 2 var myGlobal =10;  3 
 4 function fun1() {  5 // Assign 5 to oopsGlobal Here
 6 oopsGlobal = 5;  7 }  8 
 9 // Only change code above this line
10 function fun2() { 11 var output = ""; 12 if (typeof myGlobal != "undefined") { 13 output += "myGlobal: " + myGlobal; 14 } 15 if (typeof oopsGlobal != "undefined") { 16 output += " oopsGlobal: " + oopsGlobal; 17 } 18 console.log(output); 19 }

第四十九關函數全局變量

 1 function myFunction() {  2 var myVar = 'use strict';  3 
 4 
 5 console.log(myVar);  6 }  7 myFunction();  8 
 9 // run and check the console 
10 // myVar is not defined outside of myFunction
11 
12 
13 // now remove the console log line to pass the test

第五十關函數局部變量

 1 // Setup
 2 var outerWear = "T-Shirt";  3 
 4 function myFunction() {  5 // Only change code below this line
 6 
 7 var outerWear = "sweater";  8 
 9 // Only change code above this line
10 return outerWear; 11 } 12 
13 myFunction();

第五十一關全局變量與局部變量差別

 1 // 舉例
 2 function minusSeven(num) {  3 return num - 7;  4 }  5 
 6 // Only change code below this line
 7 
 8 function timesFive(number){  9     return number * 5; 10 }

第五十二關函數使用return返回值

 1 // 舉例
 2 var changed = 0;  3 
 4 function change(num) {  5 return (num + 5) / 3;  6 }  7 
 8 changed = change(10);  9 
10 // Setup
11 var processed = 0; 12 
13 function process(num) { 14 return (num + 3) / 5; 15 } 16 
17 // Only change code below this line
18 
19 processed = process(7);

第五十三關使用返回值進行賦值

 1 function queue(arr, item) {  2 // Your code here
 3 arr.push(item);  4 item = arr[0];  5 arr.shift();  6 return item;// Change this line
 7 }  8 
 9 // Test Setup
10 var testArr = [1,2,3,4,5]; 11 
12 // Display Code
13 console.log("Before: " + JSON.stringify(testArr)); 14 console.log(queue(testArr, 6)); // Modify this line to test
15 console.log("After: " + JSON.stringify(testArr));

第五十四關隊列

1 function welcomeToBooleans() { 2 
3 // Only change code below this line.
4 
5 return true; // Change this line
6 
7 // Only change code above this line.
8 }

第五十五關布爾boolean

 1 // 舉例
 2 function ourFunction(isItTrue) {  3 if (isItTrue) {  4 return "Yes, it's true";  5 }  6 return "No, it's false";  7 }  8 
 9 // Setup
10 function myFunction(wasThatTrue) { 11 
12 // Only change code below this line.
13 if(wasThatTrue == true){ 14     return "That was true"; 15 }else{ 16     return "That was false"; 17 } 18 
19 
20 // Only change code above this line.
21 
22 } 23 
24 // Change this value to test
25 myFunction(false);

第五十六關if

 1 // Setup
 2 function myTest(val) {  3 if (val == 12) { // Change this line
 4 return "Equal";  5 }  6 return "Not Equal";  7 }  8 
 9 // Change this value to test
10 myTest(10);

第五十七關==

 1 // Setup
 2 function myTest(val) {  3 if (val === 7) { // Change this line
 4 return "Equal";  5 }  6 return "Not Equal";  7 }  8 
 9 // Change this value to test
10 myTest(10);

第五十八關===

 1 // Setup
 2 function myTest(val) {  3 if (val != 99) { // Change this line
 4 return "Not Equal";  5 }  6 return "Equal";  7 }  8 
 9 // Change this value to test
10 myTest(10);

第五十九關!=

 1 // Setup
 2 function myTest(val) {  3 // Only Change Code Below this Line
 4 
 5 if (val !== 17) {  6 
 7 // Only Change Code Above this Line
 8 
 9 return "Not Equal"; 10 } 11 return "Equal"; 12 } 13 
14 // Change this value to test
15 myTest(10);

第六十關!==

 1 function myTest(val) {  2 if (val > 100) {// Change this line
 3 return "Over 100";  4 }  5 
 6 if (val > 10) {// Change this line
 7 return "Over 10";  8 }  9 
10 return "10 or Under"; 11 } 12 
13 // Change this value to test
14 myTest(10);

第六十一關>

 1 function myTest(val) {  2 if (val >= 20) {// Change this line
 3 return "20 or Over";  4 }  5 
 6 if (val >= 10) {// Change this line
 7 return "10 or Over";  8 }  9 
10 return "9 or Under"; 11 } 12 
13 // Change this value to test
14 myTest(10);

第六十二關>=

 1 function myTest(val) {  2 if (val < 25) {// Change this line
 3 return "Under 25";  4 }  5 
 6 if (val < 55) {// Change this line
 7 return "Under 55";  8 }  9 
10 return "55 or Over"; 11 } 12 
13 // Change this value to test
14 myTest(10);

第六十三關<

 1 function myTest(val) {  2 if (val <= 12) {// Change this line
 3 return "Smaller Than or Equal to 12";  4 }  5 
 6 if (val <= 24) {// Change this line
 7 return "Smaller Than or Equal to 24";  8 }  9 
10 return "25 or More"; 11 } 12 
13 // Change this value to test
14 myTest(10);

第六十四關<=

 1 function myTest(val) {  2 // Only change code below this line
 3 
 4 if (val <= 50 && val >=25) {  5 
 6 return "Yes";  7 
 8 }  9 
10 // Only change code above this line
11 return "No"; 12 } 13 
14 // Change this value to test
15 myTest(10);

第六十五關&&

 1 function myTest(val) {  2 // Only change code below this line
 3 
 4 if (val<10 || val >20) {  5     return "Outside";  6 } else {  7     return "Inside";  8 }  9 // Only change code above this line
10 } 11 
12 
13 // Change this value to test
14 myTest(15);

第六十六關 ||

 1 function myTest(val) {  2 var result = "";  3 // Only change code below this line
 4 
 5 if (val > 5) {  6 result = "Bigger than 5";  7 } else {  8 result = "5 or Smaller";  9 } 10 
11 // Only change code above this line
12 return result; 13 } 14 
15 // Change this value to test
16 myTest(4);

第六十七關 else

 1 function myTest(val) {  2 if (val > 10) {  3 return "Greater than 10";  4 } else if (val < 5) {  5 return "Smaller than 5";  6 } else {  7 return "Between 5 and 10";  8 }  9 } 10 // Change this value to test
11 myTest(7);

第六十八關 else if

 1 function myTest(val) {  2 if (val < 5) {  3 return "Less than 5";  4 } else if (val < 10) {  5 return "Less than 10";  6 } else {  7 return "Greater than or equal to 10";  8 }  9 } 10 
11 // Change this value to test
12 myTest(7);

第六十九關if、else if語句中代碼的執行順序

 1 function myTest(num) {  2 // Only change code below this line
 3 if (num < 5) {  4     return "Tiny";  5 } else if(num < 10){  6     return "Small";  7 } else if(num < 15){  8     return "Medium";  9 } else if(num < 20){ 10     return "Large"; 11 } else { 12     return "Huge"; 13 } 14 // Only change code above this line
15 } 16 
17 // Change this value to test
18 myTest(7);

第七十關同時使用if、else if 語句

 1 function golfScore(par, strokes) {  2 // Only change code below this line
 3     if (strokes == 1) {  4         return "Hole-in-one!";  5     } else if(strokes <= par-2 ){  6         return "Eagle";  7     } else if(strokes == par-1){  8         return "Birdie";  9     } else if(strokes == par){ 10         return "Par"; 11     } else if(strokes == par+1){ 12         return "Bogey"; 13     } else if(strokes == par+2){ 14         return "Double Bogey"; 15     } else { 16         return "Go Home!"; 17  } 18 // Only change code above this line
19 } 20 
21 // Change these values to test
22 golfScore(5, 4);

第七十一關邏輯運算綜合

 1 function myTest(val) {  2 var answer = "";  3 // Only change code below this line
 4 switch (val) {  5     case 1:  6         answer = "alpha";  7         break;  8     case 2:  9         answer = "beta"; 10         break; 11     case 3: 12         answer = "gamma"; 13         break; 14     default: 15         answer = "delta"; 16         // code
17 } 18 
19 
20 // Only change code above this line
21 return answer; 22 } 23 
24 // Change this value to test
25 myTest(1);

第七十二關 switch

 1 function myTest(val) {  2 var answer = "";  3 // Only change code below this line
 4 switch (val) {  5     case 'a':  6         answer = "apple";  7         break;  8     case 'b':  9         answer = "bird"; 10         break; 11     case 'c': 12         answer = "cat"; 13         break; 14     default: 15         answer = "stuff"; 16 } 17 
18 
19 // Only change code above this line
20 return answer; 21 } 22 
23 // Change this value to test
24 myTest(1);

第七十三關在switch語句中添加default語句

 1 function myTest(val) {  2 var answer = "";  3 // Only change code below this line
 4 switch (val) {  5     case 1:  6     case 2:  7     case 3:  8         answer = "Low";  9         break; 10     case 4: 11     case 5: 12     case 6: 13         answer = "Mid"; 14         break; 15     case 7: 16     case 8: 17     case 9: 18         answer = "High"; 19         break; 20     default: 21         // code
22 } 23 
24 
25 // Only change code above this line
26 return answer; 27 } 28 
29 // Change this value to test
30 myTest(1);

第七十四關switch語句中的多個相同選項判斷

 1 function myTest(val) {  2 var answer = "";  3 // Only change code below this line
 4 switch (val) {  5     case 'bob':  6         answer = "Marley";  7         break;  8     case 42:  9         answer = "The Answer"; 10         break; 11     case 1: 12         answer = "There is no #1"; 13         break; 14     case 99: 15         answer = "Missed me by this much!"; 16         break; 17     case 7: 18         answer = "Ate Nine"; 19         break; 20     default: 21 } 22 
23 
24 
25 // Only change code above this line
26 return answer; 27 } 28 
29 // Change this value to test
30 myTest(7);

第七十五關使用switch語句替換串聯的if、else if語句

1 function isLess(a, b) { 2 // Fix this code
3 return a<b; 4 } 5 
6 // Change these values to test
7 isLess(10, 15);

第七十六關直接在函數中返回boolean值

 1 // Setup
 2 function abTest(a, b) {  3 // Only change code below this line
 4 if ( a<0 || b<0 ) {  5     return undefined;  6 }  7 
 8 
 9 // Only change code above this line
10 
11 return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2)); 12 } 13 
14 // Change values below to test your code
15 abTest(2,2);

第七十七關使用return跳出函數

 1 var count = 0;  2 
 3 function cc(card) {  4 // Only change code below this line
 5 switch (card) {  6     case 2:  7     case 3:  8     case 4:  9     case 5: 10     case 6: 11         count++; 12         break; 13     case 10: 14     case 'J': 15     case 'Q': 16     case 'K': 17     case 'A': 18         count--; 19         break; 20     default: 21 } 22 
23 if (count > 0) { 24     return count+" Bet"; 25 } else { 26     return count+" Hold"; 27 } 28 
29 // Only change code above this line
30 } 31 
32 // Add/remove calls to test your function.
33 // 提示: Only the last will display
34 cc(2);

第七十八關條件判斷算法綜合

 1 // 舉例
 2 var ourDog = {  3 "name": "Camper",  4 "legs": 4,  5 "tails": 1,  6 "friends": ["everything!"]  7 };  8 
 9 // Only change code below this line.
10 
11 var myDog = { 12 "name" : "Laffy", 13 "legs" : 4, 14 "tails" : 1, 15 "friends" :["edward","viola"] 16 
17 
18 };

第七十九關對象操做

 1 // Setup
 2 var testObj = {  3 "hat": "ballcap",  4 "shirt": "jersey",  5 "shoes": "cleats"
 6 };  7 
 8 // Only change code below this line
 9 
10 var hatValue = testObj.hat;// Change this line
11 var shirtValue = testObj.shirt;// Change this line

第八十關使用點操做符.讀取對象屬性

 1 // Setup
 2 var testObj = {  3 "an entree": "hamburger",  4 "my side": "veggies",  5 "the drink": "water"
 6 };  7 
 8 // Only change code below this line
 9 
10 var entreeValue = testObj["an entree"]; // Change this line
11 var drinkValue = testObj["the drink"];// Change this line

第八十一關使用[]讀取對象屬性

 1 // Setup
 2 var testObj = {  3 12: "Namath",  4 16: "Montana",  5 19: "Unitas"
 6 };  7 
 8 // Only change code below this line;
 9 
10 var playerNumber = 16; // Change this Line
11 var player = testObj[playerNumber]; // Change this Line

第八十二關使用變量訪問對象屬性

 1 // 舉例
 2 var ourDog = {  3 "name": "Camper",  4 "legs": 4,  5 "tails": 1,  6 "friends": ["everything!"]  7 };  8 
 9 ourDog.name = "Happy Camper"; 10 
11 // Setup
12 var myDog = { 13 "name": "Coder", 14 "legs": 4, 15 "tails": 1, 16 "friends": ["Free Code Camp Campers"] 17 }; 18 
19 myDog.name = "Happy Coder"; 20 // Only change code below this line.

第八十三關更新對象屬性

 1 // 舉例
 2 var ourDog = {  3 "name": "Camper",  4 "legs": 4,  5 "tails": 1,  6 "friends": ["everything!"]  7 };  8 
 9 ourDog.bark = "bow-wow"; 10 
11 // Setup
12 var myDog = { 13 "name": "Happy Coder", 14 "legs": 4, 15 "tails": 1, 16 "friends": ["Free Code Camp Campers"] 17 }; 18 
19 // Only change code below this line.
20 
21 myDog.bark = "woof";

第八十四關給對象添加屬性

 1 // 舉例
 2 var ourDog = {  3 "name": "Camper",  4 "legs": 4,  5 "tails": 1,  6 "friends": ["everything!"],  7 "bark": "bow-wow"
 8 };  9 
10 delete ourDog.bark; 11 
12 // Setup
13 var myDog = { 14 "name": "Happy Coder", 15 "legs": 4, 16 "tails": 1, 17 "friends": ["Free Code Camp Campers"], 18 "bark": "woof"
19 }; 20 
21 // Only change code below this line.
22 
23 delete myDog.tails;

第八十五關刪除對象屬性

 1 // Setup
 2 function phoneticLookup(val) {  3 var result = "";  4 
 5 // Only change code below this line
 6 var lookup = {  7     "alpha"     :   "Adams",  8     "bravo"     :   "Boston",  9     "charlie"   :   "Chicago", 10     "delta"     :   "Denver", 11     "echo"      :   "Easy", 12     "foxtrot"   :   "Frank"
13 } 14 
15 result = lookup[val]; 16 
17 // Only change code above this line
18 return result; 19 } 20 
21 // Change this value to test
22 phoneticLookup("charlie");

第八十六關使用對象進行查找值

 1 // Setup
 2 var myObj = {  3 gift: "pony",  4 pet: "kitten",  5 bed: "sleigh"
 6 };  7 
 8 function checkObj(checkProp) {  9 // Your Code Here
10 if (myObj.hasOwnProperty(checkProp)) { 11     return myObj[checkProp]; 12 } 13 return "Not Found"; 14 } 15 
16 // Test your code by modifying these values
17 checkObj("gift");

第八十七關檢查對象屬性

 1 var myMusic = [  2  {  3     "artist"        : "Billy Joel",  4     "title"         : "Piano Man",  5     "release_year"  : 1973,  6     "formats" : [  7             "CS",  8             "8T",  9             "LP" ], 10     "gold"          : true
11  }, 12 // Add record here
13  { 14     "artist"        : "Jay", 15     "title"         : "依然范特西", 16     "release_year"  : 2008, 17     "formats" : [ 18         "Fang", 19         "Cai"], 20     "gold"          : false
21  } 22 ];

第八十八關JSON操做

 1 // Setup
 2 var myStorage = {  3 "car": {  4 "inside": {  5 "glove box": "maps",  6 "passenger seat": "crumbs"
 7  },  8 "outside": {  9 "trunk": "jack"
10 } 11 } 12 }; 13 
14 // Only change code below this line
15 
16 var gloveBoxContents = myStorage.car.inside["glove box"]; // Change this line

第八十九關獲取JSON屬性值

 1 // Setup
 2 var myPlants = [  3 {  4 type: "flowers",  5 list: [  6 "rose",  7 "tulip",  8 "dandelion"
 9 ] 10 }, 11 { 12 type: "trees", 13 list: [ 14 "fir", 15 "pine", 16 "birch"
17 ] 18 } 19 ]; 20 
21 // Only change code below this line
22 
23 var secondTree = myPlants[1].list[1]; // Change this line

第九十關獲取JSON數組值

 1 // Setup
 2 var collection = {  3 2548: {  4 album: "Slippery When Wet",  5 artist: "Bon Jovi",  6 tracks: [  7 "Let It Rock",  8 "You Give Love a Bad Name" 
 9 ] 10 }, 11 2468: { 12 album: "1999", 13 artist: "Prince", 14 tracks: [ 15 "1999", 16 "Little Red Corvette" 
17 ] 18 }, 19 1245: { 20 artist: "Robert Palmer", 21 tracks: [ ] 22 }, 23 5439: { 24 album: "ABBA Gold"
25 } 26 }; 27 // Keep a copy of the collection for tests
28 var collectionCopy = JSON.parse(JSON.stringify(collection)); 29 
30 // Only change code below this line
31 function update(id, prop, value) { 32 
33 if (value !== '' && prop != 'tracks') { 34     collectionCopy[id][prop] = value; 35 } else if(value !== '' && prop == 'tracks'){ 36  collectionCopy[id][prop].push(value); 37 } else { 38     delete collectionCopy[id][prop]; 39 } 40 
41 return collection; 42 } 43 
44 // Alter values below to test your code
45 update(5439, "artist", "ABBA");

第九十一關JSON集合操做

 1 // 舉例
 2 var ourArray = [];  3 
 4 for (var i = 0; i < 5; i++) {  5 ourArray.push(i);  6 }  7 
 8 // Setup
 9 var myArray = []; 10 
11 // Only change code below this line.
12 var a; 13 for(a = 1;a < 6;a++){ 14  myArray.push(a); 15 }

第九十二關 for循環

 1 // 舉例
 2 var ourArray = [];  3 
 4 for (var i = 0; i < 10; i += 2) {  5 ourArray.push(i);  6 }  7 
 8 // Setup
 9 var myArray = []; 10 
11 // Only change code below this line.
12 for (var i = 1; i < 10; i += 2) { 13  myArray.push(i); 14 }

第九十三關 for語句循環按奇數順序迭代

 1 // 舉例
 2 var ourArray = [];  3 
 4 for (var i = 10; i > 0; i -= 2) {  5 ourArray.push(i);  6 }  7 
 8 // Setup
 9 var myArray = []; 10 
11 // Only change code below this line.
12 for (var i = 9; i > 0 ; i -= 2) { 13  myArray.push(i); 14 }

第九十四關for循環逆向迭代

 1 // 舉例
 2 var ourArr = [ 9, 10, 11, 12];  3 var ourTotal = 0;  4 
 5 for (var i = 0; i < ourArr.length; i++) {  6 ourTotal += ourArr[i];  7 }  8 
 9 // Setup
10 var myArr = [ 2, 3, 4, 5, 6]; 11 
12 // Only change code below this line
13 var total = 0; 14 for (var i = 0; i < myArr.length; i++) { 15     total += myArr[i]; 16 }

第九十五關for循環迭代輸出數組

 1 function multiplyAll(arr) {  2 var product = 1;  3 // Only change code below this line
 4     for (var i = 0; i < arr.length; i++) {  5         for(var j = 0; j < arr[i].length; j++){  6             product *= arr[i][j];  7  }  8  }  9 // Only change code above this line
10 return product; 11 } 12 
13 // Modify values below to test your code
14 multiplyAll([[1,2],[3,4],[5,6,7]]);

第九十六關循環語句綜合

1 // Setup
2 var myArray = []; 3 
4 // Only change code below this line.
5 var i = 0; 6 while(i <= 4){ 7  myArray.push(i); 8     i++; 9 }

第九十七關while語句循環

 1 //Setup
 2 var contacts = [  3 {  4 "firstName": "Akira",  5 "lastName": "Laine",  6 "number": "0543236543",  7 "likes": ["Pizza", "Coding", "Brownie Points"]  8 },  9 { 10 "firstName": "Harry", 11 "lastName": "Potter", 12 "number": "0994372684", 13 "likes": ["Hogwarts", "Magic", "Hagrid"] 14 }, 15 { 16 "firstName": "Sherlock", 17 "lastName": "Holmes", 18 "number": "0487345643", 19 "likes": ["Intriguing Cases", "Violin"] 20 }, 21 { 22 "firstName": "Kristian", 23 "lastName": "Vos", 24 "number": "unknown", 25 "likes": ["Javascript", "Gaming", "Foxes"] 26 } 27 ]; 28 
29 
30 function lookUpProfile(firstName, prop){ 31 // Only change code below this line
32 var hasName = false; 33 for (var i = 0; i < contacts.length; i++) { 34     if (contacts[i].firstName == firstName) { 35         hasName = true; 36         if (contacts[i].hasOwnProperty(prop)) { 37             return contacts[i][prop]; 38         } else { 39             return "No such property"; 40  } 41  } 42 } 43 
44 if(!hasName){ 45     return "No such contact"; 46 } 47 // Only change code above this line
48 } 49 
50 // Change these values to test your function
51 lookUpProfile("Akira", "likes");

第九十八關使用循環語句查找通信錄

1 function randomFunction() { 2 
3 // Only change code below this line.
4 
5 return Math.random(); 6 
7 // Only change code above this line.
8 }

第九十九關random()

1 var randomNumberBetween0and19 = Math.floor(Math.random() * 20); 2 
3 function myFunction() { 4 
5 // Only change code below this line.
6 
7 return Math.floor(Math.random() * 10); 8 }

第一百關random()生成隨機數

 1 // 舉例
 2 function ourFunction(ourMin, ourMax) {  3 
 4 return Math.floor(Math.random() * (ourMax - ourMin + 1)) + ourMin;  5 }  6 
 7 ourFunction(1, 9);  8 
 9 // Only change code below this line.
10 
11 function randomRange(myMin, myMax) { 12 
13 return Math.floor(Math.random() * (myMax - myMin + 1)) + myMin; // Change this line
14 
15 } 16 
17 // Change these values to test your function
18 var myRandom = randomRange(5, 15);

101關random()在一個範圍內生成隨機數

 1 // Setup
 2 var testString = "Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.";  3 
 4 // 舉例
 5 var expressionToGetSoftware = /software/gi;  6 var softwareCount = testString.match(expressionToGetSoftware).length;  7 
 8 
 9 // Only change code below this line.
10 
11 var expression = /and/gi;// Change this Line
12 
13 // Only change code above this line
14 
15 // This code counts the matches of expression in testString
16 var andCount = testString.match(expression).length;

102關正則表達式操做字符串

 1 // Setup
 2 var testString = "There are 3 cats but 4 dogs.";  3 
 4 // Only change code below this line.
 5 
 6 var expression = /\d+/g;// Change this line
 7 
 8 // Only change code above this line
 9 
10 // This code counts the matches of expression in testString
11 var digitCount = testString.match(expression).length;

103關正則表達式選取數值

 1 // Setup
 2 var testString = "How many spaces are there in this sentence?";  3 
 4 // Only change code below this line.
 5 
 6 var expression = /\s+/g;// Change this line
 7 
 8 // Only change code above this line
 9 
10 // This code counts the matches of expression in testString
11 var spaceCount = testString.match(expression).length;

104關正則表達式選取空白字符

 1 // Setup
 2 var testString = "How many non-space characters are there in this sentence?";  3 
 4 // Only change code below this line.
 5 
 6 var expression = /\S/g;// Change this line
 7 
 8 // Only change code above this line
 9 
10 // This code counts the matches of expression in testString
11 var nonSpaceCount = testString.match(expression).length;

105關正則表達式反轉匹配

106

 1 <script>
 2 function runSlots() {  3 var slotOne;  4 var slotTwo;  5 var slotThree;  6  
 7 var images = ["https://www.w3cschool.cn/statics/codecamp/images/9H17QFk.png", "https://www.w3cschool.cn/statics/codecamp/images/9RmpXTy.png", "https://www.w3cschool.cn/statics/codecamp/images/VJnmtt5.png"];  8  
 9 // Only change code below this line.
 10 slotOne = Math.floor(Math.random() * 3) + 1;  11 slotTwo = Math.floor(Math.random() * 3) + 1;  12 slotThree = Math.floor(Math.random() * 3) + 1;  13 
 14 
 15 // Only change code above this line.
 16 
 17 
 18 if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined) {  19 $(".logger").html(slotOne + " " + slotTwo + " " + slotThree);  20 }  21 
 22 
 23 $(".logger").append(" Not A Win")  24 return [slotOne, slotTwo, slotThree];  25 }  26 
 27 $(document).ready(function() {  28  $(".go").click(function() {  29  runSlots();  30  });  31  });  32 </script>
 33  
 34 <div>
 35  <div class = "container inset">
 36  <div class = "header inset">
 37  <img src="/statics/codecamp/images/freecodecamp_logo.svg" alt="learn to code JavaScript at Free Code Camp logo" class="img-responsive nav-logo">
 38  <h2>FCC Slot Machine</h2>
 39  </div>
 40  <div class = "slots inset">
 41  <div class = "slot inset">
 42  
 43  </div>
 44  <div class = "slot inset">
 45  
 46  </div>
 47  <div class = "slot inset">
 48  
 49  </div>
 50  </div>
 51  <br/>
 52  <div class = "outset">
 53  <button class = "go inset">
 54  Go  55  </button>
 56  </div>
 57  <br/>
 58  <div class = "foot inset">
 59  <span class = "logger"></span>
 60  </div>
 61  </div>
 62 </div>
 63 
 64 <style>
 65  .container {  66  background-color: #4a2b0f;  67  height: 400px;  68  width: 260px;  69  margin: 50px auto;  70  border-radius: 4px;  71  }  72  .header {  73  border: 2px solid #fff;  74  border-radius: 4px;  75  height: 55px;  76  margin: 14px auto;  77  background-color: #457f86  78  }  79  .header h2 {  80  height: 30px;  81  margin: auto;  82  }  83  .header h2 {  84  font-size: 14px;  85  margin: 0 0;  86  padding: 0;  87  color: #fff;  88  text-align: center;  89  }  90  .slots{  91  display: flex;  92  background-color: #457f86;  93  border-radius: 6px;  94  border: 2px solid #fff;  95  }  96  .slot{  97  flex: 1 0 auto;  98  background: white;  99  height: 75px; 100  margin: 8px; 101  border: 2px solid #215f1e; 102  border-radius: 4px; 103  } 104  .go { 105  width: 100%; 106  color: #fff; 107  background-color: #457f86; 108  border: 2px solid #fff; 109  border-radius: 2px; 110  box-sizing: none; 111  outline: none!important; 112  } 113  .foot { 114  height: 150px; 115  background-color: 457f86; 116  border: 2px solid #fff; 117  } 118  
119  .logger { 120  color: white; 121  margin: 10px; 122  } 123  
124  .outset { 125  -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75); 126  -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75); 127  box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75); 128  } 129  
130  .inset { 131  -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75); 132  -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75); 133  box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75); 134  } 135 </style>

綜合運用開發遊戲

 1 <script>
 2 function runSlots() {  3 var slotOne;  4 var slotTwo;  5 var slotThree;  6 
 7 var images = ["https://www.w3cschool.cn/statics/codecamp/images/9H17QFk.png", "https://www.w3cschool.cn/statics/codecamp/images/9RmpXTy.png", "https://www.w3cschool.cn/statics/codecamp/images/VJnmtt5.png"];  8 
 9 slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;  10 slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;  11 slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;  12 
 13 
 14 // Only change code below this line.
 15 if (slotOne === slotTwo && slotTwo === slotThree){  16     $(".logger").html(slotOne + "It's A Win");  17 } else {  18     return null;  19 }  20 
 21 
 22 // Only change code above this line.
 23 
 24 if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){  25 $(".logger").html(slotOne + " " + slotTwo + " " + slotThree);  26 }  27 
 28 $(".logger").append(" Not A Win");  29 
 30 return [slotOne, slotTwo, slotThree];  31 }  32 
 33 $(document).ready(function() {  34  $(".go").click(function() {  35  runSlots();  36  });  37  });  38 </script>
 39  
 40 <div>
 41  <div class = "container inset">
 42  <div class = "header inset">
 43  <img src="/statics/codecamp/images/freecodecamp_logo.svg" alt="learn to code JavaScript at Free Code Camp logo" class="img-responsive nav-logo">
 44  <h2>FCC Slot Machine</h2>
 45  </div>
 46  <div class = "slots inset">
 47  <div class = "slot inset">
 48  
 49  </div>
 50  <div class = "slot inset">
 51  
 52  </div>
 53  <div class = "slot inset">
 54  
 55  </div>
 56  </div>
 57  <br/>
 58  <div class = "outset">
 59  <button class = "go inset">
 60  Go  61  </button>
 62  </div>
 63  <br/>
 64  <div class = "foot inset">
 65  <span class = "logger"></span>
 66  </div>
 67  </div>
 68 </div>
 69 
 70 <style>
 71  .container {  72  background-color: #4a2b0f;  73  height: 400px;  74  width: 260px;  75  margin: 50px auto;  76  border-radius: 4px;  77  }  78  .header {  79  border: 2px solid #fff;  80  border-radius: 4px;  81  height: 55px;  82  margin: 14px auto;  83  background-color: #457f86  84  }  85  .header h2 {  86  height: 30px;  87  margin: auto;  88  }  89  .header h2 {  90  font-size: 14px;  91  margin: 0 0;  92  padding: 0;  93  color: #fff;  94  text-align: center;  95  }  96  .slots{  97  display: flex;  98  background-color: #457f86;  99  border-radius: 6px; 100  border: 2px solid #fff; 101  } 102  .slot{ 103  flex: 1 0 auto; 104  background: white; 105  height: 75px; 106  margin: 8px; 107  border: 2px solid #215f1e; 108  border-radius: 4px; 109  } 110  .go { 111  width: 100%; 112  color: #fff; 113  background-color: #457f86; 114  border: 2px solid #fff; 115  border-radius: 2px; 116  box-sizing: none; 117  outline: none!important; 118  } 119  .foot { 120  height: 150px; 121  background-color: 457f86; 122  border: 2px solid #fff; 123  } 124  
125  .logger { 126  color: white; 127  margin: 10px; 128  } 129  
130  .outset { 131  -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75); 132  -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75); 133  box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75); 134  } 135  
136  .inset { 137  -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75); 138  -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75); 139  box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75); 140  } 141 </style>

107進一步完善小遊戲項目

 1 <script>
 2 function runSlots() {  3 var slotOne;  4 var slotTwo;  5 var slotThree;  6 
 7 var images = ["https://www.w3cschool.cn/statics/codecamp/images/9H17QFk.png", "https://www.w3cschool.cn/statics/codecamp/images/9RmpXTy.png", "https://www.w3cschool.cn/statics/codecamp/images/VJnmtt5.png"];  8 
 9 slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;  10 slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;  11 slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;  12 
 13 
 14 // Only change code below this line.
 15 $($(".slot")[0]).html(slotOne);  16 $($(".slot")[1]).html(slotTwo);  17 $($(".slot")[2]).html(slotThree);  18 
 19 
 20 // Only change code above this line.
 21 
 22 if (slotOne === slotTwo && slotTwo === slotThree) {  23 $(".logger").html(" It's A Win")  24 return null;  25 }  26 
 27 if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){  28 $(".logger").html(slotOne + " " + slotTwo + " " + slotThree);  29 }  30 
 31 $(".logger").append(" Not A Win");  32 
 33 
 34 return [slotOne, slotTwo, slotThree];  35 }  36 
 37 $(document).ready(function() {  38  $(".go").click(function() {  39  runSlots();  40  });  41  });  42 </script>
 43  
 44 <div>
 45  <div class = "container inset">
 46  <div class = "header inset">
 47  <img src="/statics/codecamp/images/freecodecamp_logo.svg" alt="learn to code JavaScript at Free Code Camp logo" class="img-responsive nav-logo">
 48  <h2>FCC Slot Machine</h2>
 49  </div>
 50  <div class = "slots inset">
 51  <div class = "slot inset">
 52  
 53  </div>
 54  <div class = "slot inset">
 55  
 56  </div>
 57  <div class = "slot inset">
 58  
 59  </div>
 60  </div>
 61  <br/>
 62  <div class = "outset">
 63  <button class = "go inset">
 64  Go  65  </button>
 66  </div>
 67  <br/>
 68  <div class = "foot inset">
 69  <span class = "logger"></span>
 70  </div>
 71  </div>
 72 </div>
 73 
 74 <style>
 75  .container {  76  background-color: #4a2b0f;  77  height: 400px;  78  width: 260px;  79  margin: 50px auto;  80  border-radius: 4px;  81  }  82  .header {  83  border: 2px solid #fff;  84  border-radius: 4px;  85  height: 55px;  86  margin: 14px auto;  87  background-color: #457f86  88  }  89  .header h2 {  90  height: 30px;  91  margin: auto;  92  }  93  .header h2 {  94  font-size: 14px;  95  margin: 0 0;  96  padding: 0;  97  color: #fff;  98  text-align: center;  99  } 100  .slots{ 101  display: flex; 102  background-color: #457f86; 103  border-radius: 6px; 104  border: 2px solid #fff; 105  } 106  .slot{ 107  flex: 1 0 auto; 108  background: white; 109  height: 75px; 110  margin: 8px; 111  border: 2px solid #215f1e; 112  border-radius: 4px; 113  text-align: center; 114  padding-top: 25px; 115  } 116  .go { 117  width: 100%; 118  color: #fff; 119  background-color: #457f86; 120  border: 2px solid #fff; 121  border-radius: 2px; 122  box-sizing: none; 123  outline: none!important; 124  } 125  .foot { 126  height: 150px; 127  background-color: 457f86; 128  border: 2px solid #fff; 129  } 130  
131  .logger { 132  color: white; 133  margin: 10px; 134  } 135  
136  .outset { 137  -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75); 138  -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75); 139  box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75); 140  } 141  
142  .inset { 143  -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75); 144  -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75); 145  box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75); 146  } 147 </style>

108小遊戲項目運做起來

 1 <script>
 2 function runSlots() {  3 var slotOne;  4 var slotTwo;  5 var slotThree;  6 
 7 var images = ["https://www.w3cschool.cn/statics/codecamp/images/9H17QFk.png", "https://www.w3cschool.cn/statics/codecamp/images/9RmpXTy.png", "https://www.w3cschool.cn/statics/codecamp/images/VJnmtt5.png"];  8 
 9 slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;  10 slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;  11 slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;  12 
 13 
 14 // Only change code below this line.
 15 $($('.slot')[0]).html('<img src = "' + images[slotOne - 1] + '">');  16 $($('.slot')[1]).html('<img src = "' + images[slotTwo - 1] + '">');  17 $($('.slot')[2]).html('<img src = "' + images[slotThree -1 ] +
 18 '">');  19 // Only change code above this line.
 20 
 21 if (slotOne === slotTwo && slotTwo === slotThree) {  22 $('.logger').html("It's A Win");  23 return null;  24 }  25 
 26 if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){  27 $(".logger").html(slotOne + " " + slotTwo + " " + slotThree);  28 }  29 
 30 $('.logger').append(" Not A Win");  31 
 32 return [slotOne, slotTwo, slotThree];  33 }  34 
 35 $(document).ready(function() {  36  $('.go').click(function() {  37  runSlots();  38  });  39  });  40 </script>
 41  
 42 <div>
 43  <div class = 'container inset'>
 44  <div class = 'header inset'>
 45  <img src='/statics/codecamp/images/freecodecamp_logo.svg' alt='learn to code JavaScript at Free Code Camp logo' class='img-responsive nav-logo'>
 46  <h2>FCC Slot Machine</h2>
 47  </div>
 48  <div class = 'slots inset'>
 49  <div class = 'slot inset'>
 50  
 51  </div>
 52  <div class = 'slot inset'>
 53  
 54  </div>
 55  <div class = 'slot inset'>
 56  
 57  </div>
 58  </div>
 59  <br/>
 60  <div class = 'outset'>
 61  <button class = 'go inset'>
 62  Go  63  </button>
 64  </div>
 65  <br/>
 66  <div class = 'foot inset'>
 67  <span class = 'logger'></span>
 68  </div>
 69  </div>
 70 </div>
 71 
 72 <style>
 73  .slot > img {  74 margin: 0!important;  75 height: 71px;  76 width: 50px;  77  }  78  .container {  79  background-color: #4a2b0f;  80  height: 400px;  81  width: 260px;  82  margin: 50px auto;  83  border-radius: 4px;  84  }  85  .header {  86  border: 2px solid #fff;  87  border-radius: 4px;  88  height: 55px;  89  margin: 14px auto;  90  background-color: #457f86  91  }  92  .header h2 {  93  height: 30px;  94  margin: auto;  95  }  96  .header h2 {  97  font-size: 14px;  98  margin: 0 0;  99  padding: 0; 100  color: #fff; 101  text-align: center; 102  } 103  .slots{ 104  display: flex; 105  background-color: #457f86; 106  border-radius: 6px; 107  border: 2px solid #fff; 108  } 109  .slot{ 110  flex: 1 0 auto; 111  background: white; 112  height: 75px; 113  width: 50px; 114  margin: 8px; 115  border: 2px solid #215f1e; 116  border-radius: 4px; 117  text-align: center; 118  } 119  .go { 120  width: 100%; 121  color: #fff; 122  background-color: #457f86; 123  border: 2px solid #fff; 124  border-radius: 2px; 125  box-sizing: none; 126  outline: none!important; 127  } 128  .foot { 129  height: 150px; 130  background-color: 457f86; 131  border: 2px solid #fff; 132  } 133  
134  .logger { 135  color: white; 136  margin: 10px; 137  } 138  
139  .outset { 140  -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75); 141  -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75); 142  box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75); 143  } 144  
145  .inset { 146  -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75); 147  -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75); 148  box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75); 149  } 150 </style>

109爲小遊戲項目添加圖片