一道有难度的JS面试题，求大侠们帮忙解答T_T...

小弟面试一家大公司时遇到这样一道面试题，结果不才，没做出来！故想求有能力的大侠帮忙做一下，以供小弟和其他有需要的朋友学习，小弟在这里先谢谢了！^_^请用JS编写一个自动贩卖机，要求如下：1.自动贩卖机分为商品展示、投币和处理结果三部分。
2.商品展示部分共有6种商品，商品的排列顺序是随机的。
3.这6种商品的价格分别为30元、40元、50元、60元、70元、90元，名称随意。
4.每种商品的数量最多为3个，最少为0个，该数值是随机分配的。
5.投币部分，可以投入的面额为5元、10元、50元和100元4种，其中100元面值最多可投2张，其他3种可投次数不限。
6.投币部分的“投入金额”是已投入的钱币总额，在购买商品成功后减去该商品的价格，并在“处理结果”栏显示已成功购买的商品信息。
7.如果“投入金额”的数目少于要购买的商品的价格，将退出已投入的钱币，并在“投入金额”显示0，在“处理结果”栏显示“找回零钱”。
8.如果某商品的数量为0个，将禁用“购买”按钮，不允许购买该商品。
9.除上述已列出的要求外，可根据真实的自动贩卖机的行为编写其他你想到的功能。
注意事项：商品的图片可以任意选择，图片不在评审范围内。
以上各点要求如果没能完全实现，也要将未能实现的部分已写出的代码保留，以备评审。
以文档的形式列出各模块的设计、实现思路。
如果上述要求（9点要求）不够充分，或者有出错的隐患，或者需要增加某功能，请分别列出。
界面部分请参考下图，下图的布局并非最终要求，如果有更好的创意，亦可自行设计。下面代码是我当时设计的HTML，发一下，以提供方便！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<style>
#main {
background-color: #CCCCCC;
width: 860px;
height:620px;
padding-top:10px;
margin:0 auto;
}
#main #left{
float:left;
width:600px;
}
  #left ul {
overflow:hidden;
  }
  #left ul li {
float:left;
width:130px;
height:180px;
overflow:hidden;
background-color:#FFFFFF;
margin-right:30px;
border: 5px solid #56CAF5;
text-align: center;
margin-bottom:20px;
  }
  #left ul li div.cont {
    margin:15px;
width:100px;
height:80px;
background-color:#56CAF5;
  } 
#main #right {
float:right;
background-color:#993300;
width:200px;
height:200px;
margin-top:20px;
margin-right:40px;
text-align:center;
color:#FFFFFF;
}
#main #right p {
margin-bottom:50px;
}
#main #right p span {
padding-left:20px;
padding-right:20px;
margin-left:5px;
margin-right:5px;
background-color:#0099FF;
}
#main #right input {
width:80px;
margin-bottom:10px;
}#main textarea {
width:770px;
height:110px;
float:left;
margin-left:40px;
overflow:hidden;
padding-left:10px;
padding-top:10px;
}
#main textarea p {
font-size:12px;
color:#FFFFFF;
    font-weight: bold;
margin-left:20px;
}</style><title>自动贩卖机</title>
</head><body>
<div id="main">
<div id="left">
<ul>
<li>
  <div class="cont"></div>
  <p>咖啡（3）60</p>
  <input type="button" value="购 买" />
</li>
<li>
  <div class="cont"></div>
  <p>奶茶（0） 50</p>
  <input type="button" value="购 买" />
</li>
<li>
  <div class="cont"></div>
  <p>香槟（1） 90</p>
  <input type="button" value="购 买" />
</li>
<li>
  <div class="cont"></div>
  <p>牛奶（2） 30</p>
  <input type="button" value="购 买" />
</li>
<li>
  <div class="cont"></div>
  <p>果汁（3） 40</p>
  <input type="button" value="购 买" />
</li>
<li>
  <div class="cont"></div>
  <p>啤酒（1） 70</p>
  <input type="button" value="购 买" />
</li>
</ul>
</div>
<div id="right">
<p>投入金额<span>0</span>元</p>
<input type="button" value="5元" /> <input type="button" value="10元" />
<input type="button" value="50元" /> <input type="button" value="100元" />
</div><textarea>
投入50元。
投入100元。
购买 牛奶 成功。
找回零钱。
</textarea></div>
</body>
</html>

