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

第二十五关转义特殊符号

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   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   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   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   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   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   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  50px;
 77  }
 78  .container {
 79  background-color: #4a2b0f;
 80  height: 400px;
 81   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   50px;
114  margin: 8px;
115  border: 2px solid #215f1e;
116  border-radius: 4px;
117  text-align: center;
118  }
119  .go {
120   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为小游戏项目添加图片

相关阅读:
悲剧的程序员
 【C++】关于随机函数与概率设置
 布局管理器（一）
敏捷开发,如何搜集故事
 【Visual C++】CDC与HDC的区别以及相互转换
 IFRAME without src attribute on HTTPS in Internet Explorer
测量某断代码执行时间－代码
 数据一致性实现技术
 ffmpeg
Log4j的使用方法
原文地址：https://www.cnblogs.com/edward-life/p/10765249.html