web小作业——图书选购列表框

(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].valueb.text=$("beixuan").options[$("beixuan").selectedIndex].text$("caigou").add(b)//将备选区选中的商品加入采购区中}function undoone(){//退购var c= $("caigou")var index=c.selectedIndexc.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）效果如下

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

点击“结账”

点击“清空”

web小作业——图书选购列表框相关推荐

带你玩转超级列表框（1-4）雪山灵狐
[原创]带你玩转超级列表框(全套教程目录)讲师:雪山凌狐 http://bbs.125.la/forum.php?mod=viewthread&tid=14021598 (出处:精易论坛) 带 ...
WEB课堂作业练习 1 （div布局，表格，锚点，列表）
WEB课堂作业练习 1 (div布局,表格,锚点,列表) div布局 <!DOCTYPE html> <html lang="en"> <head&g ...
用vb列表框做一个图书管理系统
哈喽大家好,欢迎来到一起学VB课堂,今天我们将要学习列表框ListBox控件和组合框ComboBox控件,这两个控件在VB中是非常重要的控件,当然其难度也比前面学习的控件难度有所增加,这两个控件我会单 ...
（附源码）小程序图书管理系统毕业设计 250858
Node.js图书管理小程序的开发摘要大数据时代下,数据呈爆炸式地增长.为了迎合信息化时代的潮流和信息化安全的要求,利用互联网服务于其他行业,促进生产,已经是成为一种势不可挡的趋势.在图书馆管理 ...
使用 jQuery Mobile 与 HTML5 开发 Web App (七) —— jQuery Mobile 列表
如 Kayo 之前所写的文章 <使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 内容格式> 中所述,这次介绍的是 jQuery M ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
DIV布局——化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业静态网页
HTML5期末大作业:化妆品商城网站设计--化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业静态网页文章目录 HTML5期末大作业:化妆品商城网站设计--化妆品 ...
《计算机应用基础》第四次作业,[业务]计算机应用基础四次小作业
[业务]计算机应用基础四次小作业 (8页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 9.9 积分本科专业第一次小作业辅导:课本第39页,第52页的填空 ...
Asp net实现下拉框和列表框的连动
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 走过了牛 ...

web小作业——图书选购列表框

web小作业——图书选购列表框相关推荐

最新文章

热门文章