探索計算之美：HTML CSS 計算器案例

本次案例是通過HTML和CSS，我們可以為計算器賦予獨特的外觀和功能；

在這個計算器中，你將會發現：

簡潔清晰的界面設計，使用戶能夠輕松輸入和查看計算結果。
利用HTML構建的結構，確保頁面具有良好的可訪問性和可維護性。
使用CSS進行精美的樣式設計，為計算器增添視覺上的吸引力。

組件：

?加減乘除，階乘，（，），三角函數（tan、cos、sin），±，√×。

依賴包：angular.js? 這個去官網下載

官網：AngularJS — Superheroic JavaScript MVW Framework

中文官網：AngularJS下載

下載后解壓選取下圖拖動到代碼文件目錄即可

樣式：

主要代碼

HTML+JS：

<html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>計算器</title><script src="/angular.js"></script><link rel="stylesheet" href="/calc.css">
</head><body><body ng-app="zt"><div class="ys"><div ng-controller="zt-jsq"><div class="ttx"><div class="tt">計算器</div></div><div class="result"><input type="text" id="result" ng-model="result" readonly /></div><div class="keyboard-row"><button class="keyboard-button" ng-click="addToExpression('(')">(</button><button class="keyboard-button" ng-click="addToExpression(')')">)</button><button class="keyboard-button" ng-click="factorial()">n!</button><button class="keyboard-button" ng-click="clear()">C</button><button class="keyboard-button" ng-click="backspace()">←</button></div><div class="keyboard-row"><button class="keyboard-button" ng-click="appendNumber('7')">7</button><button class="keyboard-button" ng-click="appendNumber('8')">8</button><button class="keyboard-button" ng-click="appendNumber('9')">9</button><button class="keyboard-button" ng-click="appendOperator('+')">+</button><button class="keyboard-button" ng-click="appendOperator('*')">*</button></div><div class="keyboard-row"><button class="keyboard-button" ng-click="appendNumber('4')">4</button><button class="keyboard-button" ng-click="appendNumber('5')">5</button><button class="keyboard-button" ng-click="appendNumber('6')">6</button><button class="keyboard-button" ng-click="appendOperator('-')">-</button><button class="keyboard-button" ng-click="appendOperator('/')">/</button></div><div class="keyboard-row"><button class="keyboard-button" ng-click="appendNumber('1')">1</button><button class="keyboard-button" ng-click="appendNumber('2')">2</button><button class="keyboard-button" ng-click="appendNumber('3')">3</button><button class="keyboard-button" ng-click="appendNumber('0')">0</button><button class="keyboard-button1" ng-click="calculate()">=</button></div><div class="keyboard-row"><button class="keyboard-button" ng-click="zf()">±</button><button class="keyboard-button" ng-click="fz()">1/x</button><button class="keyboard-button" ng-click="pf()">x2</button><button class="keyboard-button" ng-click="gh()">√x</button></div><div class="keyboard-row"><button class="keyboard-button" ng-click="sin()">sin</button><button class="keyboard-button" ng-click="cos()">cos</button><button class="keyboard-button" ng-click="tan()">tan</button><button class="keyboard-button" ng-click="bfh()">%</button></div></div></div></body></html>
<script>// 創建模塊var app = angular.module('zt', []);// 設置 zt-jsq 控制器app.controller('zt-jsq', function ($scope) {// 計算器顯示屏 初始 數值為0$scope.result = '0';// 計算器顯示屏上的計算公式$scope.expression = '';// 輸入數值在 顯示屏上$scope.appendNumber = function (number) {// 判定 公式是否為 空if ($scope.expression === '') {// 為空 輸入數值$scope.expression = number;$scope.result = number;} else {// 非空 公式內容以字符串形式 拼接$scope.expression += number;// 計算器顯示屏 顯示 當前公式$scope.result = $scope.expression;}};// 添加 運算符$scope.appendOperator = function (operator) {// 當前 計算公式中最后一位字符var end = $scope.expression.slice(-1);// 加減乘除 符號var str = '+-/*';// 判定 計算公式 是否為空 并且 計算公式中最后一位字符 是否是 加減乘除符號if ($scope.expression === '' || str.includes(end)) {// 如果是 忽略連續的運算符return;}// 判定 計算公式是否 非空if ($scope.expression !== '') {// 非空 并 最后一位不是 加減乘除 ，添加運算符$scope.expression += operator;// 計算器顯示屏 顯示 當前公式$scope.result = $scope.expression;}};// 清除所有輸入$scope.clear = function () {$scope.result = '0';$scope.expression = '';};// 執行 運算公式$scope.zf = function () {// 將表達式轉換為數字var number = parseFloat($scope.expression);// 檢查數字是否是NaN，如果是，則將表達式設置為負號if (isNaN(number)) {$scope.expression = "-";} else {// 對數字進行取反操作$scope.expression = -number;}// 更新結果為取反后的表達式$scope.result = $scope.expression;};$scope.fz = function () {if ($scope.expression.startsWith('-')) {$scope.expression = $scope.expression.slice(1);}$scope.expression = "1/(" + $scope.expression + ")";$scope.result = $scope.expression;};$scope.pf = function () {$scope.expression = "Math.pow(" + $scope.expression + ", 2)";$scope.result = $scope.expression;};$scope.gh = function () {$scope.expression = "Math.sqrt(" + $scope.expression + ")";$scope.result = $scope.expression;};$scope.bfh = function () {$scope.expression += "*0.01";$scope.result = $scope.expression;};$scope.sin = function () {$scope.expression = "Math.sin(" + $scope.expression + " * Math.PI / 180)"; // Assuming the input is in degrees$scope.result = $scope.expression;};$scope.cos = function () {$scope.expression = "Math.cos(" + $scope.expression + " * Math.PI / 180)"; // Assuming the input is in degrees$scope.result = $scope.expression;};$scope.tan = function () {$scope.expression = "Math.tan(" + $scope.expression + " * Math.PI / 180)"; // Assuming the input is in degrees$scope.result = $scope.expression;};$scope.log = function () {$scope.expression = "Math.log(" + $scope.expression + ")";$scope.result = $scope.expression;};//階乘$scope.factorial = function () {var number = parseFloat($scope.expression);if (!isNaN(number) && number >= 0 && Math.floor(number) === number) { // 檢查輸入是否為非負整數var result = 1;for (var i = 2; i <= number; i++) {result *= i;}$scope.expression = result.toString();$scope.result = $scope.expression;} else {$scope.result = "Error";}};//（）號$scope.addToExpression = function (value) {if ($scope.expression === '') {$scope.expression = value;$scope.result = value;} else {$scope.expression += value;$scope.result = $scope.expression;}};// 刪除 最后一個字符 $scope.backspace = function () {// 判定 計算公式 當前長度是否 大于 0if ($scope.expression.length > 0) {// 大于 0 ，刪除最后一位字符$scope.expression = $scope.expression.slice(0, -1);// 計算器顯示屏 顯示 當前公式 $scope.result = $scope.expression;} else if ($scope.result.length > 0) {// 計算器顯示屏顯示長度 大于0 ，當計算公式不大于0// 計算公式以運算$scope.result = '0';}};// 執行 運算公式$scope.calculate = function () {try {// 判定 計算公式 長度 是否大于 0if ($scope.expression.length > 0) {// eval -->  將 字符串 作為計算公式 進行計算// 大于0 ， 執行 計算公式var calculatedResult = eval($scope.expression);// 將 計算結果 轉換為 字符串$scope.result = calculatedResult.toString();// 清空 計算公式 $scope.expression = '';} else if ($scope.result.length > 0) {// 計算器顯示屏顯示長度 大于0 ，當計算公式不大于0// 不做操作return;}}catch (e) { // 如果表達式有誤，重置結果和表達式 scope.expression = '';$scope.result = '0';$scope.expression = '';window.alert('表達式錯誤！');}};});
</script>
</body></html></html>

