用 JavaScript 实现简易点单页面

最新推荐文章于 2024-05-25 11:43:58 发布

我有两颗糖

最新推荐文章于 2024-05-25 11:43:58 发布

阅读量1k

点赞数 1

分类专栏： JavaScript 前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_41140138/article/details/113915917

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

JavaScript

9 篇文章 2 订阅

订阅专栏

1. 要点

搜先用 HTML制作预览效果页面：

<body>
    <form>
        <strong>Fruits</strong><br>
        <input type="checkbox" name="apple" value="8">
        <label>apple (8 RMB)</label><br>
        <input type="checkbox" name="banana" value="3">
        <label>banana (3 RMB)</label><br>
        <input type="checkbox" name="strawbery" value="12">
        <label>strawbery (12 RMB)</label><br>
        <input type="checkbox" name="watermelon" value="2">
        <label>watermelon (2 RMB)</label><br>
        <input type="checkbox" name="peach" value="6">
        <label>peach (6 RMB)</label><br>
    </form>
</body>

效果如下：

在这里插入图片描述

2. 创建水果数组

使用 JavaScript 创建水果数组，按价格排序：

关键：

使用数组存储水果，每种水果为包含 name 和 price 属性的对象
使用 arr.sort(func) 排序

let fruits = [
    {name: 'apple', price: 8},
    {name: 'banana', price: 3},
    {name: 'strawbery', price: 12},
    {name: 'watermelon', price: 2},
    {name: 'peach', price: 6},
];

// 按价格升序排列
fruits.sort(function(a, b) {
    if (a.price > b.prive) return 1;
    if (a.price < b.price) return -1;
    return 0;
});

3. 使用 JavaScript 创建表单

关键点：

使用 document.createElement('xxx') 创建元素
使用 elem.append() 插入节点
使用 elem.innerHTML += "" 增加 HTML 代码

document.body.innerHTML += '<p>The following fruits are on sale:</p>'
let form = document.createElement('form');
document.body.append(form);
for (let fruit of fruits) {
    let input = document.createElement('input');
    input.type = 'checkbox';
    input.name = fruit.name;
    input.value = fruit.price;
    form.append(input);
    form.innerHTML += fruit.name + ' (' + fruit.price + 'RMB )<br>';
}

在这里插入图片描述

4. 计算总金额

关键：

通过 document.querySelector() 选择 checked 的水果
增加一个结算的 button，使用按钮的 onclick 事件触发结算

let p = document.createElement('p');
let btn = document.createElement('button');
btn.innerHTML = 'OK';
document.body.append(btn);
document.body.append(p);
btn.onclick = function() {
    let selected = document.querySelectorAll('input:checked');
    let sum = 0;
    for (let elem of selected) {
        sum += Number(elem.value);
    }
    p.innerHTML = 'total = ' + sum;
}

当选择好需要购买的水果后，点击 OK 即可显示待付金额：
在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>

<script>
    let fruits = [
        {name: 'apple', price: 8},
        {name: 'banana', price: 3},
        {name: 'strawbery', price: 12},
        {name: 'watermelon', price: 2},
        {name: 'peach', price: 6},
    ];
    // 按价格升序排列
    fruits.sort(function(a, b) {
        if (a.price > b.prive) return 1;
        if (a.price < b.price) return -1;
        return 0;
    });

    document.body.innerHTML += '<p>The following fruits are on sale:</p>'
    let form = document.createElement('form');
    document.body.append(form);
    for (let fruit of fruits) {
        let input = document.createElement('input');
        input.type = 'checkbox';
        input.name = fruit.name;
        input.value = fruit.price;
        form.append(input);
        form.innerHTML += fruit.name + ' (' + fruit.price + 'RMB )<br>';
    }

    let p = document.createElement('p');
    let btn = document.createElement('button');
    btn.innerHTML = 'OK';
    document.body.append(btn);
    document.body.append(p);
    btn.onclick = function() {
        let selected = document.querySelectorAll('input:checked');
        let sum = 0;
        for (let elem of selected) {
            sum += Number(elem.value);
        }
        p.innerHTML = 'total = ' + sum;
    }
</script>

</html>

通过以上学习，可以发现 DOM 的重要性，通过 DOM 我们可以很方便地控制 HTML，包括增加 / 删除 / 访问和修改元素。

我有两颗糖

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
用 JavaScript 实现简易点单页面

1. 要点搜先用 HTML制作预览效果页面：<body> <form> <strong>Fruits</strong><br> <input type="checkbox" name="apple" value="8"> <label>apple (8 RMB)</label><br> <input type="chec
复制链接

扫一扫

专栏目录