js实现计算器和计时器功能

JavaScript是一门非常常用的编程语言，它可以用来实现各种各样的功能，包括计算器和计时器。

实现计算器功能

实现计算器功能的核心是使用JavaScript的算术运算和DOM操作。以下是实现JavaScript计算器的基本步骤：

1. 首先，在HTML中创建一个包含计算器各个按钮和显示数字的DIV，给它们命名ID，以便在JavaScript代码中方便地访问。

```html

C
+
-
*
/
=
.
0
1
2
3
4
5
6
7
8
9

```

1. 在JavaScript中，获取以上HTML中的DIV元素和按钮元素，并将它们存储为变量。

javascript
var calculator = document.getElementById("calculator");
var result = document.getElementById("result");
var clearButton = document.getElementById("clear");
var addButton = document.getElementById("add");
var subtractButton = document.getElementById("subtract");
var multiplyButton = document.getElementById("multiply");
var divideButton = document.getElementById("divide");
var equalsButton = document.getElementById("equals");
var decimalButton = document.getElementById("decimal");
var zeroButton = document.getElementById("zero");
var oneButton = document.getElementById("one");
var twoButton = document.getElementById("two");
var threeButton = document.getElementById("three");
var fourButton = document.getElementById("four");
var fiveButton = document.getElementById("five");
var sixButton = document.getElementById("six");
var sevenButton = document.getElementById("seven");
var eightButton = document.getElementById("eight");
var nineButton = document.getElementById("nine");

1. 创建变量（如currentValue、operator、previousValue），用于存储当前值、运算符以及上一个值的状态（用于连续运算）。

javascript
var currentValue = "0";
var operator = null;
var previousValue = null;

1. 编写一个函数（如reset()），用于将当前值重置为初始状态。

javascript
function reset() {
currentValue = "0";
operator = null;
previousValue = null;
}

1. 为每个按钮添加一个事件侦听器，以便在用户单击按钮时执行相应的操作。在事件侦听器中，更新当前值，并根据运算符的不同执行相应的运算操作。

```javascript
clearButton.addEventListener("click", function() {
reset();
updateDisplay();
});

addButton.addEventListener("click", function() {
performOperation("+");
});

subtractButton.addEventListener("click", function() {
performOperation("-");
});

multiplyButton.addEventListener("click", function() {
performOperation("*");
});

divideButton.addEventListener("click", function() {
performOperation("/");
});

equalsButton.addEventListener("click", function() {
performOperation("=");
});

decimalButton.addEventListener("click", function() {
addDecimal();
});

zeroButton.addEventListener("click", function() {
addDigit(0);
});

oneButton.addEventListener("click", function() {
addDigit(1);
});

twoButton.addEventListener("click", function() {
addDigit(2);
});

// 同理，为剩下的按钮添加事件侦听器
```

1. 编写一个用于更新显示的函数（如updateDisplay()），用于在用户输入数字或运算符时更新显示值。

javascript
function updateDisplay() {
result.innerHTML = currentValue;
}

1. 将上面的步骤中编写的函数和事件侦听器组合在一起，即可实现一个简单的JavaScript计算器。

javascript
// 完整代码

实现计时器功能

实现计时器功能的核心是使用JavaScript的定时器。以下是实现JavaScript计时器的基本步骤：

1. 在HTML中创建计时器的DIV，在JavaScript中获取它，并将它存储为变量。

```html

00:00:00

```

javascript
var timer = document.getElementById("timer");

1. 创建变量（如interval、startTime、elapsedTime），用于存储计时器状态。

javascript
var interval = null;
var startTime = null;
var elapsedTime = 0;

1. 编写一个函数（如startTimer()），用于开始计时器并显示计时器的值。

```javascript
function startTimer() {
if (!startTime) {
startTime = new Date().getTime();
interval = setInterval(updateTimer, 10);
}
}

function updateTimer() {
elapsedTime = new Date().getTime() - startTime;
var minutes = Math.floor(elapsedTime / 60000);
var seconds = Math.floor((elapsedTime - (minutes * 60000)) / 1000);
var milliseconds = elapsedTime - (minutes * 60000) - (seconds * 1000);
timer.innerHTML = formatTime(minutes) + ":" + formatTime(seconds) + ":" + formatTime(Math.floor(milliseconds / 10));
}

function formatTime(value) {
var valueString = String(value);
if (valueString.length < 2) {
valueString = "0" + valueString;
}
return valueString;
}
```

1. 编写一个函数（如stopTimer()），用于停止计时器。

javascript
function stopTimer() {
clearInterval(interval);
interval = null;
startTime = null;
elapsedTime = 0;
timer.innerHTML = "00:00:00";
}

1. 为开始按钮和停止按钮添加事件侦听器，以便在用户单击按钮时开始或停止计时器。

javascript
var startButton = document.getElementById("start");
var stopButton = document.getElementById("stop");
startButton.addEventListener("click", startTimer);
stopButton.addEventListener("click", stopTimer);

1. 将上面的步骤中编写的函数和事件侦听器组合在一起，即可实现一个简单的JavaScript计时器。

javascript
// 完整代码