js简单的shopping

原创

小翼学js 2009-09-28 17:49:28 博主文章分类：js ©著作权

©著作权归作者所有：来自51CTO博客作者小翼学js的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
       <title>shopping.html</title>

       <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
       <meta http-equiv="description" content="this is my page">
       <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       
       <script type="text/javascript">
function myshop(){
var sele=document.getElementById("myselect");
var tex=document.getElementById("danjia");
var a=sele.options[sele.selectedIndex];
if(a.text=="苹果"){
      tex.value="2";
}
else if(a.text=="香蕉"){
      tex.value="3";
}else{
     tex.value="";
}
}
function buy(){
    var sele=document.getElementById("myselect");
    var a=sele.options[sele.selectedIndex];
    var num=document.getElementById("numid");
   if(a.text=="请选择。。"){
       alert("您还未选择。。请选择！！");
    }else{
    var a=window.prompt("请输入购买的数量");
    var b=window.confirm("确定要购买吗？");
    if(b==0){
       alert("购买失败");
    }else{
       if(!isNaN(a)&&a>0){
       num.value=a;
       alert("购买成功");
       var table=document.getElementById("table");
       var sel=document.getElementById("myselect");
       var danjia=document.getElementById("danjia").value;
       var num=document.getElementById("numid").value;
       //做一个判断。。看里面有没有那个东西了，如果有，就把数量累加。。
       var c=-1;
       for(var i=0;i<table.rows.length;i+=1){
         if(table.rows[i].cells[0].innerHTML==sel.options[sel.selectedIndex].text){
           c=i;
          }
       }
      if(c==-1){
       var x=table.insertRow(-1);
       var a=x.insertCell(0);
       var b=x.insertCell(1);
       var c=x.insertCell(2);
       a.innerHTML=sel.options[sel.selectedIndex].text;
       b.innerHTML=num;
       c.innerHTML=document.getElementById("danjia").value;
       }else{
       table.rows[c].cells[1].innerHTML-=-num;
       }
      }else{
        alert("您输入的不是数字或者输入的数字小于1，请重新选择");
      }
    }
    }
}
function jiezhang(){
     var b=window.confirm("确定要结账吗？");
     if(b==0){alert("请继续购买！！")
     }else{
       var table=document.getElementById("table");
       var zongjia=0;
       for(var i=1;i<table.rows.length;i+=1){
       var goods=table.rows[i].cells[0].innerHTML;
       var num=table.rows[i].cells[1].innerHTML;
       var jiage=table.rows[i].cells[2].innerHTML;
       alert("你要购买的物品是"+goods);
       alert("你需要付的钱是"+num*jiage);
       zongjia+=num*jiage;
      }
      alert("你总共要支付"+zongjia);
      }
}

</script>
    </head>

    <body>
        <input type="button" id="jiezhang" value="结账" />
        <br />
        <table border="1" cellpadding="1" cellspacing="1" id="table">
            <tr>
                <td width="60">
                    商品
                </td>
                <td width="60">
                    数量
                </td>
                <td width="60">
                    价格
                </td>
            </tr>
        </table>
        <br />
             
        <table border="1" cellpadding="1" cellspacing="1" id="table">
            <tr>
                <td width="60">
                    商品
                </td>
                <td width="60">
                    单价(元/斤)
                </td>
                <td width="60">
                    数量
                </td>
                <td width="60">
                    操作
                </td>
            </tr>
            <tr>
                <td width="60">
                    <select id="myselect" onchange="myshop()">
                        <option>
                            请选择。。
                        </option>
                        <option>
                            苹果
                        </option>
                        <option>
                            香蕉
                        </option>
                    </select>
                <td>
                    <input type="text" id="danjia" readonly="readonly">
                </td>
                <td>
                    <input type="text" id="numid" readonly="readonly">
                </td>
                <td>
                    <input type="button" id="ibuy" value="购买" onclick="buy()">
                </td>
            </tr>
        </table>
    </body>
</html>