web小作业——图书选购列表框_设计表单,制作读者选购图书的界面,当读者选中一本图书后,单击“确定”按钮,页面-CSDN博客

本文链接：https://blog.csdn.net/m0_51858205/article/details/128149910

(1）在body 标记中插人 form 标记，并在form 中插人了合适的的表格、表格标题为“选购图书”。左边列表框中选项信息分别为“计算机网络(32 元)”“数据结构(58 元)”“Java 程序设计（45元)”.....

(2）定义4个普通按钮的 value 属性分别为“单一选购”“单一退购”“结账”“清空”，其中“清空”可用重置按钮。

(3）编写单一选购 doone()、单一退购 undoone()、清空clearnone(）、结账 checkout()函数，其功能分别如下：

•单一选购 doone()：从左边列表框中选择1个选项,单击“单一选购”按钮，自动添加到右边“图书采购区”列表框中。

•单一退购 undoone()：从右边列表框选择任1个选项后,单击“单一退购”按钮后，将从右边列表框中删除该选项。

•清空 clearnone(）：单击“清空”按钮，将所有选购图书信息从右边列表框中全部删除

•结账 checkout()函数：单击“结账”按钮后,将右边列表框中所选购的图书的价格进行汇总,然后通过告警消息框输入总价

（4）实现代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
	<script type="text/javascript">
		function $(id) {return document.getElementById(id);}
		function doone(){//选购函数
			var b= document.createElement("option")
			b.value=$("beixuan").options[$("beixuan").selectedIndex].value
			b.text=$("beixuan").options[$("beixuan").selectedIndex].text
			$("caigou").add(b)//将备选区选中的商品加入采购区中
		}
		function undoone(){//退购
			var c= $("caigou")
			var index=c.selectedIndex
			c.options.remove(index)//将选中的商品从采购区删除	
		}
		function clearnone(){//清空
			var count=$("caigou").options.length//count记录商品数量
			for(i=0;i<count;i++){//移除所以商品
			$("caigou").remove($('caigou').selectedIndex.text)
			}
		}
	    function checkout() {//结账	
			var sum=0;//用来记录商品总价
			count=$("caigou").options.length//count记录商品数量
			for(i=0;i<count;i++){
			sum+=parseFloat($("caigou").options[i].value)//计算采购的商品总价，parseFloat将value转化为浮点数然后相加
			}	
			alert("商品总价为\n"+sum+"元")
		} 
	</script>
</head>
<body>
<form>
	<table border="0"  ><!-- 创建选购表格 --> <!-- 表格内容对齐等一般写在css里面，这里直接写在HTML里 -->
	<caption style="text-align: center;">选购图书</caption>
		<tr>
			<td style="text-align: center;">图书备选区</td>
			<td style="text-align: center;">图书采购区</td>
		</tr>
		<tr>
			<td>
		<select size="5" id="beixuan" ondblclick="doone()" ><!-- ondblclick--双击图书商品也能选购 -->
        <option value="32元">计算机网络(32元)</option>
        <option value="58元">数据结构(58元)</option>
        <option value="45元">web前端开发技术(45元)</option>
		<option value="49元">web前端开发技术实验与实践(49元)</option>
		<option value="35元">计算机组成原理(35元)</option>
		<option value="30元">数据库开发技术(30元)</option>
    </select>
			</td>
			<td><select size="5" id="caigou" ondblclick="undoone()"></select> <!-- ondblclick--双击图书商品也能退购 -->
			</td>
		</tr>
	</table>
	<input type="button" onclick="doone()" value="单一选购" >
	<input type="button" onclick="undoone()" value="单一退购" >
	<input type="button" onclick="clearnone()" value="清空" >
	<input type="button" onclick="checkout()" value="结账" >
	</form>
	</body>
</html>

（5）效果如下

“双击”图书或选中后点击“单一采购”