基本概念:JavaScript Object Notation 简称 JSON
,它使用JavaScript对象的格式来存储数据。JSON是灵活的,因为它允许数据结构 是 字符串,数字,布尔值,字符串,和对象 的任意组合。实例如下
myMusic = [
{
"artist": "Billy Joel",
"title": "Piano Man",
"release_year": 1973,
"formats": [
"CS",
"8T",
"LP" ],
"gold": true
}
,{
"artist": "asy Joel",
"title": "Piano Man",
"release_year": 1973,
"formats": [
"CS",
"8T",
"LP" ],
"gold": true
}
];
访问方式:这里指如何访问通过串联起来的点操作符或中括号操作符来访问JSON对象的嵌套属性。
var ourStorage = {
"desk": {
"drawer": "stapler"
},
"cabinet": {
"top drawer": {
"folder1": "a file",
"folder2": "secrets"
},
"bottom drawer": "soda"
}
}
ourStorage.cabinet["top drawer"].folder2; // "secrets"
ourStorage.desk.drawer; // "stapler"
1.如何访问嵌套数组?与访问嵌套对象一样,用中括号操作符同样可以访问嵌套数组。
var ourPets = {
"cats": [
"Meowzer",
"Fluffy",
"Kit-Cat"
],
"dogs": [
"Spot",
"Bowser",
"Frankie"
]
};
ourPets.cats[1]; // "Fluffy"
ourPets.dogs[0]; // "Spot"
尤其要注意函数中return的使用,当一个函数某个return生效时其他的return就不生效了
2.生成随机数:Math.random()。一般情况下生成0-1之间的数,要生成整数需要
Math.floor(Math.random() * 20);
其中Math.floor()的功能是向下取整数。
随机数的应用:老虎机(注意引入jQuery)
<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[slotOne-1] + '">');
$($('.slot')[2]).html('<img src = "' + images[slotOne-1] + '">');
// 请把你的代码写在这条注释以上
if (slotOne === slotTwo && slotTwo === slotThree) {
$('.logger').html("It's A Win");
return null;
}
if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){
$(".logger").html(slotOne + " " + slotTwo + " " + slotThree);
}
$('.logger').append(" Not A Win");
return [slotOne, slotTwo, slotThree];
}
$(document).ready(function() {
$('.go').click(function() {
runSlots();
});
});
</script>
<div>
<div class = 'container inset'>
<div class = 'header inset'>
<img src='/images/freecodecamp_logo.svg' alt='learn to code JavaScript at Free Code Camp logo' class='img-responsive nav-logo'>
<h2>FCC Slot Machine</h2>
</div>
<div class = 'slots inset'>
<div class = 'slot inset'>
</div>
<div class = 'slot inset'>
</div>
<div class = 'slot inset'>
</div>
</div>
<br/>
<div class = 'outset'>
<button class = 'go inset'>
Go
</button>
</div>
<br/>
<div class = 'foot inset'>
<span class = 'logger'></span>
</div>
</div>
</div>
<style>
.slot > img {
margin: 0!important;
height: 71px;
width: 50px;
}
.container {
background-color: #4a2b0f;
height: 400px;
width: 260px;
margin: 50px auto;
border-radius: 4px;
}
.header {
border: 2px solid #fff;
border-radius: 4px;
height: 55px;
margin: 14px auto;
background-color: #457f86
}
.header h2 {
height: 30px;
margin: auto;
}
.header h2 {
font-size: 14px;
margin: 0 0;
padding: 0;
color: #fff;
text-align: center;
}
.slots{
display: flex;
background-color: #457f86;
border-radius: 6px;
border: 2px solid #fff;
}
.slot{
flex: 1 0 auto;
background: white;
height: 75px;
width: 50px;
margin: 8px;
border: 2px solid #215f1e;
border-radius: 4px;
text-align: center;
}
.go {
width: 100%;
color: #fff;
background-color: #457f86;
border: 2px solid #fff;
border-radius: 2px;
box-sizing: none;
outline: none!important;
}
.foot {
height: 150px;
background-color: 457f86;
border: 2px solid #fff;
}
.logger {
color: white;
margin: 10px;
}
.outset {
-webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
}
.inset {
-webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
}
</style>