目录
便利店收银系统
作业要求文档
效果图
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中调用
