W3CSchool实战闯关笔记（JavaScript）

最新推荐文章于 2020-04-07 09:07:11 发布
最新推荐文章于 2020-04-07 09:07:11 发布
阅读量2.6k 收藏 15
点赞数 8
文章标签： javascript json 游戏 ViewUI
原文链接：http://www.cnblogs.com/edward-life/p/10765249.html
版权 
1 //handsome
2 /**
3 *ugly
4 **/
第一关注释 
1 // 举例
2 var myName;
3 
4 // Define myName below this line
第二关声明变量 
1 // Setup
2 var a;
3 var b = 2;
4 
5 // Only change code below this line
6 var a = 7;
7 var b = a;
第三关变量赋值 
1 // 举例
2 var ourVar = 19;
3 
4 // Only change code below this line
5 
6 var a = 9;
第四关赋初值 
 1 // Initialize these three variables
 2 var a = 5;
 3 var b = 10;
 4 var c = "I am a";
 5 
 6 // Do not change code below this line
 7 
 8 a = a + 1;
 9 b = b + 5;
10 c = c + " String!";
第五关未定义变量 
1 // Declarations
2 var studlyCapVar;
3 var properCamelCase;
4 var titleCaseOver;
5 
6 // Assignments
7 studlyCapVar = 10;
8 properCamelCase = "A String";
9 titleCaseOver = 9000;
第六关大小写敏感 
1 var sum = 10 + 10;
第七关加法 
1 var difference = 45 - 33;
第八关减法 
1 var product = 8 * 10;
第九关乘法 
1 var quotient = 66 / 33;
第十关除法 
1 var myVar = 87;
2 
3 // Only change code below this line
4 myVar++;
第十一关自增 
1 var myVar = 11;
2 
3 // Only change code below this line
4 myVar--;
第十二关自减 
1 var ourDecimal = 5.7;
2 
3 // Only change code below this line
4 
5 
6 var myDecimal = 5.7;
第十三关浮点数 
1 var product = 2.0 * 2.5;
第十四关小数乘法 
1 var quotient = 4.4 / 2.0;
第十五关小数除法 
1 // Only change code below this line
2 
3 var remainder = 11 % 3;
第十六关取余 
1 var a = 3;
2 var b = 17;
3 var c = 12;
4 
5 // Only modify code below this line
6 
7 a += 12;
8 b += 9;
9 c += 7;
第十七关+= 
1 var a = 11;
2 var b = 9;
3 var c = 3;
4 
5 // Only modify code below this line
6 
7 a -= 6;
8 b -= 15;
9 c -= 1;
第十八关 -= 
1 var a = 5;
2 var b = 12;
3 var c = 4.6;
4 
5 // Only modify code below this line
6 
7 a *= 5;
8 b *= 3;
9 c *= 10;
第十九关 *= 
1 var a = 48;
2 var b = 108;
3 var c = 33;
4 
5 // Only modify code below this line
6 
7 a /= 12;
8 b /= 4;
9 c /= 11;
第二十关 /= 
 1 function convert(celsius) {
 2 // Only change code below this line
 3 var fahrenheit = 32 + celsius * 9 / 5;
 4 
 5 // Only change code above this line
 6 return fahrenheit;
 7 }
 8 
 9 // Change the inputs below to test your code
10 convert(30);
第二十一关基本运算综合 
1 // 举例
2 var firstName = "Alan";
3 var lastName = "Turing";
4 
5 // Only change code below this line
6 var myFirstName = "zhong";
7 var myLastName  = "liu";
第二十二关声明字符串 
1 var myStr = "I am a \"double quoted\" string inside \"double quotes\""; // Change this line
第二十三关转义字符串中的引号 
1 var myStr = '<a href="http://www.example.com" target="_blank">Link</a>';
第二十四关单引号 
1 var myStr = "\\ \t \r \n";
第二十五关转义特殊符号 
1 // 举例
2 var ourStr = "I come first. " + "I come second.";
3 
4 // Only change code below this line
5 
6 var myStr = "This is the start. " + "This is the end.";
第二十六关字符串连接 
1 // 举例
2 var ourStr = "I come first. ";
3 ourStr += "I come second.";
4 
5 // Only change code below this line
6 
7 var myStr = "This is the first sentence. ";
8 myStr += "This is the second sentence.";
第二十七关 +=字符串 
1 // 举例
2 var ourName = "Free Code Camp";
3 var ourStr = "Hello, our name is " + ourName + ", how are you?";
4 
5 // Only change code below this line
6 var myName = "edward";
7 var myStr = "My name is " + myName + " and I am swell!";
第二十八关变量连接字符串 
 1 // 举例
 2 var anAdjective = "awesome!";
 3 var ourStr = "Free Code Camp is ";
 4 ourStr += anAdjective;
 5 
 6 // Only change code below this line
 7 
 8 var someAdjective = "happy";
 9 var myStr = "Learning to code is ";
10 myStr += someAdjective;
第二十九关追加变量到字符串 
 1 // 举例
 2 var firstNameLength = 0;
 3 var firstName = "Ada";
 4 
 5 firstNameLength = firstName.length;
 6 
 7 // Setup
 8 var lastNameLength = 0;
 9 var lastName = "Lovelace";
10 
11 // Only change code below this line.
12 
13 lastNameLength = lastName.length;
第三十关获取字符串的长度 
 1 // 举例
 2 var firstLetterOfFirstName = "";
 3 var firstName = "Ada";
 4 
 5 firstLetterOfFirstName = firstName[0];
 6 
 7 // Setup
 8 var firstLetterOfLastName = "";
 9 var lastName = "Lovelace";
10 
11 // Only change code below this line
12 firstLetterOfLastName = lastName[0];
第三十一关获取字符串中的第一个字符 
1 // Setup
2 var myStr = "Jello World";
3 
4 // Only change code below this line
5 
6 myStr = "Hello World"; // Fix Me
第三十二关字符串的不可变性 
1 // 举例
2 var firstName = "Ada";
3 var secondLetterOfFirstName = firstName[1];
4 
5 // Setup
6 var lastName = "Lovelace";
7 
8 // Only change code below this line.
9 var thirdLetterOfLastName = lastName[2];
第三十三关索引查找字符串中的第N个字符 
1 // 举例
2 var firstName = "Ada";
3 var lastLetterOfFirstName = firstName[firstName.length - 1];
4 
5 // Setup
6 var lastName = "Lovelace";
7 
8 // Only change code below this line.
9 var lastLetterOfLastName = lastName[lastName.length - 1];
第三十四关索引查找字符串中的最后一个字符 
1 // 举例
2 var firstName = "Ada";
3 var thirdToLastLetterOfFirstName = firstName[firstName.length - 3];
4 
5 // Setup
6 var lastName = "Lovelace";
7 
8 // Only change code below this line
9 var secondToLastLetterOfLastName = lastName[lastName.length - 2];
第三十五关索引查找字符串中倒数第N个字符 
 1 function wordBlanks(myNoun, myAdjective, myVerb, myAdverb) {
 2 var result = "";
 3 // Your code below this line
 4 result = myAdjective + " " + myNoun + " " + myVerb + " " + myAdverb;
 5 // Your code above this line
 6 return result;
 7 }
 8 
 9 // Change the words here to test your function
