简易选购图书程序js

最新推荐文章于 2024-01-31 11:36:50 发布

J1ang1

最新推荐文章于 2024-01-31 11:36:50 发布

阅读量482

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_56628174/article/details/129364870

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <table>
            <caption>选购图书</caption><!--表格标题-->
            <tr>
                <td>图书备选区</td>
                <td>图书采购区</td>
            </tr>
            <tr>
                <td>
                    <select name="" id="menu" multiple size="6">
                        <option value="10">图书1（10元）</option>
                        <option value="20">图书2（20元）</option>
                        <option value="30">图书3（30元）</option>
                        <option value="20">图书4（20元）</option>
                        <option value="10">图书5（10元）</option>
                        <option value="15">图书6（15元）</option><!--value是价钱-->
                    </select>
                </td>
                <td>
                    <select name="" id="buy" multiple size="6">
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" value="单一选购" onclick="doone()">
                    <input type="button" value="单一退购" onclick="undoone()">
                    <input type="reset" name="" id="" value="清空" onclick="javascript:location.reload();">
                    <input type="button" value="结账" onclick="checkout()">
                </td>
            </tr>
        </table>
    </form>
</body>
<script languahe="javascript">
    function $(id){
        return document.getElementById(id);
    }
    function doone(){
        var book=document.createElement("option");
        book.value=$("menu").options[$("menu").selectedIndex].value;
        book.text=$("menu").options[$("menu").selectedIndex].text;
        $("buy").add(book);
    }
    function undoone(){
        $("buy").options.remove($("buy").selectedIndex);
    }
    function checkout(){
        var sum=0;
        var count=$("buy").options.length;
        for(i=0;i<count;i++){
            sum+=parseFloat($("buy").options[i].value)
        }
        alert("商品总价为"+sum+"元");
    }
</script>
</html>