解决方案 »

  1.   


    这题就是我拿到的面试题全部其实逻辑还是挺清楚的啊！你把我设计的HTML在本地运行一下，再根据我的HTML看要求，我想基本就明白要做出什么功能了！
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <style>
    #main {
        background-color: #CCCCCC;
        width: 860px;
        height:620px;
        padding-top:10px;
        margin:0 auto;
    }
    #main #left{
    float:left;
    width:600px;
    }
      #left ul {
        overflow:hidden;
      }
      #left ul li {
        float:left;
        width:130px;
        height:180px;
        overflow:hidden;
        background-color:#FFFFFF;
        margin-right:30px;
        border: 5px solid #56CAF5;
        text-align: center;
        margin-bottom:20px;
      }
      #left ul li div.cont {
        margin:15px;
        width:100px;
        height:80px;
        background-color:#56CAF5;
      } 
    #main #right {
    float:right;
    background-color:#993300;
    width:200px;
    height:200px;
    margin-top:20px;
    margin-right:40px;
    text-align:center;
    color:#FFFFFF;
    }
    #main #right p {
    margin-bottom:50px;
    }
    #main #right p span {
    padding-left:20px;
    padding-right:20px;
    margin-left:5px;
    margin-right:5px;
    background-color:#0099FF;
    }
    #main #right input {
    width:80px;
    margin-bottom:10px;
    }#final{
    width:770px;
    height:110px;
    float:left;
    margin-left:40px;
    overflow: scroll;
    padding-left:10px;
    padding-top:10px;
    border:solid 2px black;
    }
    #main textarea p {
        font-size:12px;
        color:#FFFFFF;
        font-weight: bold;
        margin-left:20px;
    }</style><title>自动贩卖机</title>
    <script type="text/javascript">
    Automat=function(){}
    Automat.Money=0;
    Automat.Goods=new Array();
    Automat.CurrentMoney=0;
    //更新投入的币值
    Automat.UpdateMoney=function(){
        var _money=document.getElementById('money');
        _money.innerHTML=Automat.CurrentMoney;
    }
    Automat.AddMoney=function(target){
        Automat.Money+=parseInt(target.value);
        Automat.CurrentMoney=Automat.Money;
        Automat.UpdateMoney();
        Automat.UpdateFinal('投入'+parseInt(target.value)+'元');
    }
    Automat.UpdateFinal=function(msg){
        var _final=document.getElementById('final');
        _final.innerHTML+=msg+'<br/>';
    }
    Automat.Finsh=function(){
        var _final=document.getElementById('final');
        for(var i=0;i<Automat.Goods.length;i++){
            Automat.UpdateFinal('购买 '+Automat.Goods[i].name+' 成功');
        }
        Automat.UpdateFinal('找回零钱 '+Automat.CurrentMoney+'');
        Automat.Money=0;
        Automat.Goods.length=0;
        Automat.CurrentMoney=0;
        Automat.UpdateMoney();
    }
    Automat.Pay=function(g){
        if(g.count<=0){
            alert('没有商品了');
            return;
        }
        if(Automat.CurrentMoney<g.price){
            alert('对不起，你的余额不足');
            return;
        }
        Automat.Goods.push(g);
        Automat.CurrentMoney-=g.price;
        g.count--;
        Automat.Finsh();
    }
    Automat.AddGoods=function(G){
        var _ul=document.getElementById('list');
        var _li=document.createElement('li');
        var _div=document.createElement('div');
        _div.setAttribute('className','cont');
        _li.appendChild(_div);
        var _p=document.createElement('p');
        _p.innerHTML=G.name+','+G.price+','+G.count+'';
        _li.appendChild(_p);
        var btn=document.createElement('input');
        btn.setAttribute('type','button');
        btn.setAttribute('value','购买');
        btn.onclick=function(){
            Automat.Pay(G);
            this.parentNode.childNodes[1].innerHTML=G.name+','+G.price+','+G.count+'';
        }
        _li.appendChild(btn);
        _ul.appendChild(_li);
    }
    Goods=function(){
        this.img=null;
        this.count=0;
        this.price=0;
        this.name='';
    }
    Goods.prototype=new Goods();
    Goods.prototype.init=function(img,count,price,name){
        this.img=img;
        this.count=count;
        this.price=price;
        this.name=name;
    }
    //
    BingIn=function(){
        var btn=document.getElementById('right').getElementsByTagName('input');
        for(var i=0;i<btn.length;i++){
            if(parseInt(btn[i].value)!=100){
                btn[i].onclick=function(){
                    Automat.AddMoney(this);
                }
            }
            else{
                btn[i].onclick=function(){
                     if(parseInt(this.times)<2){
                        Automat.AddMoney(this);
                        this.times=parseInt(this.times)+1;
                    }
                    else
                        this.disabled='disabled';
                }
            }
        }
    }
    //页面加载完成时
    window.onload=function(){
        BingIn();
        var _coffee=new Goods();
        _coffee.init(null,1,10,'coffee');
        Automat.AddGoods(_coffee);
    }
    </script>
    </head><body>
    <div id="main">
    <div id="left">
    <ul id="list">
    </ul>
    </div>
    <div id="right">
    <p>投入金额<span id="money">0</span>元</p>
    <input type="button" value="5元" /> <input type="button" value="10元" />
    <input type="button" value="50元"/> <input type="button" value="100元" times='0'/>
    </div><div id="final">
    </div></div>
    </body>
    </html>