用onclick方法基于 JS 事件的计算器设计与实现 一、实验目的 . 掌握 JavaScript 函数的定义、调用和参数应用方法和技巧。 掌握 JavaScript 事件定义、监听的应用方法和技巧。 实验内容 实现页面中计算器效果。点击数量的加减案例,数量会加 1 或者减 1,并且 总价也会跟随变化。
时间: 2024-02-09 18:09:45 浏览: 31
好的,这是一个关于用 onclick 方法基于 JS 事件的计算器设计与实现的问题。以下是实现的代码示例:
HTML 代码:
```html
<div>
<h3>数量:</h3>
<button onclick="decrement()">-</button>
<span id="count">0</span>
<button onclick="increment()">+</button>
</div>
<div>
<h3>总价:</h3>
<span id="total">0</span>
</div>
```
JS 代码:
```javascript
let count = 0;
let price = 10;
function increment() {
count++;
updateCount();
}
function decrement() {
if (count > 0) {
count--;
updateCount();
}
}
function updateCount() {
document.getElementById("count").innerHTML = count;
document.getElementById("total").innerHTML = count * price;
}
```
这个计算器有两个部分,一个是数量的加减,另一个是总价的计算。当点击加号按钮时,数量会加 1,并且总价也会跟随变化;当点击减号按钮时,数量会减 1,但是数量不能小于 0,如果数量已经是 0,则不会再减,同时总价也会跟随变化。以上代码可以在 HTML 文件中嵌入 script 标签中使用,也可以单独保存为 js 文件引入到 HTML 文件中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)