个人小项目：现有12个小球和一个天平，小球中有一个重量与其它的不同，称重几次能将这个小球找出来

个人小项目：现有12个小球和一个天平，小球中有一个重量与其它的不同，称重几次能将这个小球找出来

写这个小项目的心思起源于一个知乎问题：假设现在有12个小球，其中一个重量与其他的不同，至少称多少次可以称出来，用JQuery写了一个页面来实现，不过因为只学习了一周的Jquery，有点苦手，不过好歹写出来了，源码贴在了页面底部，

第一步：业务分析：

1.既然是模拟称重的过程，那么需要定义两个数组，数组中可以存放小球标签对象，也可以按顺序存放小球的标签的weight属性，我在这里存放的是小球标签对象，方便操作和提取属性

2.模拟称重过程是需要将小球从原有的位置放到天平的称重盘里面，并且一个小球只能取一次，那么就使用hide()方法让小球在原有位置消失，然后再使用append方法在天平称重盘位置创建新的小球标签，这里要防止两件事发生、

1)使用append()方法会导致小球重复添加，那么在每添加一个新小球到天平的称重盘框里面的时候，每添加一个在执行方法之前，需要remove称重盘中的内容

2)称重盘有两个，因为是使用按钮添加，那么当用户两个按钮都点下的情况下再去点小球如何防止同一个小球在两个称重盘中重复添加？这里需要用到事件的接触绑定，unbind("click")方法，在每次点击左右添加按钮之前，先将所有小球的点击事件全部解除绑定，然后再重新添加绑定事件

3.在称重的同时，12个小球的数量其实很多了，不可以让用户拿个本子用笔来记录吧，所以需要添加一个结果框，显示每一次称重的结果，使用append()方法实现

4.质量不同的小球编号应该是一个随机数，在每一次打开页面的时候，这个质量不同的小球就随机好，并且小球是比其它小球轻还是重也应该是随机的

第二步：画静态页面

1.画12个小球，每个小球都添加自定义属性item和weight（好像JQuery中设置自定义属性的值只能是字符串）

<div id="center">
<div class="ball fl" id="b1" item="1" weight="10"><span>1</span></div>
<div class="ball fl" id="b2" item="2" weight="10"><span>2</span></div>
<div class="ball fl" id="b3" item="3" weight="10"><span>3</span></div>
<div class="ball fl" id="b4" item="4" weight="10"><span>4</span></div>
<div class="ball fl" id="b5" item="5" weight="10"><span>5</span></div>
<div class="ball fl" id="b6" item="6" weight="10"><span>6</span></div>
<div class="ball fl" id="b7" item="7" weight="10"><span>7</span></div>
<div class="ball fl" id="b8" item="8" weight="10"><span>8</span></div>
<div class="ball fl" id="b9" item="9" weight="10"><span>9</span></div>
<div class="ball fl" id="b10" item="10" weight="10"><span>10</span></div>
<div class="ball fl" id="b11" item="11" weight="10"><span>11</span></div>
<div class="ball fl" id="b12" item="12" weight="10"><span>12</span></div>
</div>

小球的css样式:

.ball{
height: 20px;
width: 20px;
border-radius: 10px;
background-color: red;
margin: 10px;
text-align: center;
position: relative;

color:white;

}

.fl{
float: left;
}

得到一组横向排列的小球：


2.用PhotoShop画一个天平：

（这大概是PhotoShop被黑的最惨的一次）

再在天平左右各添加一个添加小球的按钮，再在随意位置添加一个称重和重置按钮，大概的样子就有了

3.在称重的下面添加一个结果表，用于存放，每一次称重的结果（一开始是一个空的并且有边框的div块），这张图片是添加了一个结果的效果

4.然后最后再添加一个input框和一个确认按钮，由用户输入结果

这样静态页面就画好啦XD

第三步：Script代码

注：几个按钮的id分别是：
天平左侧添加小球：bu1
天平右侧添加小球：bu2
称重：bu3
重置：bu4
确认：bu5

