首页用jq写一个网页进行数值计算，要求有一个输入框，输入框输入数字按回车添加到下方列表，并在旁边显示列表中所有数值相加

用jq写一个网页进行数值计算，要求有一个输入框，输入框输入数字按回车添加到下方列表，并在旁边显示列表中所有数值相加

时间: 2024-12-11 11:38:38 浏览: 16

你可以使用JavaScript库jQuery来实现这个简单的网页功能。首先，你需要在HTML中设置基本结构，包括一个输入框、一个按钮以及一个用于显示结果的区域。然后，在JavaScript部分，利用jQuery的事件处理和数组操作来完成计算。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数值计算</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <input type="number" id="input-number" placeholder="请输入数字"> <button onclick="addNumber()">加入并计算</button> <ul id="result-list"></ul> <p id="total-result">总计:</p> <script> function addNumber() { var inputVal = $('#input-number').val(); // 获取输入值 if (inputVal !== '') { // 检查输入是否为空 var listItems = $('#result-list li'); // 获取列表元素 var sum = listItems.length > 0 ? parseInt(listItems.text().replace(/\D/g, '')) : 0; // 如果已有元素，累加现有总和；否则初始化为0 // 创建新项并添加到列表 var newItem = $('<li>' + inputVal + '</li>'); newItem.data('sum', sum + parseInt(inputVal)); // 给新项数据属性存储累计和 $('#result-list').append(newItem); // 更新总计 $('#total-result').text('总计: ' + newItem.data('sum')); // 清空输入框 $('#input-number').val(''); } } </script> </body> </html> ``` 在这个例子中，当用户点击“加入并计算”按钮时，`addNumber`函数会被触发。它获取输入框的内容，检查是否为空，然后将输入数值追加到列表中。同时，如果列表已经有元素，会把新的数值加到之前所有数值之和上。列表项还存储了累计和以便于计算。每输入一次都会更新总计。

阅读全文