10 wordBlanks("dog", "big", "ran", "quickly");
第三十六关字符串操作综合 
1 // 举例
2 var array = ["John", 23];
3 
4 // Only change code below this line.
5 var myArray = ["Edward",23,"China","173cm"];
第三十七关数组 
1 // 举例
2 var ourArray = [["the universe", 42], ["everything", 101010]];
3 
4 // Only change code below this line.
5 var myArray = [["quan",24],["Edward",23]];
第三十八关多维数组 
 1 // 举例
 2 var ourArray = [1,2,3];
 3 var ourData = ourArray[0]; // equals 1
 4 
 5 // Setup
 6 var myArray = [1,2,3];
 7 
 8 // Only change code below this line.
 9 
10 var myData = myArray[0];
第三十九关查找数组中的数据 
 1 // 举例
 2 var ourArray = [1,2,3];
 3 ourArray[1] = 3; // ourArray now equals [1,3,3].
 4 
 5 // Setup
 6 var myArray = [1,2,3];
 7 
 8 // Only change code below this line.
 9 
10 myArray[0] = 3;
第四十关修改数组中的数据 
1 // Setup
2 var myArray = [[1,2,3], [4,5,6], [7,8,9], [[10,11,12], 13, 14]];
3 
4 // Only change code below this line.
5 var myData = myArray[2][1];
第四十一关操作多维数组 
 1 // 举例
 2 var ourArray = ["Stimpson", "J", "cat"];
 3 ourArray.push(["happy", "joy"]); 
 4 // ourArray now equals ["Stimpson", "J", "cat", ["happy", "joy"]]
 5 
 6 // Setup
 7 var myArray = [["John", 23], ["cat", 2]];
 8 
 9 // Only change code below this line.
10 
11 myArray.push(["dog",3]);
第四十二关push()函数追加数组数据 
 1 // 举例
 2 var ourArray = [1,2,3];
 3 var removedFromOurArray = ourArray.pop(); 
 4 // removedFromOurArray now equals 3, and ourArray now equals [1,2]
 5 
 6 // Setup
 7 var myArray = [["John", 23], ["cat", 2]];
 8 
 9 // Only change code below this line.
10 var removedFromMyArray = myArray.pop();
第四十三关pop()函数弹出数组最后数据 
 1 // 举例
 2 var ourArray = ["Stimpson", "J", ["cat"]];
 3 removedFromOurArray = ourArray.shift();
 4 // removedFromOurArray now equals "Stimpson" and ourArray now equals ["J", ["cat"]].
 5 
 6 // Setup
 7 var myArray = [["John", 23], ["dog", 3]];
 8 
 9 // Only change code below this line.
10 var removedFromMyArray = myArray.shift();
第四十四关shift()函数移出数组第一个数据 
 1 // 举例
 2 var ourArray = ["Stimpson", "J", "cat"];
 3 ourArray.shift(); // ourArray now equals ["J", "cat"]
 4 ourArray.unshift("Happy"); 
 5 // ourArray now equals ["Happy", "J", "cat"]
 6 
 7 // Setup
 8 var myArray = [["John", 23], ["dog", 3]];
 9 myArray.shift();
10 
11 // Only change code below this line.
12 
13 myArray.unshift(["Paul",35]);
第四十五关unshift()函数移入数据到数组第一位 
1 var myList = [["soap",3],["toothbrush",2],["tissue",3],["shoes",2],["wallet",1]];
第四十六关创建购物清单 
 1 // 举例
 2 function ourFunction() {
 3 console.log("Heyya, World");
 4 }
 5 
 6 ourFunction();
 7 
 8 // Only change code below this line
 9 function myFunction(){
10     console.log("Hi World");
11 }
12 
13 myFunction();
第四十七关函数 
 1 // 举例
 2 function ourFunction(a, b) {
 3 console.log(a - b);
 4 }
 5 ourFunction(10, 5); // Outputs 5
 6 
 7 // Only change code below this line.
 8 function myFunction(a,b){
 9     console.log(a + b);
10 }
11 
12 myFunction(3,4);
第四十八关带参数函数 
 1 // Declare your variable here
 2 var myGlobal =10;
 3 
 4 function fun1() {
 5 // Assign 5 to oopsGlobal Here
 6 oopsGlobal = 5;
 7 }
 8 
 9 // Only change code above this line
10 function fun2() {
11 var output = "";
12 if (typeof myGlobal != "undefined") {
13 output += "myGlobal: " + myGlobal;
14 }
15 if (typeof oopsGlobal != "undefined") {
16 output += " oopsGlobal: " + oopsGlobal;
17 }
18 console.log(output);
19 }
第四十九关函数全局变量 
 1 function myFunction() {
 2 var myVar = 'use strict';
 3 
 4 
 5 console.log(myVar);
 6 }
 7 myFunction();
 8 
 9 // run and check the console 
10 // myVar is not defined outside of myFunction
11 
12 
13 // now remove the console log line to pass the test
第五十关函数局部变量 
 1 // Setup
 2 var outerWear = "T-Shirt";
 3 
 4 function myFunction() {
 5 // Only change code below this line
 6 
 7 var outerWear = "sweater";
 8 
 9 // Only change code above this line
10 return outerWear;
11 }
12 
13 myFunction();
第五十一关全局变量与局部变量差异 
 1 // 举例
 2 function minusSeven(num) {
 3 return num - 7;
 4 }
 5 
 6 // Only change code below this line
 7 
 8 function timesFive(number){
 9     return number * 5;
10 }
第五十二关函数使用return返回值 
 1 // 举例
 2 var changed = 0;
 3 
 4 function change(num) {
 5 return (num + 5) / 3;
 6 }
 7 
 8 changed = change(10);
 9 
10 // Setup
11 var processed = 0;
12 
13 function process(num) {
14 return (num + 3) / 5;
15 }
16 
17 // Only change code below this line
18 
19 processed = process(7);
第五十三关使用返回值进行赋值 
 1 function queue(arr, item) {
 2 // Your code here
 3 arr.push(item);
 4 item = arr[0];
 5 arr.shift();
 6 return item;// Change this line
 7 }
 8 
 9 // Test Setup
10 var testArr = [1,2,3,4,5];
11 
12 // Display Code
13 console.log("Before: " + JSON.stringify(testArr));
14 console.log(queue(testArr, 6)); // Modify this line to test
15 console.log("After: " + JSON.stringify(testArr));
第五十四关队列 
1 function welcomeToBooleans() {
2 
3 // Only change code below this line.
4 
5 return true; // Change this line
6 
7 // Only change code above this line.
8 }
第五十五关布尔boolean 
 1 // 举例
 2 function ourFunction(isItTrue) {
 3 if (isItTrue) { 
 4 return "Yes, it's true";
 5 }
 6 return "No, it's false";
 7 }
 8 
 9 // Setup
10 function myFunction(wasThatTrue) {
11 
12 // Only change code below this line.
13 if(wasThatTrue == true){
14     return "That was true";
15 }else{
16     return "That was false";
17 }
18 
19 
20 // Only change code above this line.
21 
22 }
23 
24 // Change this value to test
25 myFunction(false);
第五十六关if 
 1 // Setup
 2 function myTest(val) {
 3 if (val == 12) { // Change this line
 4 return "Equal";
 5 }
 6 return "Not Equal";
 7 }
 8 
 9 // Change this value to test
