JS中的冒号问题。太困扰我了!!!!

骑马找乐子 2013-01-28 10:51:30

//这是JS写的拼图代码的一部分,让小弟做头痛的就是下面代码中的这一部分是
var bottom = {"1":"5","2":"6","3":"7","4":"8","5":"9","6":"10","7":"11","8":"12"};
如何理解。。。。。。。。
--------------------------------------------------------------------------------------
function toBottom() {
var bottom = {"1":"5","2":"6","3":"7","4":"8","5":"9","6":"10","7":"11","8":"12"};
var newid = bottom[before];
if(!newid) return;
$(before).background = $(newid).background;
$(newid).background = null;
before = newid;
setStep();
}
----------------------------------源代码-------------------------------------------
<html>
<head>
<style type="text/css">
table {
border : 8px solid #336600;
border-collapse : collapse;
}
td {
width : 220px;
height : 217px;
background-color : Silver ;
border : 0px solid white #FF00FF;
}
.control {
text-align : center;
margin-top : 70px;
}
.control input {
height : 40px;
width : 80px;
vertical-align : middle;
margin-top : 20px;
}
.control img {
position:relative;
top : 25px;
border : 2px outset #000000 ;
}
</style>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
var before;
var start = false;
var step = 0;
var invalid = null;
var second = 0;
window.onload = function() {
init();
document.onkeydown = function() {
if(!start) return;
var oEvent = arguments[0] || window.event;
var key = oEvent.keyCode;
switch(key) {
case 37: toRight();break;
case 38: toBottom();break;
case 39: toLeft();break;
case 40: toTop();break;
}
if(isEnd()) alert("恭喜你,拼图成功!");
}
}
function init() {
$("1").background ="img/1.jpg" ;
$("2").background = "img/2.jpg" ;
$("3").background = "img/3.jpg" ;
$("4").background = "img/4.jpg" ;
$("5").background = "img/5.jpg" ;
$("6").background = "img/6.jpg" ;
$("7").background = "img/7.jpg" ;
$("8").background = "img/8.jpg" ;
$("9").background = "img/9.jpg" ;
$("10").background = "img/10.jpg" ;
$("11").background = "img/11.jpg" ;
$("12").background = "img/12.jpg" ;
}
function setImg() {
start = true;
step = 0;
second = 0;
$("step").innerHTML = "";
$("time").innerHTML = "00:00:00";
if(invalid != null) {
window.clearInterval(invalid);
invalid = null;
}
invalid = window.setInterval(setTime,1000);
$("12").background = null;
before = "12";
for(var i = 1;i < 12; i++){
var n = Math.round(Math.random()*10)+1;
$(i).background = "img/" + n + ".jpg";
for(var j = 1;j < i; j++){
if($(j).background==$(i).background){
i=i-1;
break;
}
}
}
}
function setTime() {
second++;
var hour = Math.floor(second / 3600);
var minute = Math.floor(second % 3600 / 60);
var s = second % 60;
var strh = hour > 9 ? hour : "0" + hour;
var strm = minute > 9 ? minute : "0" + minute;
var strs = s > 9 ? s : "0" + s;
var str = strh + ":" + strm + ":" + strs;
$("time").innerHTML = str;
}
function setStep() {
step++;
$("step").innerHTML = "第 " + step + " 步";
}
function isEnd() {
if($("1").background == "img/1.jpg" &&
$("2").background == "img/2.jpg" &&
$("3").background == "img/3.jpg" &&
$("4").background == "img/4.jpg" &&
$("5").background == "img/5.jpg" &&
$("6").background == "img/6.jpg" &&
$("7").background == "img/7.jpg" &&
$("8").background == "img/8.jpg" &&
$("9").background == "img/9.jpg" &&
$("10").background == "img/10.jpg" &&
$("11").background == "img/11.jpg" &&
$("12").background == "img/12.jpg") {
start = false;
window.clearInterval(invalid);
invalid = null;
return true;
}
return false;
}
function toLeft() {
var left = {"2":"1","3":"2","4":"3","13":"4","6":"5","7":"6","8":"7","10":"9","11":"10","12":"11"};
var newid = left[before];
if(!newid) return;
$(before).background = $(newid).background;
$(newid).background = null;
before = newid;
setStep();
}
function toTop() {
var top = {"5":"1","6":"2","7":"3","8":"4","9":"5","10":"6","11":"7","12":"8"};
var newid = top[before];
if(!newid) return;
$(before).background = $(newid).background;
$(newid).background = null;
before = newid;
setStep();
}
function toRight() {
var right = {"1":"2","2":"3","3":"4","4":"13","5":"6","6":"7","7":"8","9":"10","10":"11","11":"12"};
var newid = right[before];
if(!newid) return;
$(before).background = $(newid).background;
$(newid).background = null;
before = newid;
setStep();
}
function toBottom() {
var bottom = {"1":"5","2":"6","3":"7","4":"8","5":"9","6":"10","7":"11","8":"12"};
var newid = bottom[before];
if(!newid) return;
$(before).background = $(newid).background;
$(newid).background = null;
before = newid;
setStep();
}
</script>
</head>

<body>
<table align="center">
<tr>
<td id="1" background="img/1.jpg"> </td>
<td id="2" background="img/2.jpg"> </td>
<td id="3" background="img/3.jpg"> </td>
<td id="4" background="img/4.jpg"> </td>
<td rowspan="3" style="background-color: #3A4CB2; border:solid #336600">
<div class="control ">
<div id="time"><b>00:00:00</b></div>
<br/>
<div id="step"><b> </b></div>
<input type="button" value=" 开 始 " onClick="setImg()" />
<input type="button" value=" 还 原 " onClick="location.reload()" />
<img src="img/00.jpg" width="198px" height="150px" /></div></td>
</tr>
<tr>
<td id="5" background="img/5.jpg"> </td>
<td id="6" background="img/6.jpg"> </td>
<td id="7" background="img/7.jpg"> </td>
<td id="8" background="img/8.jpg"> </td>
</tr>
<tr>
<td id="9" background="img/9.jpg"> </td>
<td id="10" background="img/10.jpg"> </td>
<td id="11" background="img/11.jpg"> </td>
<td id="12" background="img/12.jpg"> </td>
</tr>
</table>
</body>
</html>

...全文
501 5 点赞 打赏 收藏 举报
写回复
5 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
wuhf123whf 2013-02-16
同意2#看法 同意4#看法
  • 打赏
  • 举报
回复
安绮纭 2013-02-06
同意2#看法
  • 打赏
  • 举报
回复
ku2ran 2013-02-06
这个一个jsonobject数据
  • 打赏
  • 举报
回复
zlss_17 2013-01-29
{}表示一个js对象,里面的内容冒号前的是属性名,后面的是属性值。
  • 打赏
  • 举报
回复
「已注销」 2013-01-29
var bottom = {"1":"5","2":"6","3":"7","4":"8","5":"9","6":"10","7":"11","8":"12"}; 这是一个js对象。 bottom["1"]的值为5 bottom["2"]的值为6 ......
  • 打赏
  • 举报
回复
相关推荐
发帖
Java
加入

4.8w+

社区成员

Java相关技术讨论
申请成为版主
帖子事件
创建了帖子
2013-01-28 10:51
社区公告
暂无公告