博主信息
 一纸荒凉* Armani
博文
54
粉丝
2
评论
3
访问量
21976
积分:0
P豆:138

【实战】基于ES6实现网页计算器案例(建议收藏)

2021年04月29日 14:21:25阅读数:201博客 /  一纸荒凉* Armani/ JavaScript

(1)创建项目

项目名称为calculator。

(2)创建文件

1) index.html:网页计算器主页面文件。

2) index.css:网页计算器主页面样式文件。

3) index.js:网页计算器类和功能逻辑文件。

HTML页面

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8"/>
  5. <title>calculator</title>
  6. <link rel="stylesheet" type="text/css" href="index.css">
  7. <script type="text/javascript" charset="utf-8" src="index.js"></script>
  8. </head>
  9. <body>
  10. <div class="calculator">
  11. <input class="output" value="0" id="iputNum" disabled="disabled"></input>
  12. <div class="numbers">
  13. <input type="button" value="7" onclick="numberClick(value)">
  14. <input type="button" value="8" onclick="numberClick(value)">
  15. <input type="button" value="9" onclick="numberClick(value)">
  16. <input type="button" value="4" onclick="numberClick(value)">
  17. <input type="button" value="5" onclick="numberClick(value)">
  18. <input type="button" value="6" onclick="numberClick(value)">
  19. <input type="button" value="1" onclick="numberClick(value)">
  20. <input type="button" value="2" onclick="numberClick(value)">
  21. <input type="button" value="3" onclick="numberClick(value)">
  22. <input type="button" value="0" onclick="numberClick(value)">
  23. <input type="button" value="AC" onclick="cleanClick(value)">
  24. <input type="button" value="=" onclick="equalClick()">
  25. </div>
  26. <div class="operators">
  27. <input type="button" value="*" onclick="operatorClick(value)">
  28. <input type="button" value="-" onclick="operatorClick(value)">
  29. <input type="button" value="+" onclick="operatorClick(value)">
  30. <input type="button" value="/" onclick="operatorClick('/')">
  31. </div>
  32. </div>
  33. </body>
  34. </html>

CSS样式

  1. .calculator {
  2. width: 405px;
  3. border: solid 1px;
  4. background: #ffefd5;
  5. margin: 50px;
  6. padding: 20px;
  7. }
  8. .output {
  9. width: 356px;
  10. padding: 20px;
  11. height: 50px;
  12. font-size: 20px;
  13. text-align: right;
  14. background: white;
  15. }
  16. .numbers {
  17. width: 300px;
  18. display: -webkit-inline-box;
  19. display: -ms-inline-flexbox;
  20. display: inline-flex;
  21. -ms-flex-wrap: wrap;
  22. flex-wrap: wrap;
  23. }
  24. input[type=button] {
  25. border: solid 1px white;
  26. background: none;
  27. width: 100px;
  28. height: 80px;
  29. background: grey;
  30. cursor: pointer;
  31. color: white;
  32. font-size: 30px;
  33. }
  34. .operators {
  35. display: -webkit-inline-box;
  36. display: -ms-inline-flexbox;
  37. display: inline-flex;
  38. width: 100px;
  39. -ms-flex-wrap: wrap;
  40. flex-wrap: wrap;
  41. position: relative;
  42. left: -3px;
  43. }

核心ES6的代码

  1. class calculator {
  2. constructor(value = null) {
  3. //分割算术数组
  4. this.number = value;
  5. this.result = 0;
  6. }
  7. compute() {
  8. this.result = Array.from(this.number);
  9. for (let index = 0; index < this.result.length; index++) {
  10. //计算乘除
  11. if (this.result[index] == "*" || this.result[index] == "/") {
  12. //若最后输入的字符为运算字符,默认在最后加上1
  13. if (this.result[index + 1] == "") {
  14. this.result[index + 1] = 1;
  15. }
  16. if (this.result[index] == "*") {
  17. //删除数组内已计算的数字,并添加计算后的数字
  18. this.result.splice(+index - 1, 3, +this.result[index - 1] * +this.result[index + 1]);
  19. } else if (this.result[index] == "/") {
  20. //删除数组内已计算的数字,并添加计算后的数字
  21. this.result.splice(+index - 1, 3, +this.result[index - 1] / +this.result[index + 1]);
  22. }
  23. index--;
  24. }
  25. //计算加减
  26. if (this.result[index] == "+" || this.result[index] == "-") {
  27. if (this.result[index] == "+") {
  28. //删除数组内已计算的数字,并添加计算后的数字
  29. this.result.splice(+index - 1, 3, +this.result[index - 1] + +this.result[index + 1]);
  30. } else if (this.result[index] == "-") {
  31. //删除数组内已计算的数字,并添加计算后的数字
  32. this.result.splice(+index - 1, 3, +this.result[index - 1] - +this.result[index + 1]);
  33. }
  34. index--;
  35. }
  36. }
  37. }
  38. }
  39. /* 使用prototype属性添加back()方法,返回计算结果*/
  40. /* 添加方法 */
  41. Object.assign(calculator.prototype, {
  42. back() {
  43. return this.result;
  44. }
  45. })
  46. /* 获得输入框的值 */
  47. const get = () => {
  48. return document.getElementById("iputNum").value;
  49. }
  50. /* 给输入框赋值 */
  51. const set = (value) => {
  52. document.getElementById("iputNum").value = value;
  53. }
  54. /* 输入数字 */
  55. function numberClick(value) {
  56. let val = get();
  57. //显示框为0时,输入0无效
  58. if (value == "0" && val == "0") {
  59. return;
  60. }
  61. if (val == "0") {
  62. //计算结果为0时,删除0
  63. set(value);
  64. } else {
  65. //在显示框显示对应字符
  66. set(val + value);
  67. }
  68. }
  69. /* 输入字符 */
  70. function operatorClick(value) {
  71. let val = get();
  72. //不可连续输入运算字符
  73. if (val[val.length - 1] == " ") {
  74. return;
  75. }
  76. //在显示框显示对应字符
  77. set(val + " " + value + " ");
  78. }
  79. /* 清空数据 */
  80. function cleanClick() {
  81. set("0");
  82. }
  83. /* 计算 */
  84. function equalClick() {
  85. if (get() == "") {
  86. return;
  87. } else {
  88. let cal = new calculator();
  89. cal.number = get().split(' ');
  90. cal.compute();
  91. set(Number.parseInt(cal.back()));
  92. }
  93. }

运行效果
(1)访问网页计算器页面,如图所示:

(2) 输入数字和符号,如图所示:

(3) 单击“=”,如图所示:

(4) 单击“AC”,如图所示:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论