js實現簡單的計算器功能

來源：懂視網責編：小采時間：2020-11-27 20:26:09

js實現簡單的計算器功能

js實現簡單的計算器功能:話不多說，請看示例代碼：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>簡單的計算器</title> <style> * { margin: 0 auto; padd

推薦度：

點擊下載本文 文檔為doc格式

導讀js實現簡單的計算器功能:話不多說，請看示例代碼：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>簡單的計算器</title> <style> * { margin: 0 auto; padd

話不多說，請看示例代碼：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>簡單的計算器</title>
 <style>
 * {
 margin: 0 auto;
 padding: 0px;
 }
 html, body {
 width: 100%;
 height: 100%;
 }
 a {
 text-decoration: none;
 }
 .wrap {
 width: 30%;
 min-width: 250px;
 margin: 0 auto;
 border: 1px solid #b1b1b1;
 }
 .wrap .screen {
 width: 100%;
 height: 150px;
 background-color: #8d8d8d;
 }
 .wrap .screen .string {
 height: 100%;
 user-select: none;
 font-size: 30px;
 word-break: break-all;
 }
 .wrap .button-group {
 width: 100%;
 margin-top: 5px;
 }
 .wrap .button-group td {
 width: 25%;
 }
 .wrap .button-group td a {
 display: inline-block;
 height: 80px;
 text-align: center;
 background-color: #d5d5d5;
 color: #000;
 line-height: 80px;
 font-size: 25px;
 width: 100%;
 user-select: none;
 }
 .wrap .button-group td a:hover {
 background-color: #9d9d9d;
 color: #002a80;
 }
 .wrap .button-group td a.active {
 background-color: red;
 }
 </style>
</head>
<body>
<div>
 <div>
 <p></p>
 </div>
 <div>
 <table cellspacing="5" cellpadding="10" border="0" width="100%">
 <tr>
 <td><a href="javascript:void(0);">7</a></td>
 <td><a href="javascript:void(0);">8</a></td>
 <td><a href="javascript:void(0);">9</a></td>
 <td><a href="javascript:void(0);">*</a></td>
 </tr>
 <tr>
 <td><a href="javascript:void(0);">4</a></td>
 <td><a href="javascript:void(0);">5</a></td>
 <td><a href="javascript:void(0);">6</a></td>
 <td><a href="javascript:void(0);">/</a></td>
 </tr>
 <tr>
 <td><a href="javascript:void(0);">1</a></td>
 <td><a href="javascript:void(0);">2</a></td>
 <td><a href="javascript:void(0);">3</a></td>
 <td><a href="javascript:void(0);">+</a></td>
 </tr>
 <tr>
 <td><a href="javascript:void(0);">DEL</a></td>
 <td><a href="javascript:void(0);">0</a></td>
 <td><a href="javascript:void(0);">=</a></td>
 <td><a href="javascript:void(0);">-</a></td>
 </tr>
 </table>
 </div>
</div>
<script>
 var numString = document.getElementsByClassName("string")[0];
 var buttonGroup = document.getElementsByTagName("a");
 var screen = document.getElementsByClassName("string")[0];
 var num1 = 0;
 var num2 = 0;
 var count = 0;
 var f;
 var flag = true;
 /*控制輸入的是數字*/
 var flag2 = true;
 /*控制是否連續點擊符號*/
 screen.onclick = function () {
 numString.innerHTML = "";
 };
 for (var i = 0; i < buttonGroup.length; i++) {
 buttonGroup[i].onclick = function () {
 switch (this.innerHTML) {
 case "0":
 case "1":
 case "2":
 case "3":
 case "4":
 case "5":
 case "6":
 case "7":
 case "8":
 case "9":
 if (!flag) {
 numString.innerHTML = "";
 flag2 = true;
 }
 flag = true;
 numString.innerHTML += this.innerHTML;
 break;
 case "DEL":
 numString.innerHTML = numString.innerHTML.substr(0, numString.innerHTML.length - 1);
 break;
 case "+":
 case "-":
 case "*":
 case "/":
 f = this.innerHTML;
 count++;
 if (flag2) {
 flag = false;
 /*控制輸入的是符號*/
 if (count == 1) {
 num1 = numString.innerHTML;
 } else {
 flag2 = false;
 num2 = numString.innerHTML;
 numString.innerHTML = eval(num1 + f + num2);
 num1 = numString.innerHTML;
 }
 }
 break;
 case "=":
 num2 = numString.innerHTML;
 numString.innerHTML = eval(num1 + f + num2);
 count = 0;
 flag = !flag;
 break;
 }
 }
 }
</script>
</body>
</html>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

js實現簡單的計算器功能

js實現簡單的計算器功能:話不多說，請看示例代碼：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>簡單的計算器</title> <style> * { margin: 0 auto; padd

推薦度：

點擊下載本文 文檔為doc格式

標簽：功能計算器實現

熱門焦點

js實現簡單的計算器功能

js實現簡單的計算器功能

js實現簡單的計算器功能

最新推薦

猜你喜歡

熱門推薦