10 myTest(10);
第五十七关== 
 1 // Setup
 2 function myTest(val) {
 3 if (val === 7) { // Change this line
 4 return "Equal";
 5 }
 6 return "Not Equal";
 7 }
 8 
 9 // Change this value to test
10 myTest(10);
第五十八关=== 
 1 // Setup
 2 function myTest(val) {
 3 if (val != 99) { // Change this line
 4 return "Not Equal";
 5 }
 6 return "Equal";
 7 }
 8 
 9 // Change this value to test
10 myTest(10);
第五十九关!= 
 1 // Setup
 2 function myTest(val) {
 3 // Only Change Code Below this Line
 4 
 5 if (val !== 17) {
 6 
 7 // Only Change Code Above this Line
 8 
 9 return "Not Equal";
10 }
11 return "Equal";
12 }
13 
14 // Change this value to test
15 myTest(10);
第六十关!== 
 1 function myTest(val) {
 2 if (val > 100) {// Change this line
 3 return "Over 100";
 4 }
 5 
 6 if (val > 10) {// Change this line
 7 return "Over 10";
 8 }
 9 
10 return "10 or Under";
11 }
12 
13 // Change this value to test
14 myTest(10);
第六十一关> 
 1 function myTest(val) {
 2 if (val >= 20) {// Change this line
 3 return "20 or Over";
 4 }
 5 
 6 if (val >= 10) {// Change this line
 7 return "10 or Over";
 8 }
 9 
10 return "9 or Under";
11 }
12 
13 // Change this value to test
14 myTest(10);
第六十二关>= 
 1 function myTest(val) {
 2 if (val < 25) {// Change this line
 3 return "Under 25";
 4 }
 5 
 6 if (val < 55) {// Change this line
 7 return "Under 55";
 8 }
 9 
10 return "55 or Over";
11 }
12 
13 // Change this value to test
14 myTest(10);
第六十三关< 
 1 function myTest(val) {
 2 if (val <= 12) {// Change this line
 3 return "Smaller Than or Equal to 12";
 4 }
 5 
 6 if (val <= 24) {// Change this line
 7 return "Smaller Than or Equal to 24";
 8 }
 9 
10 return "25 or More";
11 }
12 
13 // Change this value to test
14 myTest(10);
第六十四关<= 
 1 function myTest(val) {
 2 // Only change code below this line
 3 
 4 if (val <= 50 && val >=25) {
 5 
 6 return "Yes";
 7 
 8 }
 9 
10 // Only change code above this line
11 return "No";
12 }
13 
14 // Change this value to test
15 myTest(10);
第六十五关&& 
 1 function myTest(val) {
 2 // Only change code below this line
 3 
 4 if (val<10 || val >20) {
 5     return "Outside";
 6 } else {
 7     return "Inside";
 8 }
 9 // Only change code above this line
10 }
11 
12 
13 // Change this value to test
14 myTest(15);
第六十六关 || 
 1 function myTest(val) {
 2 var result = "";
 3 // Only change code below this line
 4 
 5 if (val > 5) {
 6 result = "Bigger than 5";
 7 } else {
 8 result = "5 or Smaller";
 9 }
10 
11 // Only change code above this line
12 return result;
13 }
14 
15 // Change this value to test
16 myTest(4);
第六十七关 else 
 1 function myTest(val) {
 2 if (val > 10) {
 3 return "Greater than 10";
 4 } else if (val < 5) {
 5 return "Smaller than 5";
 6 } else {
 7 return "Between 5 and 10";
 8 }
 9 }
10 // Change this value to test
11 myTest(7);
第六十八关 else if 
 1 function myTest(val) {
 2 if (val < 5) {
 3 return "Less than 5";
 4 } else if (val < 10) {
 5 return "Less than 10";
 6 } else {
 7 return "Greater than or equal to 10";
 8 }
 9 }
10 
11 // Change this value to test
12 myTest(7);
第六十九关if、else if语句中代码的执行顺序 
 1 function myTest(num) {
 2 // Only change code below this line
 3 if (num < 5) {
 4     return "Tiny";
 5 } else if(num < 10){
 6     return "Small";
 7 } else if(num < 15){
 8     return "Medium";
 9 } else if(num < 20){
10     return "Large";
11 } else {
12     return "Huge";
13 }
14 // Only change code above this line
15 }
16 
17 // Change this value to test
18 myTest(7);
第七十关同时使用if、else if 语句 
 1 function golfScore(par, strokes) {
 2 // Only change code below this line
 3     if (strokes == 1) {
 4         return "Hole-in-one!";
 5     } else if(strokes <= par-2 ){
 6         return "Eagle";
 7     } else if(strokes == par-1){
 8         return "Birdie";
 9     } else if(strokes == par){
10         return "Par";
11     } else if(strokes == par+1){
12         return "Bogey";
13     } else if(strokes == par+2){
14         return "Double Bogey";
15     } else {
16         return "Go Home!";
17     }
18 // Only change code above this line
19 }
20 
21 // Change these values to test
22 golfScore(5, 4);
第七十一关逻辑运算综合 
 1 function myTest(val) {
 2 var answer = "";
 3 // Only change code below this line
 4 switch (val) {
 5     case 1:
 6         answer = "alpha";
 7         break;
 8     case 2:
 9         answer = "beta";
10         break;
11     case 3:
12         answer = "gamma";
13         break;
14     default:
15         answer = "delta";
16         // code
17 }
18 
19 
20 // Only change code above this line
21 return answer;
22 }
23 
24 // Change this value to test
25 myTest(1);
第七十二关 switch 
 1 function myTest(val) {
 2 var answer = "";
 3 // Only change code below this line
 4 switch (val) {
 5     case 'a':
 6         answer = "apple";
 7         break;
 8     case 'b':
 9         answer = "bird";
10         break;
11     case 'c':
12         answer = "cat";
13         break;
14     default:
15         answer = "stuff";
16 }
17 
18 
19 // Only change code above this line
20 return answer;
21 }
22 
23 // Change this value to test
24 myTest(1);
第七十三关在switch语句中添加default语句 
 1 function myTest(val) {
 2 var answer = "";
 3 // Only change code below this line
 4 switch (val) {
 5     case 1:
 6     case 2:
 7     case 3:
 8         answer = "Low";
 9         break;
10     case 4:
11     case 5:
12     case 6:
13         answer = "Mid";
14         break;
15     case 7:
16     case 8:
17     case 9:
18         answer = "High";
19         break;
20     default:
21         // code
22 }
23 
24 
25 // Only change code above this line
26 return answer;
27 }
28 
29 // Change this value to test
30 myTest(1);
第七十四关switch语句中的多个相同选项判断 
 1 function myTest(val) {
 2 var answer = "";
 3 // Only change code below this line
 4 switch (val) {
 5     case 'bob':
 6         answer = "Marley";
 7         break;
 8     case 42:
 9         answer = "The Answer";
10         break;
11     case 1:
12         answer = "There is no #1";
13         break;
14     case 99:
15         answer = "Missed me by this much!";
16         break;
17     case 7:
18         answer = "Ate Nine";
19         break;
20     default:
21 }
22 
23 
24 
25 // Only change code above this line
26 return answer;
27 }
28 
29 // Change this value to test
30 myTest(7);
第七十五关使用switch语句替换串联的if、else if语句 
1 function isLess(a, b) {
2 // Fix this code
3 return a<b;
4 }
5 
6 // Change these values to test
7 isLess(10, 15);
第七十六关直接在函数中返回boolean值 
 1 // Setup
 2 function abTest(a, b) {
 3 // Only change code below this line
 4 if ( a<0 || b<0 ) {
 5     return undefined;
 6 }
 7 
 8 
 9 // Only change code above this line
10 
11 return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));
12 }
13 
14 // Change values below to test your code
15 abTest(2,2);
第七十七关使用return跳出函数 
 1 var count = 0;
 2 
 3 function cc(card) {
 4 // Only change code below this line
 5 switch (card) {
 6     case 2:
 7     case 3:
 8     case 4:
 9     case 5:
10     case 6:
11         count++;
12         break;
13     case 10:
14     case 'J':
15     case 'Q':
16     case 'K':
17     case 'A':
18         count--;
19         break;
20     default:
21 }
22 
23 if (count > 0) {
24     return count+" Bet";
25 } else {
26     return count+" Hold";
27 }
28 
29 // Only change code above this line
30 }
31 
32 // Add/remove calls to test your function.
33 // 提示: Only the last will display
34 cc(2);
第七十八关条件判断算法综合 
 1 // 举例
 2 var ourDog = {
 3 "name": "Camper",
 4 "legs": 4,
 5 "tails": 1,
 6 "friends": ["everything!"]
 7 };
 8 
 9 // Only change code below this line.