CSS樣式：

.keyboard-button {width: 60px;  /* 調整為更大的尺寸 */height: 50px;font-size: 15px;background-color: #ffffff;border: 2px solid #ccc;cursor: pointer;border-radius: 5px;margin: 1px;  /* 增加按鈕間隔 */justify-content: center;align-items: center;margin-top: 3px;box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);  /* 添加輕微陰影 */
}.keyboard-button:hover {background-color: #e0e0e0;
}.keyboard-button:active {background-color: #d0d0d0;
}.keyboard-button1 {width: 60px;  /* 保持與其他按鈕一致 */height: 50px;font-size: 15px;background-color: #1d6978;border: 1px solid #ccc;cursor: pointer;color: #fff;margin-left: 1px;border-radius: 5px;
}.keyboard-button1:hover {background-color: #337785;
}.keyboard-button1:active {background-color:#1d6978;
}.result {width: auto;height: 40px;/* text-align: ; */border: 1px solid #ccc;border-radius: 5px;#result {width: 100%;height: 100%;border-radius: 5px;color: #000000;font-size: 25px;}
}
.ys {background-color: rgb(250, 248, 255);width: 100%;  max-width: 350px;  height: auto;display: flex;margin: 20px auto;  /* 增加上下邊距以便更好的居中 */justify-content: center;border-radius: 10px;box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);  /* 給整體容器添加陰影 */
}
.ttx{width: 38%;background-color:  #54cbe3;border-radius: 5px;justify-content: center;
}
.tt{width: 100%;font-size: 25px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;color: #000000;text-align: center;display: auto;margin-bottom: 2px;
}