实验项目 6 基于 JS 事件的计算器设计与实现 一、实验目的 . 掌握 JavaScript 函数的定义、调用和参数应用方法和技巧。 掌握 JavaScript 事件定义、监听的应用方法和技巧。 实验内容 实现页面中计算器效果。点击数量的加减案例，数量会加 1 或者减 1，并且 总价也会跟随变化。不用监听，用onclick方法

实现。页面布局样式自行设计。 二、实验步骤 1. 利用 HTML 和 CSS 实现计算器的页面布局样式。 2. 利用 JavaScript 实现点击事件的监听和处理，实现数量和总价的自动计算。 3. 测试代码功能，进行调试优化，确保计算器功能的正确性和稳定性。 三、参考代码 HTML 代码： ```html <div id="calculator"> <h2>计算器</h2> <div id="quantity"> <button onclick="decrease()">-</button> <span id="num">1</span> <button onclick="increase()">+</button> </div> <div id="price">总价：¥<span id="total">10</span></div> </div> ``` JavaScript 代码： ```javascript var price = 10; // 商品单价 var num = 1; // 商品数量 var total = document.getElementById("total"); // 总价标签 var numLabel = document.getElementById("num"); // 数量标签 function decrease() { if (num > 1) { num--; numLabel.innerHTML = num; total.innerHTML = price * num; } } function increase() { num++; numLabel.innerHTML = num; total.innerHTML = price * num; } ``` 四、实验提示 1. 在 JavaScript 中，可以利用 document.getElementById() 方法获取页面中的元素，并对其进行操作和设置。 2. onclick 事件可以在 HTML 标签中直接定义，也可以在 JavaScript 中动态添加。