10 
11 var myDog = {
12 "name" : "Laffy",
13 "legs" : 4,
14 "tails" : 1,
15 "friends" :["edward","viola"]
16 
17 
18 };
第七十九关对象操作 
 1 // Setup
 2 var testObj = {
 3 "hat": "ballcap",
 4 "shirt": "jersey",
 5 "shoes": "cleats"
 6 };
 7 
 8 // Only change code below this line
 9 
10 var hatValue = testObj.hat;// Change this line
11 var shirtValue = testObj.shirt;// Change this line
第八十关使用点操作符.读取对象属性 
 1 // Setup
 2 var testObj = {
 3 "an entree": "hamburger",
 4 "my side": "veggies",
 5 "the drink": "water"
 6 };
 7 
 8 // Only change code below this line
 9 
10 var entreeValue = testObj["an entree"]; // Change this line
11 var drinkValue = testObj["the drink"];// Change this line
第八十一关使用[]读取对象属性 
 1 // Setup
 2 var testObj = {
 3 12: "Namath",
 4 16: "Montana",
 5 19: "Unitas"
 6 };
 7 
 8 // Only change code below this line;
 9 
10 var playerNumber = 16; // Change this Line
11 var player = testObj[playerNumber]; // Change this Line
第八十二关使用变量访问对象属性 
 1 // 举例
 2 var ourDog = {
 3 "name": "Camper",
 4 "legs": 4,
 5 "tails": 1,
 6 "friends": ["everything!"]
 7 };
 8 
 9 ourDog.name = "Happy Camper";
10 
11 // Setup
12 var myDog = {
13 "name": "Coder",
14 "legs": 4,
15 "tails": 1,
16 "friends": ["Free Code Camp Campers"]
17 };
18 
19 myDog.name = "Happy Coder";
20 // Only change code below this line.
第八十三关更新对象属性 
 1 // 举例
 2 var ourDog = {
 3 "name": "Camper",
 4 "legs": 4,
 5 "tails": 1,
 6 "friends": ["everything!"]
 7 };
 8 
 9 ourDog.bark = "bow-wow";
10 
11 // Setup
12 var myDog = {
13 "name": "Happy Coder",
14 "legs": 4,
15 "tails": 1,
16 "friends": ["Free Code Camp Campers"]
17 };
18 
19 // Only change code below this line.
20 
21 myDog.bark = "woof";
第八十四关给对象添加属性 
 1 // 举例
 2 var ourDog = {
 3 "name": "Camper",
 4 "legs": 4,
 5 "tails": 1,
 6 "friends": ["everything!"],
 7 "bark": "bow-wow"
 8 };
 9 
10 delete ourDog.bark;
11 
12 // Setup
13 var myDog = {
14 "name": "Happy Coder",
15 "legs": 4,
16 "tails": 1,
17 "friends": ["Free Code Camp Campers"],
18 "bark": "woof"
19 };
20 
21 // Only change code below this line.
22 
23 delete myDog.tails;
第八十五关删除对象属性 
 1 // Setup
 2 function phoneticLookup(val) {
 3 var result = "";
 4 
 5 // Only change code below this line
 6 var lookup = {
 7     "alpha"     :   "Adams",
 8     "bravo"     :   "Boston",
 9     "charlie"   :   "Chicago",
10     "delta"     :   "Denver",
11     "echo"      :   "Easy",
12     "foxtrot"   :   "Frank"
13 }
14 
15 result = lookup[val];
16 
17 // Only change code above this line
18 return result;
19 }
20 
21 // Change this value to test
22 phoneticLookup("charlie");
第八十六关使用对象进行查找值 
 1 // Setup
 2 var myObj = {
 3 gift: "pony",
 4 pet: "kitten",
 5 bed: "sleigh"
 6 };
 7 
 8 function checkObj(checkProp) {
 9 // Your Code Here
10 if (myObj.hasOwnProperty(checkProp)) {
11     return myObj[checkProp];
12 }
13 return "Not Found";
14 }
15 
16 // Test your code by modifying these values
17 checkObj("gift");
第八十七关检查对象属性 
 1 var myMusic = [
 2     {
 3     "artist"        : "Billy Joel",
 4     "title"         : "Piano Man",
 5     "release_year"  : 1973,
 6     "formats"       : [ 
 7             "CS", 
 8             "8T", 
 9             "LP" ],
10     "gold"          : true
11       },
12 // Add record here
13     {
14     "artist"        : "Jay",
15     "title"         : "依然范特西",
16     "release_year"  : 2008,
17     "formats"       : [
18         "Fang",
19         "Cai"],
20     "gold"          : false
21     }
22 ];
第八十八关JSON操作 
 1 // Setup
 2 var myStorage = {
 3 "car": {
 4 "inside": {
 5 "glove box": "maps",
 6 "passenger seat": "crumbs"
 7  },
 8 "outside": {
 9 "trunk": "jack"
10 }
11 }
12 };
13 
14 // Only change code below this line
15 
16 var gloveBoxContents = myStorage.car.inside["glove box"]; // Change this line
第八十九关获取JSON属性值 
 1 // Setup
 2 var myPlants = [
 3 { 
 4 type: "flowers",
 5 list: [
 6 "rose",
 7 "tulip",
 8 "dandelion"
 9 ]
10 },
11 {
12 type: "trees",
13 list: [
14 "fir",
15 "pine",
16 "birch"
17 ]
18 }
19 ];
20 
21 // Only change code below this line
22 
23 var secondTree = myPlants[1].list[1]; // Change this line
第九十关获取JSON数组值 
 1 // Setup
 2 var collection = {
 3 2548: {
 4 album: "Slippery When Wet",
 5 artist: "Bon Jovi",
 6 tracks: [ 
 7 "Let It Rock", 
 8 "You Give Love a Bad Name" 
 9 ]
10 },
11 2468: {
12 album: "1999",
13 artist: "Prince",
14 tracks: [ 
15 "1999", 
16 "Little Red Corvette" 
17 ]
18 },
19 1245: {
20 artist: "Robert Palmer",
21 tracks: [ ]
22 },
23 5439: {
24 album: "ABBA Gold"
25 }
26 };
27 // Keep a copy of the collection for tests
28 var collectionCopy = JSON.parse(JSON.stringify(collection));
29 
30 // Only change code below this line
31 function update(id, prop, value) {
32 
33 if (value !== '' && prop != 'tracks') {
34     collectionCopy[id][prop] = value;
35 } else if(value !== '' && prop == 'tracks'){
36     collectionCopy[id][prop].push(value);
37 } else {
38     delete collectionCopy[id][prop];
39 }
40 
41 return collection;
42 }
43 
44 // Alter values below to test your code
45 update(5439, "artist", "ABBA");
第九十一关JSON集合操作 
 1 // 举例
 2 var ourArray = [];
 3 
 4 for (var i = 0; i < 5; i++) {
 5 ourArray.push(i);
 6 }
 7 
 8 // Setup
 9 var myArray = [];
