1+x作业0609

最新推荐文章于 2022-06-16 21:10:00 发布

梦中千秋

最新推荐文章于 2022-06-16 21:10:00 发布

阅读量573

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_50969362/article/details/117771455

版权

笔记专栏收录该内容

100 篇文章 18 订阅

订阅专栏

便利店收银系统

作业要求文档

效果图

在这里插入图片描述

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>