<script language="JavaScript">
//创建两个数组，分别存放左边盘小球对象和右边盘小球对象
var leftbar = new Array();
var rightbar = new Array();
//创建一个整形变量，存放当前称重的次数
var time = 1;
//创建一个随机数方法，用于获取随机数
function random(min,max){
return Math.floor(min + Math.random() * (max - min));
}
//获取两个随机数，一个随机数用于随机出小球中质量不同的那个小球，第二个随机数用于获取比普通小球轻还是重
var rand = random(0,11);
var weightH = random(0,20);
//如果weightH==10（即和普通小球重量相同）则重新随机
while (weightH==10){
weightH = random(0,20);
}
$(function(){
//将获取的重量不同的小球的编号和它的重量，添加到指定小球
$("#center").children(".ball").filter(":eq("+rand+")").attr("weight",weightH+"");
//向天平左侧称重盘添加小球按钮
$('#bu1').click(function(){
alert("请点击要放到天平左边的小球");
//取消点击事件绑定，如果不取消，会导致用户点击了左侧按钮和右侧按钮后再点击小球，会分别执行两个方法
$(".ball").unbind("click");
//重新绑定小球点击事件
$(".ball").click(function(){
//JQuery中的不定长数组很好用，需要往数组中添加数据并赋值时，直接赋值下标为其长度的数组对象即可
//获取数组当前长度
l = leftbar.length;
//检查是否超出个数
if (l>=6) {
alert("天平每个盘里不能超过6个！！！")
} else{
$(this).hide(500);//对当前点击到的对象进行操作
leftbar[l]=$(this);//将对象传入数组
//清空称重盘中的小球
$("div").remove("#leftpan .ballInBox");
//对数组进行遍历，并往称重盘中添加小球
for (i=0;i<leftbar.length;i++) {
$("#leftpan").append("<div weight='"+leftbar[i].attr("weight")+"' class='ballInBox fl' item='"+leftbar[i].attr('item')+"'><span class='num'>"+leftbar[i].attr('item')+"</span></div>");
}
}
})
})
//向天平左侧称重盘添加小球按钮，和左侧添加基本相同
$('#bu2').click(function(){
alert("请点击要放到天平右边的小球");
$(".ball").unbind("click");
$(".ball").click(function(){
r = rightbar.length;
if (r==6) {
alert("天平里每个盘里不能超过6个！！！")
} else{
$(this).hide(500);
rightbar[r]=$(this);
$("div").remove("#rightpan .ballInBox");
for (i=0;i<rightbar.length;i++) {
$("#rightpan").append("<div weight='"+rightbar[i].attr("weight")+"' class='ballInBox fl' item='"+rightbar[i].attr('item')+"'><span class='num'>"+rightbar[i].attr('item')+"</span></div>");
}
}
})
})
//称重按钮
$("#bu3").click(function(){
//定义三个变量：左边称重盘重量，右边称重盘重量，称重结果
var leftWeight = 0;
var rightWeight = 0;
var result = "";
//对两个称重盘中小球的数组进行遍历，计算出左边和右边的总重量
for (i=0;i<leftbar.length;i++) {
leftWeight = leftWeight+parseInt(leftbar[i].attr("weight"));
}
for (j=0;j<rightbar.length;j++) {
rightWeight = rightWeight+parseInt(rightbar[j].attr("weight"));
}
//进行判断，并且对结果变量赋值
if (leftWeight>rightWeight) {
alert("左边重");
result = "左边重";
} else if(leftWeight<rightWeight){
alert("右边重");
result = "右边重"
}else{
alert("两边一样重");
result = "两边一样重啦"
}
//接下来在结果块中创建结果
//将左边和右边小球的item属性取出来，分别放到一个数组当中
var arrL = new Array();
var arrR = new Array();
for (a = 0;a<leftbar.length;a++) {
arrL[arrL.length] = leftbar[a].attr("item");
}
for (a = 0;a<rightbar.length;a++) {
arrR[arrR.length] = rightbar[a].attr("item");
}
//结果集包含：当前称重次数，左边所有小球的编号，右边所有小球的编号，称重结果
$(".results").append("<div class='result'><div class='time fl'>"+"当前次数："+time+"</div><div class='leftlist fl'>左边小球："+arrL+"</div><div class='rightlist fl'>右边小球:"+arrR+"</div><div class='weightResult fl'>"+result+"</div></div>");
//称重次数+1
time++;
})
//重置按钮
$("#bu4").click(function(){
$(".ball").unbind("click");
//重置需要首先清空数组
leftbar.length = 0;
rightbar . length = 0;
//然后清空两边盘子中的球
$("div").remove("#leftpan .ballInBox");
$("div").remove("#rightpan .ballInBox");
//然后对所有小球进行遍历isVisible，如果不是，则将其显示出来
var children = new Array();
children = $("#center").children(".ball").filter(":hidden");
//获取到没有显示的元素后，将其显示出来
children.show(500);
})
//确认按钮
$("#bu5").click(function(){
//只要输入的数值和rand+1相同，则猜对，否则就猜错
//获取input框中用户填入的值
var guess = $("input").val();
if (rand+1 == parseInt(guess)) {
alert("恭喜答对");
} else{
alert("是不是这个你心里没点B数吗？");
}
})
})
</script>

完工！ XD

测试

因为有结果集在下面，所以都不需要一步一步来啦，只需要将结果发上来就可以，简单易懂
知乎上面的答案说最少只需要三次就可以称出来，但是还没仔细研究，称了5次才出来





用JQuery写的原因就是为了方便分享，源码我也已经上传，这是我的第一个个人小项目，下一个小项目已经有些想法，周末有空就会动笔

html源码下载：http://download.csdn.net/download/liuajiehe1234567/9967086