10 
11 // Only change code below this line.
12 var a;
13 for(a = 1;a < 6;a++){
14     myArray.push(a);
15 }
第九十二关 for循环 
 1 // 举例
 2 var ourArray = [];
 3 
 4 for (var i = 0; i < 10; i += 2) {
 5 ourArray.push(i);
 6 }
 7 
 8 // Setup
 9 var myArray = [];
10 
11 // Only change code below this line.
12 for (var i = 1; i < 10; i += 2) {
13     myArray.push(i);
14 }
第九十三关 for语句循环按奇数顺序迭代 
 1 // 举例
 2 var ourArray = [];
 3 
 4 for (var i = 10; i > 0; i -= 2) {
 5 ourArray.push(i);
 6 }
 7 
 8 // Setup
 9 var myArray = [];
10 
11 // Only change code below this line.
12 for (var i = 9; i > 0 ; i -= 2) {
13     myArray.push(i);
14 }
第九十四关for循环逆向迭代 
 1 // 举例
 2 var ourArr = [ 9, 10, 11, 12];
 3 var ourTotal = 0;
 4 
 5 for (var i = 0; i < ourArr.length; i++) {
 6 ourTotal += ourArr[i];
 7 }
 8 
 9 // Setup
10 var myArr = [ 2, 3, 4, 5, 6];
11 
12 // Only change code below this line
13 var total = 0;
14 for (var i = 0; i < myArr.length; i++) {
15     total += myArr[i];
16 }
第九十五关for循环迭代输出数组 
 1 function multiplyAll(arr) {
 2 var product = 1;
 3 // Only change code below this line
 4     for (var i = 0; i < arr.length; i++) {
 5         for(var j = 0; j < arr[i].length; j++){
 6             product *= arr[i][j];
 7         }
 8     }
 9 // Only change code above this line
10 return product;
11 }
12 
13 // Modify values below to test your code
14 multiplyAll([[1,2],[3,4],[5,6,7]]);
第九十六关循环语句综合 
1 // Setup
2 var myArray = [];
3 
4 // Only change code below this line.
5 var i = 0;
6 while(i <= 4){
7     myArray.push(i);
8     i++;
9 }
第九十七关while语句循环 
 1 //Setup
 2 var contacts = [
 3 {
 4 "firstName": "Akira",
 5 "lastName": "Laine",
 6 "number": "0543236543",
 7 "likes": ["Pizza", "Coding", "Brownie Points"]
 8 },
 9 {
10 "firstName": "Harry",
11 "lastName": "Potter",
12 "number": "0994372684",
13 "likes": ["Hogwarts", "Magic", "Hagrid"]
14 },
15 {
16 "firstName": "Sherlock",
17 "lastName": "Holmes",
18 "number": "0487345643",
19 "likes": ["Intriguing Cases", "Violin"]
20 },
21 {
22 "firstName": "Kristian",
23 "lastName": "Vos",
24 "number": "unknown",
25 "likes": ["Javascript", "Gaming", "Foxes"]
26 }
27 ];
28 
29 
30 function lookUpProfile(firstName, prop){
31 // Only change code below this line
32 var hasName = false;
33 for (var i = 0; i < contacts.length; i++) {
34     if (contacts[i].firstName == firstName) {
35         hasName = true;
36         if (contacts[i].hasOwnProperty(prop)) {
37             return contacts[i][prop];
38         } else {
39             return "No such property";
40         }
41     }
42 }
43 
44 if(!hasName){
45     return "No such contact";
46 }
47 // Only change code above this line
48 }
49 
50 // Change these values to test your function
51 lookUpProfile("Akira", "likes");
第九十八关使用循环语句查找通讯录 
1 function randomFunction() {
2 
3 // Only change code below this line.
4 
5 return Math.random();
6 
7 // Only change code above this line.
8 }
第九十九关random() 
1 var randomNumberBetween0and19 = Math.floor(Math.random() * 20);
2 
3 function myFunction() {
4 
5 // Only change code below this line.
6 
7 return Math.floor(Math.random() * 10);
8 }
第一百关random()生成随机数 
 1 // 举例
 2 function ourFunction(ourMin, ourMax) {
 3 
 4 return Math.floor(Math.random() * (ourMax - ourMin + 1)) + ourMin;
 5 }
 6 
 7 ourFunction(1, 9);
 8 
 9 // Only change code below this line.
10 
11 function randomRange(myMin, myMax) {
12 
13 return Math.floor(Math.random() * (myMax - myMin + 1)) + myMin; // Change this line
14 
15 }
16 
17 // Change these values to test your function
18 var myRandom = randomRange(5, 15);
101关random()在一个范围内生成随机数 
 1 // Setup
 2 var testString = "Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.";
 3 
 4 // 举例
 5 var expressionToGetSoftware = /software/gi;
 6 var softwareCount = testString.match(expressionToGetSoftware).length;
 7 
 8 
 9 // Only change code below this line.
10 
11 var expression = /and/gi;// Change this Line
12 
13 // Only change code above this line
14 
15 // This code counts the matches of expression in testString
16 var andCount = testString.match(expression).length;
102关正则表达式操作字符串 
 1 // Setup
 2 var testString = "There are 3 cats but 4 dogs.";
 3 
 4 // Only change code below this line.
 5 
 6 var expression = /\d+/g;// Change this line
 7 
 8 // Only change code above this line
 9 
10 // This code counts the matches of expression in testString
11 var digitCount = testString.match(expression).length;
103关正则表达式选取数值 
 1 // Setup
 2 var testString = "How many spaces are there in this sentence?";
 3 
 4 // Only change code below this line.
 5 
 6 var expression = /\s+/g;// Change this line
 7 
 8 // Only change code above this line
 9 
10 // This code counts the matches of expression in testString
11 var spaceCount = testString.match(expression).length;
104关正则表达式选取空白字符 
 1 // Setup
 2 var testString = "How many non-space characters are there in this sentence?";
 3 
 4 // Only change code below this line.
 5 
 6 var expression = /\S/g;// Change this line
 7 
 8 // Only change code above this line
 9 
