W3CSchool实战闯关笔记（JavaScript）

秒速五厘米 2021-12-17 08:01 299阅读 0赞

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第一关注释

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第二关声明变量

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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;

第三关变量赋值

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第四关赋初值

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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!";

第五关未定义变量

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第六关大小写敏感

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 var sum = 10 + 10;

第七关加法

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 var difference = 45 - 33;

第八关减法

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 var product = 8 * 10;

第九关乘法

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 var quotient = 66 / 33;

第十关除法

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第十一关自增

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第十二关自减

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第十三关浮点数

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 var product = 2.0 * 2.5;

第十四关小数乘法

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 var quotient = 4.4 / 2.0;

第十五关小数除法

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第十六关取余

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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;

第十七关+=

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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;

第十八关 -=

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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;

第十九关 \*=

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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;

第二十关 /=

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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);

第二十一关基本运算综合

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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";

第二十二关声明字符串

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第二十三关转义字符串中的引号

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第二十四关单引号

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第二十五关转义特殊符号

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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.";

第二十六关字符串连接

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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.";

第二十七关 +=字符串

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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!";

第二十八关变量连接字符串

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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;

第二十九关追加变量到字符串

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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;

第三十关获取字符串的长度

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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];

第三十一关获取字符串中的第一个字符

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第三十二关字符串的不可变性

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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个字符

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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];

第三十四关索引查找字符串中的最后一个字符

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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个字符

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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");

第三十六关字符串操作综合

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第三十七关数组

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第三十八关多维数组

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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];

第三十九关查找数组中的数据

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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;

第四十关修改数组中的数据

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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];

第四十一关操作多维数组

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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()函数追加数组数据

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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()函数弹出数组最后数据

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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()函数移出数组第一个数据

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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()函数移入数据到数组第一位

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第四十六关创建购物清单

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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();

第四十七关函数

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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);

第四十八关带参数函数

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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 }

第四十九关函数全局变量

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第五十关函数局部变量

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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();

第五十一关全局变量与局部变量差异

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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返回值

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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);

第五十三关使用返回值进行赋值

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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));

第五十四关队列

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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);

第五十七关==

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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);

第五十八关===

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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);

第五十九关!=

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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);

第六十关!==

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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);

第六十一关>

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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);

第六十二关>=

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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);

第六十三关<

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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);

第六十四关<=

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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);

第六十五关&&

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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);

第六十六关 ||

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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语句中代码的执行顺序

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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 语句

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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);

第七十一关逻辑运算综合

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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语句

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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语句中的多个相同选项判断

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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语句

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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值

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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跳出函数

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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);

第七十八关条件判断算法综合

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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 };

第七十九关对象操作

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第八十关使用点操作符.读取对象属性

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第八十一关使用\[\]读取对象属性

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第八十二关使用变量访问对象属性

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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.

第八十三关更新对象属性

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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";

第八十四关给对象添加属性

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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;

第八十五关删除对象属性

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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");

第八十六关使用对象进行查找值

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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");

第八十七关检查对象属性

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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操作

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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属性值

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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数组值

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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集合操作

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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循环

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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语句循环按奇数顺序迭代

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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循环逆向迭代

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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循环迭代输出数组

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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]]);

第九十六关循环语句综合

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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语句循环

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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");

第九十八关使用循环语句查找通讯录

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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()

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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()生成随机数

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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()在一个范围内生成随机数

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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关正则表达式操作字符串

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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关正则表达式选取数值

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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关正则表达式选取空白字符

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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关正则表达式反转匹配

![ContractedBlock.gif][]106 ![ExpandedBlockStart.gif][]

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>

综合运用开发游戏

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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进一步完善小游戏项目

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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小游戏项目运作起来

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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为小游戏项目添加图片

转载于:https://www.cnblogs.com/edward-life/p/10765249.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211217/4c2a84f73c2a4c33b47f4549fd7f1742.png