购物车结算功能,打造完美的购物结算功能
工具/原料
JAVAscript简单语言
HTML语言
DW网页编辑器
方法/步骤
1、打开DW网页编辑器
2、新建文档
3、在<head></head>之间输入javascript功熹栳缂靖能代码代码如下:<scripttype="text/javascript"&g墉掠载牿t;<!--function$(id){returndocument.getElementById(id);}functioninit(){for(vari=1;i<=5;i++){$("price"+i).onblur=function(){//onblur失去焦点时发生stotal(i);}$("pnum"+i).onblur=function(){stotal(i);}}}functionstotal(c){vartotal=0;for(vari=1;i<=5;i++){x=parseInt(checkempty($("price"+i).value));y=parseInt(checkempty($("pnum"+i).value))$("psum"+i).value=checkempty(x*y);total=total+parseInt($("psum"+i).value);}$("total").value=total;}functioncheckempty(c){varpatrn=/^\d*$/;if(!patrn.exec(c)){return"0";}returnc;}--></script>
4、输入HTML代码:<BODYonLoad="init(拘七呷憎)"><tablecellpadding="5"cellspa艘早祓胂cing="5"><tr><td>价格</td><td>数量</td><td>金额</td></tr><tr><td><inputtype="text"id="price1">元</td><td><inputtype="text"id="pnum1"value="10">个</td><td><inputtype="hidden"id="psum1"readonly>元</td></tr><tr><td><inputtype="text"id="price2">元</td><td><inputtype="text"id="pnum2"value="10">个</td><td><inputtype="hidden"id="psum2"readonly>元</td></tr><tr><td><inputtype="text"id="price3">元</td><td><inputtype="text"id="pnum3"value="10">个</td><td><inputtype="hidden"id="psum3"readonly>元</td></tr><tr><td><inputtype="text"id="price4">元</td><td><inputtype="text"id="pnum4"value="10">个</td><td><inputtype="hidden"id="psum4"readonly>元</td></tr><tr><td><inputtype="text"id="price5">元</td><td><inputtype="text"id="pnum5"value="10">个</td><td><inputtype="hidden"id="psum5"readonly>元</td></tr><tr><td></td><tdstyle="text-align:right">总计</td><td><inputtype="text"id="total"readonly>元</td></tr></table></body>
5、最后保存,看效果,大功告成。到此购物车结算功能完成。