10 // This code counts the matches of expression in testString
11 var nonSpaceCount = testString.match(expression).length;
105关正则表达式反转匹配
106 
  1 <script>
  2 function runSlots() {
  3 var slotOne;
  4 var slotTwo;
  5 var slotThree;
  6  
  7 var images = ["https://www.w3cschool.cn/statics/codecamp/images/9H17QFk.png", "https://www.w3cschool.cn/statics/codecamp/images/9RmpXTy.png", "https://www.w3cschool.cn/statics/codecamp/images/VJnmtt5.png"];
  8  
  9 // Only change code below this line.
 10 slotOne = Math.floor(Math.random() * 3) + 1;
 11 slotTwo = Math.floor(Math.random() * 3) + 1;
 12 slotThree = Math.floor(Math.random() * 3) + 1;
 13 
 14 
 15 // Only change code above this line.
 16 
 17 
 18 if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined) {
 19 $(".logger").html(slotOne + " " + slotTwo + " " + slotThree);
 20 }
 21 
 22 
 23 $(".logger").append(" Not A Win")
 24 return [slotOne, slotTwo, slotThree];
 25 }
 26 
 27 $(document).ready(function() {
 28  $(".go").click(function() {
 29  runSlots();
 30  });
 31  });
 32 </script>
 33  
 34 <div>
 35  <div class = "container inset">
 36  <div class = "header inset">
 37  <img src="/statics/codecamp/images/freecodecamp_logo.svg" alt="learn to code JavaScript at Free Code Camp logo" class="img-responsive nav-logo">
 38  <h2>FCC Slot Machine</h2>
 39  </div>
 40  <div class = "slots inset">
 41  <div class = "slot inset">
 42  
 43  </div>
 44  <div class = "slot inset">
 45  
 46  </div>
 47  <div class = "slot inset">
 48  
 49  </div>
 50  </div>
 51  <br/>
 52  <div class = "outset">
 53  <button class = "go inset">
 54  Go
 55  </button>
 56  </div>
 57  <br/>
 58  <div class = "foot inset">
 59  <span class = "logger"></span>
 60  </div>
 61  </div>
 62 </div>
 63 
 64 <style>
 65  .container {
 66  background-color: #4a2b0f;
 67  height: 400px;
 68  width: 260px;
 69  margin: 50px auto;
 70  border-radius: 4px;
 71  }
 72  .header {
 73  border: 2px solid #fff;
 74  border-radius: 4px;
 75  height: 55px;
 76  margin: 14px auto;
 77  background-color: #457f86
 78  }
 79  .header h2 {
 80  height: 30px;
 81  margin: auto;
 82  }
 83  .header h2 {
 84  font-size: 14px;
 85  margin: 0 0;
 86  padding: 0;
 87  color: #fff;
 88  text-align: center;
 89  }
 90  .slots{
 91  display: flex;
 92  background-color: #457f86;
 93  border-radius: 6px;
 94  border: 2px solid #fff;
 95  }
 96  .slot{
 97  flex: 1 0 auto;
 98  background: white;
 99  height: 75px;
100  margin: 8px;
101  border: 2px solid #215f1e;
102  border-radius: 4px;
103  }
104  .go {
105  width: 100%;
106  color: #fff;
107  background-color: #457f86;
108  border: 2px solid #fff;
109  border-radius: 2px;
110  box-sizing: none;
111  outline: none!important;
112  }
113  .foot {
114  height: 150px;
115  background-color: 457f86;
116  border: 2px solid #fff;
117  }
118  
119  .logger {
120  color: white;
121  margin: 10px;
122  }
123  
124  .outset {
125  -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
126  -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
127  box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
128  }
129  
130  .inset {
131  -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
132  -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
133  box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
134  }
135 </style>
综合运用开发游戏 
  1 <script>
  2 function runSlots() {
  3 var slotOne;
  4 var slotTwo;
  5 var slotThree;
  6 
  7 var images = ["https://www.w3cschool.cn/statics/codecamp/images/9H17QFk.png", "https://www.w3cschool.cn/statics/codecamp/images/9RmpXTy.png", "https://www.w3cschool.cn/statics/codecamp/images/VJnmtt5.png"];
  8 
  9 slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
 10 slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
 11 slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
 12 
 13 
 14 // Only change code below this line.
 15 if (slotOne === slotTwo && slotTwo === slotThree){
 16     $(".logger").html(slotOne + "It's A Win");
 17 } else {
 18     return null;
 19 }
 20 
 21 
 22 // Only change code above this line.
 23 
 24 if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){
 25 $(".logger").html(slotOne + " " + slotTwo + " " + slotThree);
 26 }
 27 
 28 $(".logger").append(" Not A Win");
 29 
 30 return [slotOne, slotTwo, slotThree];
 31 }
 32 
 33 $(document).ready(function() {
 34  $(".go").click(function() {
 35  runSlots();
 36  });
 37  });
 38 </script>
 39  
 40 <div>
 41  <div class = "container inset">
 42  <div class = "header inset">
 43  <img src="/statics/codecamp/images/freecodecamp_logo.svg" alt="learn to code JavaScript at Free Code Camp logo" class="img-responsive nav-logo">
 44  <h2>FCC Slot Machine</h2>
 45  </div>
 46  <div class = "slots inset">
 47  <div class = "slot inset">
 48  
 49  </div>
 50  <div class = "slot inset">
 51  
 52  </div>
 53  <div class = "slot inset">
 54  
 55  </div>
 56  </div>
 57  <br/>
 58  <div class = "outset">
 59  <button class = "go inset">
 60  Go
 61  </button>
 62  </div>
 63  <br/>
 64  <div class = "foot inset">
 65  <span class = "logger"></span>
 66  </div>
 67  </div>
 68 </div>
 69 
 70 <style>
 71  .container {
 72  background-color: #4a2b0f;
 73  height: 400px;
 74  width: 260px;
 75  margin: 50px auto;
 76  border-radius: 4px;
 77  }
 78  .header {
 79  border: 2px solid #fff;
 80  border-radius: 4px;
 81  height: 55px;
 82  margin: 14px auto;
 83  background-color: #457f86
 84  }
 85  .header h2 {
 86  height: 30px;
 87  margin: auto;
 88  }
 89  .header h2 {
 90  font-size: 14px;
 91  margin: 0 0;
 92  padding: 0;
 93  color: #fff;
 94  text-align: center;
 95  }
 96  .slots{
 97  display: flex;
 98  background-color: #457f86;
 99  border-radius: 6px;
100  border: 2px solid #fff;
101  }
102  .slot{
103  flex: 1 0 auto;
104  background: white;
105  height: 75px;
106  margin: 8px;
107  border: 2px solid #215f1e;
108  border-radius: 4px;
109  }
110  .go {
111  width: 100%;
112  color: #fff;
113  background-color: #457f86;
114  border: 2px solid #fff;
115  border-radius: 2px;
116  box-sizing: none;
117  outline: none!important;
118  }
119  .foot {
120  height: 150px;
121  background-color: 457f86;
122  border: 2px solid #fff;
123  }
124  
125  .logger {
126  color: white;
127  margin: 10px;
128  }
129  
130  .outset {
131  -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
132  -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
133  box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
134  }
135  
136  .inset {
137  -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
138  -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
139  box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
140  }
141 </style>
107进一步完善小游戏项目 
  1 <script>
  2 function runSlots() {
  3 var slotOne;
  4 var slotTwo;
  5 var slotThree;
  6 
  7 var images = ["https://www.w3cschool.cn/statics/codecamp/images/9H17QFk.png", "https://www.w3cschool.cn/statics/codecamp/images/9RmpXTy.png", "https://www.w3cschool.cn/statics/codecamp/images/VJnmtt5.png"];
  8 
  9 slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
 10 slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
 11 slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
 12 
 13 
 14 // Only change code below this line.
 15 $($(".slot")[0]).html(slotOne);
 16 $($(".slot")[1]).html(slotTwo);
 17 $($(".slot")[2]).html(slotThree);
 18 
 19 
 20 // Only change code above this line.
 21 
 22 if (slotOne === slotTwo && slotTwo === slotThree) {
 23 $(".logger").html(" It's A Win")
 24 return null;
 25 }
 26 
 27 if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){
 28 $(".logger").html(slotOne + " " + slotTwo + " " + slotThree);
 29 }
 30 
 31 $(".logger").append(" Not A Win");
 32 
 33 
 34 return [slotOne, slotTwo, slotThree];
 35 }
 36 
 37 $(document).ready(function() {
 38  $(".go").click(function() {
 39  runSlots();
 40  });
 41  });
 42 </script>
 43  
 44 <div>
 45  <div class = "container inset">
 46  <div class = "header inset">
 47  <img src="/statics/codecamp/images/freecodecamp_logo.svg" alt="learn to code JavaScript at Free Code Camp logo" class="img-responsive nav-logo">
 48  <h2>FCC Slot Machine</h2>
 49  </div>
 50  <div class = "slots inset">
 51  <div class = "slot inset">
 52  
 53  </div>
 54  <div class = "slot inset">
 55  
 56  </div>
 57  <div class = "slot inset">
 58  
 59  </div>
 60  </div>
 61  <br/>
 62  <div class = "outset">
 63  <button class = "go inset">
 64  Go
 65  </button>
 66  </div>
 67  <br/>
 68  <div class = "foot inset">
 69  <span class = "logger"></span>
 70  </div>
 71  </div>
 72 </div>
 73 
 74 <style>
 75  .container {
 76  background-color: #4a2b0f;
 77  height: 400px;
 78  width: 260px;
 79  margin: 50px auto;
 80  border-radius: 4px;
 81  }
 82  .header {
 83  border: 2px solid #fff;
 84  border-radius: 4px;
 85  height: 55px;
 86  margin: 14px auto;
 87  background-color: #457f86
 88  }
 89  .header h2 {
 90  height: 30px;
 91  margin: auto;
 92  }
 93  .header h2 {
 94  font-size: 14px;
 95  margin: 0 0;
 96  padding: 0;
 97  color: #fff;
 98  text-align: center;
 99  }
