FCC 基础JavaScript 练习7
1.
Math.random()
用来生成一个在0(包括0)到1(不包括1)之间的随机小数,因此Math.random()
可能返回0但绝不会返回1。
提示
随后的函数都会在return
执行前调用,所以我们可以直接返回Math.random()
的值
function myFunction() {
// 请把你的代码写在这条注释以下
var a=Math.random();
if(a>0){
return Math.random();
}
// 请把你的代码写在这条注释以上
}
2.用 Math.floor()
向下取整 获得它最近的整数,
任务
生成一个 0
到 9
之间的随机整数
function myFunction() {
// 请把你的代码写在这条注释以下
var a=Math.floor(Math.random() * 10);//////Math.random() 生成永远小于1的小数,乘10永远不会大于等于10
if (a>=0&&a<10){
return a;
}
}
3.要生成的随机数是在两个指定的数之间,需要定义一个最小值和一个最大值
任务
创建一个叫randomRange
的函数,参数为myMin和myMax,
返回一个在myMin
(包括myMin)和myMax
(包括myMax)之间的随机数
// 请把你的代码写在这条注释以下
function randomRange(myMin, myMax) {
return Math.floor(Math.random()*(myMax-myMin+1))+myMin; // 请修改这一行////记住公式,可以套用在任意值之间
}
// 你可以修改这一行来测试你的代码
var myRandom = randomRange(5, 15);
4.Regular expressions
正则表达式被用来根据某种匹配模式来寻找strings字符串
中的某些单词,
我们可以使用下面的正则表达式: /the/gi
我们可以把这个正则表达式分成几段:
/
是这个正则表达式的头部
the
是我们想要匹配的模式
/
是这个正则表达式的尾部
g
代表着 global
(全局),意味着返回所有的匹配而不仅仅是第一个。
i
代表着忽略大小写,意思是当我们寻找匹配的字符串的时候忽略掉字母的大小写
任务
用全局、忽略大小写的模式选取字符串 testString
中所有的单词 and
// 初始化变量
var testString = "Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.";
// 举例
var expressionToGetSoftware = /software/gi;
var softwareCount = testString.match(expressionToGetSoftware).length;
// 请只修改这条注释以下的代码
var expression = /and/gi; // 请修改这一行
// 请只修改这条注释以上的代码
// 用 andCount 存储 testString 中匹配到 expression 的次数
var andCount = testString.match(expression).length;
5
在JavaScript中, 数字选择器类似于: /\d/g
。
在选择器后面添加一个加号标记(+
),例如:/\d+/g
,它允许这个正则表达式匹配一个或更多数字。
尾部的g
是'global'的简写,意思是允许这个正则表达式 找到所有的匹配而不是仅仅找到第一个匹配
任务
用 \d
选择器来选取字符串中的所有数字
// 初始化变量
var testString = "There are 3 cats but 4 dogs.";
// 请只修改这条注释以下的代码
var expression = /\d+/g; // 请修改这一行
// 请只修改这条注释以上的代码
// 用 digitCount 存储 testString 中匹配到 expression 的次数
var digitCount = testString.match(expression).length;
6.
可以使用正则表达式选择器 \s
来选择一个字符串中的空白。
空白字符有 " "
(空格符)、\r
(回车符)、\n
(换行符)、\t
(制表符) 和 \f
(换页符)。
空白正则表达式类似于:
/\s+/g
任务
用 \s
选取句子中的所有空白字符
// 初始化变量
var testString = "How many spaces are there in this sentence?";
// 请只修改这条注释以下的代码
var expression = /\s+/g; // 请修改这一行
// 请只修改这条注释以上的代码
// 用 spaceCount 存储 testString 中匹配到 expression 的次数
var spaceCount = testString.match(expression).length;
7.
可以用正则表达式选择器的大写版本 来转化任何匹配。
举个例子:\s
匹配任何空白字符,\S
匹配任何非空白字符
任务
用 /\S/g
来匹配字符串testString
中的所有非空白字符
// 初始化变量
// 初始化变量
var testString = "How many non-space characters are there in this sentence?";
// 请只修改这条注释以下的代码
var expression = /\S/g; // 请修改这一行
// 请只修改这条注释以上的代码
// 用 nonSpaceCount 存储 testString 中匹配到 expression 的次数
var nonSpaceCount = testString.match(expression).length;
8.
把我们之前的所学的知识点结合起来完成一个幸运游戏。
这次我们生成3个随机数,范围在1到3之间。
分别用 slotOne
、slotTwo
、slotThree
来存储着3个随机数。
用我们之前的所学来生成随机数):
Math.floor(Math.random() * (3 - 1 + 1)) + 1;
///////
<script>
function runSlots() {
var slotOne;
var slotTwo;
var slotThree;
var images = ["//i.imgur.com/9H17QFk.png", "//i.imgur.com/9RmpXTy.png", "//i.imgur.com/VJnmtt5.png"];
// 请把你的代码写在这条注释以下
slotOne=Math.floor(Math.random()*(3-1+1))+1;
slotTwo=Math.floor(Math.random()*(3-1+1))+1;
slotThree=Math.floor(Math.random()*(3-1+1))+1;
// 请把你的代码写在这条注释以上
9.如果三个随机数都相等, 我们应该返回这个数字, 否则应该返回 null
.'
<script>
function runSlots() {
var slotOne;
var slotTwo;
var slotThree;
var images = ["//i.imgur.com/9H17QFk.png", "//i.imgur.com/9RmpXTy.png", "//i.imgur.com/VJnmtt5.png"];
slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
// 请把你的代码写在这条注释以下
if(slotOne===slotTwo&&slotTwo===slotThree){
return slotOne;
}
else return null;
// 请把你的代码写在这条注释以上
10.
用 jQuery 选择器 $(".slot")
获得所有幸运机。
一旦获取到所有幸运机,我们可以通过中括号操作符获取到每一个幸运机:
$($(".slot")[0]).html(slotOne);
jQuery将会获取到第一个幸运机,并更新它的HTML为正确的数字
任务:分别更新每个幸运机上的HTML为对应的数字
<script>
function runSlots() {
var slotOne;
var slotTwo;
var slotThree;
var images = ["//i.imgur.com/9H17QFk.png", "//i.imgur.com/9RmpXTy.png", "//i.imgur.com/VJnmtt5.png"];
slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
// 请把你的代码写在这条注释以下
$($(".slot")[0]).html(slotOne);
$($(".slot")[1]).html(slotTwo);
$($(".slot")[2]).html(slotThree);
// 请把你的代码写在这条注释以上
11.
给我们的幸运机加点图片。
我们已经为你准备好了图片images
,我们可以通过不同的索引来获取每个图片。
现在让我们设置第一个幸运机根据随机数来显示一张图片:
$($('.slot')[0]).html('<img src = "' + images[slotOne-1] + '">');
任务:设置所有的幸运机根据随机数来显示对应的图片,最后点击RUN
<script>
function runSlots() {
var slotOne;
var slotTwo;
var slotThree;
var images = ["//i.imgur.com/9H17QFk.png", "//i.imgur.com/9RmpXTy.png", "//i.imgur.com/VJnmtt5.png"];
slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
// 请把你的代码写在这条注释以下
$($('.slot')[0]).html('<img src = "' + images[slotOne-1] + '">');
$($('.slot')[1]).html('<img src = "' + images[slotTwo-1] + '">');
$($('.slot')[2]).html('<img src = "' + images[slotThree-1] + '">');
// 请把你的代码写在这条注释以上