Web实验十一 JavaScript基础

最新推荐文章于 2024-06-10 21:57:03 发布

烦躁的黄色汉堡诶

最新推荐文章于 2024-06-10 21:57:03 发布

阅读量172

点赞数 1

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

本文链接：https://blog.csdn.net/m0_70331091/article/details/134916736

版权

Web实验十一 JavaScript基础

一、实验目的：

1、掌握JavaScript的操作符使用

2、掌握JavaScript的函数定义

3、掌握JavaScript的变量定义

二、实验内容：

1、完成以下效果的网页设计：

初始化网页如下：

在这里插入图片描述

当选择部分页面后，点击查看购物车，弹出警告框，显示所选商品名称及价格。网页展示效果如下：

在这里插入图片描述

点击收银台结算，则计算出所选商品的总价，并以警告框的方式显示，效果如下：

在这里插入图片描述

点击全部取消，则取消所有复选框。

三、实验代码展示：

<html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>手机选购</title>
  <style type="text/css">
        *{
            margin: 0 0;
            padding: 0 0;
            border-width: 0;
        }
        div.product{
            margin: 2px;
            border:1px solid;
            width: 250px;
            height: 100px;
            text-align: center;
            float: left;
        }
        h4{
            position: relative;
            top:20px;
        }
        div.button {
            text-align: center;
            float: left;
            position: relative;
            top:10px;
            left:150px;
        }
        div.body{
            width: 520px;
            margin: 0 auto;
        }
        input.myBtn{
            border:1px solid;
            width: 80px;
            margin-right: 10px;
            text-align: center;
        }
  </style>
  <script type="text/javascript">
    function clearAll() 
    {
        // 清空选中的商品数组和总价
        selectedItems = [];
        totalPrice = 0;

        // 将复选框全部设置为未勾选状态
        var checkboxes = document.getElementsByClassName('sp');
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = false;
        }
    }

        // 记录选中的商品数量和总价
    var selectedItems = [];
    var totalPrice = 0;

    function checkSelect(index) 
    {
        var checkbox = document.getElementsByClassName('sp')[index];
        var productName = product[index];
        var productPrice = price[index];

        if (checkbox.checked) {
            // 如果复选框被勾选，则将商品信息添加到选中列表中
            selectedItems.push({ name: productName, price: productPrice });
            totalPrice += productPrice;
        } else {
            // 如果复选框取消勾选，则从选中列表中移除商品信息
            selectedItems = selectedItems.filter(item => item.name !== productName);
            totalPrice -= productPrice;
        }
    }

    function shoppingCart() 
    {
        var cartMessage = '';
        if (selectedItems.length === 0) {
            cartMessage = '购物车为空';
        } else {
            selectedItems.forEach(item => {
            cartMessage += item.name + ' - ¥' + item.price.toFixed(2) + '\n';
            });
        }
        alert(cartMessage);
    }

    function checkOut() 
    {
        var checkoutMessage = '';
        if (selectedItems.length === 0) {
            checkoutMessage = '购物车为空';
        } else {
            var totalQuantity = selectedItems.length;
            checkoutMessage = '您所选购的产品数量为' + totalQuantity + '个，';
            checkoutMessage += '产品总价：¥' + totalPrice.toFixed(2)  + '\n请去支付！';
        }
        alert(checkoutMessage);
    }
    
   </script>
  
</head>
    <body>
        <div class="body">
            <form name="myForm" method="post" action="">
                <div class="product">
                    <h4 name="h41">iPhone 6 32GB 金色 移动联通电信4G</h4><br>
                    <input type="checkbox" class="sp" name="sp0" value="2576" onclick="checkSelect(0);">¥ 2576.00
                </div>
                <div class="product">
                    <h4 name="h42">OPPO R11 全网通 黑色版</h4><br>
                    <input type="checkbox" class="sp" name="sp1" value="2999" onclick="checkSelect(1);">¥ 2999.00
                </div>
                <div class="product">
                    <h4 name="h43">Apple iPhone 6s Plus 32GB 金色 移动联通电信4G手机</h4><br>
                    <input type="checkbox" class="sp" name="sp2" value="2576" onclick="checkSelect(2);">¥ 3898.00
                </div>
                <div class="product">
                    <h4 name="h44"> 小米 红米手机4X 全网通版 2GB内存 16GB 香槟金</h4><br>
                    <input type="checkbox" class="sp" name="sp3" value="599" onclick="checkSelect(3);">¥ 699.00
                </div>
                <div class="product">
                    <h4 name="h45">小米 红米手机4A 全网通版 2GB内存 16GB 玫瑰金</h4><br>
                    <input type="checkbox" class="sp"name="sp4" value="699" onclick="checkSelect(4);">¥ 599.00
                </div>
                <div class="product">
                    <h4 name="h46">小米 红米4X 全网通版 2GB内存 16GB 樱花粉</h4><br>
                    <input type="checkbox" class="sp" name="sp5" value="699" onclick="checkSelect(5);"> ¥ 699.00
                </div>
                <div class="button">
                    <input class="myBtn" type="button" value="查看购物车" onclick="shoppingCart();">
                    <input class="myBtn" type="button" value="收银台结算" onclick="checkOut();">
                    <input class="myBtn" type="button" value="全部取消" onclick="clearAll();">
                </div>
            </form>
        </div>

        <script type="text/javascript">
          var price = new Array(2576.00, 2999.00, 3898.00, 699.00, 599.00, 699.00);
          var product = new Array("iPhone 6 32GB 金色 移动联通电信4G", "OPPO R11 全网通 黑色版", "Apple iPhone 6s Plus 32GB 金色 移动联通电信4G手机", "小米 红米手机4X 全网通版 2GB内存 16GB 香槟金", "小米 红米手机4A 全网通版 2GB内存 16GB 玫瑰金", "小米 红米4X 全网通版 2GB内存 16GB 樱花粉");
          // 将name=sp0的复选框设置为勾选状态，false则为未勾选状态
          myForm.sp0.checked = false; 
        </script>
    </body>
</html>

烦躁的黄色汉堡诶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web实验十一 JavaScript基础

Web实验十一 JavaScript基础一、实验目的：1、掌握JavaScript的操作符使用2、掌握JavaScript的函数定义3、掌握JavaScript的变量定义二、实验内容：1、完成以下效果的网页设计：初始化网页如下：当选择部分页面后，点击查看购物车，弹出警告框，显示所选商品名称及价格。网页展示效果如下：点击收银台结算，则计算出所选商品的总价，并以警告框的方式显示，效果如下：点击全部取消，则取消所有复选框。三、实验代码展示：<html lang="en"&g
复制链接

扫一扫