100  .slots{
101  display: flex;
102  background-color: #457f86;
103  border-radius: 6px;
104  border: 2px solid #fff;
105  }
106  .slot{
107  flex: 1 0 auto;
108  background: white;
109  height: 75px;
110  margin: 8px;
111  border: 2px solid #215f1e;
112  border-radius: 4px;
113  text-align: center;
114  padding-top: 25px;
115  }
116  .go {
117  width: 100%;
118  color: #fff;
119  background-color: #457f86;
120  border: 2px solid #fff;
121  border-radius: 2px;
122  box-sizing: none;
123  outline: none!important;
124  }
125  .foot {
126  height: 150px;
127  background-color: 457f86;
128  border: 2px solid #fff;
129  }
130  
131  .logger {
132  color: white;
133  margin: 10px;
134  }
135  
136  .outset {
137  -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
138  -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
139  box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
140  }
141  
142  .inset {
143  -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
144  -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
145  box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
146  }
147 </style>
108小游戏项目运作起来 
  1 <script>
  2 function runSlots() {
  3 var slotOne;
  4 var slotTwo;
  5 var slotThree;
  6 
  7 var images = ["https://www.w3cschool.cn/statics/codecamp/images/9H17QFk.png", "https://www.w3cschool.cn/statics/codecamp/images/9RmpXTy.png", "https://www.w3cschool.cn/statics/codecamp/images/VJnmtt5.png"];
  8 
  9 slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
 10 slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
 11 slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
 12 
 13 
 14 // Only change code below this line.
 15 $($('.slot')[0]).html('<img src = "' + images[slotOne - 1] + '">');
 16 $($('.slot')[1]).html('<img src = "' + images[slotTwo - 1] + '">');
 17 $($('.slot')[2]).html('<img src = "' + images[slotThree -1 ] +
 18 '">');
 19 // Only change code above this line.
 20 
 21 if (slotOne === slotTwo && slotTwo === slotThree) {
 22 $('.logger').html("It's A Win");
 23 return null;
 24 }
 25 
 26 if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){
 27 $(".logger").html(slotOne + " " + slotTwo + " " + slotThree);
 28 }
 29 
 30 $('.logger').append(" Not A Win");
 31 
 32 return [slotOne, slotTwo, slotThree];
 33 }
 34 
 35 $(document).ready(function() {
 36  $('.go').click(function() {
 37  runSlots();
 38  });
 39  });
 40 </script>
 41  
 42 <div>
 43  <div class = 'container inset'>
 44  <div class = 'header inset'>
 45  <img src='/statics/codecamp/images/freecodecamp_logo.svg' alt='learn to code JavaScript at Free Code Camp logo' class='img-responsive nav-logo'>
 46  <h2>FCC Slot Machine</h2>
 47  </div>
 48  <div class = 'slots inset'>
 49  <div class = 'slot inset'>
 50  
 51  </div>
 52  <div class = 'slot inset'>
 53  
 54  </div>
 55  <div class = 'slot inset'>
 56  
 57  </div>
 58  </div>
 59  <br/>
 60  <div class = 'outset'>
 61  <button class = 'go inset'>
 62  Go
 63  </button>
 64  </div>
 65  <br/>
 66  <div class = 'foot inset'>
 67  <span class = 'logger'></span>
 68  </div>
 69  </div>
 70 </div>
 71 
 72 <style>
 73  .slot > img {
 74 margin: 0!important;
 75 height: 71px;
 76 width: 50px;
 77  }
 78  .container {
 79  background-color: #4a2b0f;
 80  height: 400px;
 81  width: 260px;
 82  margin: 50px auto;
 83  border-radius: 4px;
 84  }
 85  .header {
 86  border: 2px solid #fff;
 87  border-radius: 4px;
 88  height: 55px;
 89  margin: 14px auto;
 90  background-color: #457f86
 91  }
 92  .header h2 {
 93  height: 30px;
 94  margin: auto;
 95  }
 96  .header h2 {
 97  font-size: 14px;
 98  margin: 0 0;
 99  padding: 0;
100  color: #fff;
101  text-align: center;
102  }
103  .slots{
104  display: flex;
105  background-color: #457f86;
106  border-radius: 6px;
107  border: 2px solid #fff;
108  }
109  .slot{
110  flex: 1 0 auto;
111  background: white;
112  height: 75px;
113  width: 50px;
114  margin: 8px;
115  border: 2px solid #215f1e;
116  border-radius: 4px;
117  text-align: center;
118  }
119  .go {
120  width: 100%;
121  color: #fff;
122  background-color: #457f86;
123  border: 2px solid #fff;
124  border-radius: 2px;
125  box-sizing: none;
126  outline: none!important;
127  }
128  .foot {
129  height: 150px;
130  background-color: 457f86;
131  border: 2px solid #fff;
132  }
133  
134  .logger {
135  color: white;
136  margin: 10px;
137  }
138  
139  .outset {
140  -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
141  -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
142  box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
143  }
144  
145  .inset {
146  -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
147  -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
148  box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
149  }
150 </style>
109为小游戏项目添加图片

 

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

