便利店收银系统
作业要求文档
效果图
addClick()
function addClick(price){ var result = document.getElementById("result").value; if(result==""|| undefined || null){ //判断result框里的值是否为空 $("#result").val(price); //将价格添加到result中 } else { $("#result").val(result+"+"+price); //在后面使用“+”拼接 } }
checkoutClick
function checkoutClick(){ var result = document.getElementById("result").value; var arr = new Array(); arr = result.split("+"); //使用“+”分隔result，并存入arr数组中 var sum = 0; for(var i=0;i<=arr.length-1;i++){ arr[i]=parseFloat(arr[i]) //数据类型转换：从string类型转换为number（注：parseInt只会保留整数） sum+=arr[i]; //使用for循环求得数组arr中所有数之和sum } $("#result").val("总金额："+sum); //并输出到result框中 disabledBtn(); //调用函数 transparency() }
使用for…of…循环求和—代码最少实现同样功能，
for(var c of arr){ c=parseFloat(c); sum+=c; }
使用for…in…循环求和
for (var i in arr) { arr[i] = parseFloat(arr[i]) sum += arr[i]; }
function disabledBtn(){ $("#btn_checkout").attr("disabled","disabled") //设置禁用 } function transparency(){ $("table").animate({opacity:0.3},1000) //要求使用animate函数，改变透明度 // $("table").fadeTo(1000,0.3) //也可以实现同样效果，改变透明度 } function reloadClick(){ window.location.reload() //刷新页面 }
加点小改进（2021/06/13）
禁用添加
防止 结账之后还能继续使用添加按钮
$("input").not("[value='交易完成']").attr("disabled","disabled"); //禁用除了"交易完成"的所有按钮
:hover样式
给表格添加hover样式
.hv tr:hover{ background-color: gainsboro; }
点击结账后，使hover效果消失
给表格table添加一个class=“hv”
利用removeClass()删除 类
$(".hv").removeClass("hv") //删除:hover样式
try…catch抛出异常
点击结账，先判断result框内是否为空，为空则抛出异常提示，不再执行后面代码。
function checkoutClick(){ var result = $("#result").val(); try { if(result ==""){ throw new Error(); } var arr = new Array(); arr = result.split("+"); var sum = 0; for (var c of arr) { c = parseFloat(c); sum += c; } $("#result").val("总金额："+sum); disabledBtn(); transparency(); } catch(e){ alert("请先添加商品！") } }
获取result框内的值
从js的方法
var result = document.getElementById("result").value;
改为jQuery的val()方法，更简洁
var result = $("#result").val();
思考：怎么可以添加商品？
搜索引擎
作业要求文档
iframe框架
<body> <form action="index.html" method="get"> <input type="text" class="search_val"> <input type="submit" value="搜索" /> <!-- 提交按钮 --> </form> <table> <!--在 iframe 框架中打开被链接文档 tab1.html 或 tab2.html--> <tr> <td><a href="tab1.html" target="main">标签页 1-网页</a></td> <td><a href="tab2.html" target="main">标签页 2-资讯</a></td> </tr> </table> <hr /> <!-- tab1.html 显示在 iframe 中 --> <iframe name="main" id="main" src="tab1.html" width="500px" height="280px" frameborder="0"></iframe> </body>
target 与 name 名相同时，在iframe中调用