weixin_34162629
关注
  • 8
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
w3c 21点闯关
大三小白ysl的博客
05-13 180
JavaScript 条件判断算法综合实战 在赌场21点游戏中，玩家可以通过计算牌桌上已经发放的卡牌的高低值来让自己在游戏中保持优势，这就叫21点算法。 根据下面的表格，每张卡牌都分配了一个值。如果卡牌的值大于0，那么玩家应该追加赌注。反之，追加少许赌注甚至不追加赌注。 Count Change Cards +1 2, 3, 4, 5, 6 0 7, 8, 9 -1 10, ‘J’, ‘Q’, ‘K’,‘A’ 你需要写一个函数，实现21点算法，它根据参数 card的值来递增或递减变量count，函数返回一个
W3CSchool编程实战练习——Bootstrap框架
qq_33202816的博客
03-19 1290
自己留着看。Bootstrap会自动获取使用者屏幕的大小,并根据屏幕的大小自动调整HTML元素的宽度和高度来适配屏幕,因此称之为--响应式布局。通过响应式布局,你不再需要为你的Web站点重新设计一个手机版的页面,Bootstrap会自动帮你调整好在手机页上的页面显示,事实上,Bootstrap在任何宽度的设备上都能适应得很好。使用Bootstrap也非常简单,你只需要把下面的链接添加到你需要使用B...
W3C html闯关记录
qq_40272523的博客
03-29 274
1.h2元素通常用于副标题。 2.CSS :Cascading Style Sheets层叠样式表 CSS属性。 3.内部样式表 （1） <style> 选择器 {(CSS)属性名称: 属性值;} h2 {color: red;} </style> （2） .类名 {(CSS)属性名称: 属性值;} .red-text { color: red; }...
W3Cschool编程实战：JavaScript
xiaolingzi888的博客
09-11 2123
记录一下在W3Cschool编程实战：JavaScript中遇到的难题。 1、JavaScript 使用对象进行查找值 对象和字典一样，可以用来存储键/值对。如果你的数据跟对象一样，你可以用对象来查找你想要的值，而不是使用switch或if/else语句。 当你知道你的输入数据在某个范围时，这种查找方式极为有效。// Setup function phoneticLookup(val) {
W3CSchool闯关笔记(JQuery)
weixin_34351321的博客
04-24 347
1 <script> 2 $(document).ready(function(){ 3 }); 4 </script> 5 6 <!-- Only change code above this line. --> 7 8 <div class="container-fluid"> 9 <h3...
w3cschool【javascript】_javascript_w3cschool_API_
10-01
W3School版本Javascript 方法速查手册
vue w3cschool学习笔记
09-07
了解vue
HTML、CSS、javascript、正则表达式，W3Cschool中文帮助文档
09-24
HTML、CSS、javascript、正则表达式，中文帮助文档
w3cschool菜鸟教程（w3cschool.cc）.7z
09-23
w3cschool菜鸟教程（w3cschool.cc）.7z
w3cschool菜鸟教程中文手册.rar
02-23
含有 html、css、js、jQuery等资料
w3cshool完整在线教程
01-23
w3c完整版的教程，相信你值得拥有，有需要的可以下载哦
W3CSchool的前端实战题错题记录
qq_33202816的博客
03-19 1135
JavaScript 使用循环语句查找通讯录1我们有一个联系人列表，里面存储着不同联系人的数组对象。函数 lookUpProfile 有两个预定义参数：firstName值和prop属性 。该函数应检查firstName是实际联系人的firstName，给定的属性（prop）是该联系人的属性。如果它们都存在，函数返回prop属性对应的值。如果firstName 值不存在，返回 "No such c...
W3Cschool编程实战答案之JavaScript
PyIDEA
11-22 2575
JavaScript 注释语句操作 /** * 你的代码运行结果将显示在这里. * 使用 console.log() * 结果将显示在你浏览器的开发工具里的 JavaScript 控制台. */ //浏览器的开发工具 声明JavaScript变量 // 举例 var ourName; var myName; // Define myName below this line ...
HTML5和CSS学习笔记（三）
weixin_41905995的博客
04-26 287
(36)设置元素的ID id 属性应该是唯一的，虽然浏览器并不强制唯一，但基于最佳实践，这一点是被广泛认可的，所以请不要给一个以上的元素设置相同的 id 属性。 如：设置 form 元素的id属性为 cat-photo-form。 <form action="/submit-cat-photo" id="cat-photo-form"> </form> （37）使用ID属...
Free Code Camp 练习总结 —— JavaScript 基本知识
youyouxiong的博客
07-15 6014
我会每天都更新我写东西，学大概有一段时间了，我感触还是挺大的，把之前基础知识又复习一遍，活到老学到老。希望能给在FreecodeCamp有同学有帮助，我会每天更新我在写FreecodeCamp，代码。 现在让我们开始学习最流行的JavaScript库jQuery吧，不用担心JavaScript本身，我们稍后会提到它。 在开始学习使用jQuery之前，我们需要加一些代码到HTML文件中。 首先...
isPrototypeOf()和hasOwnProperty()
LPLIFE的博客
07-03 871
两者都是object类型的方法 isPrototypeOf()：方法用于测试一个对象是否存在于另一个对象的原型链上。 如下： hasOwnProperty()：方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是是否有指定的键） 如下： ...
W3CSchool闯关笔记(初级脚本算法)
weixin_33979203的博客
04-26 136
W3C后台校验代码bug很多，有的时候跑不过不一定是自己代码写得有问题，也许是网页后台的bug,可以自己把代码放到本地的html文件中跑一下看看 1 function reverseString(str) { 2 3 /* 4 *******学过java的朋友特别注意****** 5 ***JS中数组处理方法默认行为与jav...
W3CSchool JavaScript 条件判断算法综合实战 答案
金哥铁码的博客
04-07 297
你需要写一个函数，实现21点算法，它根据参数 card的值来递增或递减变量count，函数返回一个由当前count和 “Bet”(count>0)或"Hold"(count
JavaScript 集合交集算法挑战（https://www.w3cschool.cn JavaScript高级脚本算法参考答案）
Qlly
02-23 393
原题目链接：https://www.w3cschool.cn/codecamp/symmetric-difference.html 题目： 创建一个函数，接受两个或多个数组，返回所给数组的 对等差分(symmetric difference) (△ or ⊕)数组. 给出两个集合 (如集合 A = {1, 2, 3} 和集合 B = {2, 3, 4}), 而数学术语 "对等差分" 的集...
w3cschool javascript离线文档
最新发布
08-07
w3cschool提供了Javascript的离线文档，这是一个非常方便的资源，在没有网络连接的情况下也能查阅Javascript的相关知识。 首先，该离线文档包含了Javascript的基本语法、数据类型、运算符、函数、对象、事件等方面...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值