经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
用微信小程序实现计算器功能
来源:jb51  时间:2021/7/19 11:49:39  对本文有异议

本文是用微信小程序写的一个简单的计算器,有兴趣的小伙伴可以了解一下。

页面部分

  1. <view class='box'>
  2. <view class='txt'>{{screenNum}}</view>
  3. <view capture-bind:touchstart="compute">
  4. <view>
  5. <button data-val='clear' class='boxtn btn1'>AC</button>
  6. <button data-val='back' class='boxtn btn1'></button>
  7. <button data-val='#' class='boxtn btn1'>#</button>
  8. <button data-val='/' class='boxtn btn'>/</button>
  9. </view>
  10. <view>
  11. <button data-val='7' class='boxtn'>7</button>
  12. <button data-val='8' class='boxtn'>8</button>
  13. <button data-val='9' class='boxtn'>9</button>
  14. <button data-val='*' class='boxtn btn'>*</button>
  15. </view>
  16. <view>
  17. <button data-val='4' class='boxtn'>4</button>
  18. <button data-val='5' class='boxtn'>5</button>
  19. <button data-val='6' class='boxtn'>6</button>
  20. <button data-val='-' class='boxtn btn'>-</button>
  21. </view>
  22. <view>
  23. <button data-val='1' class='boxtn'>1</button>
  24. <button data-val='2' class='boxtn'>2</button>
  25. <button data-val='3' class='boxtn'>3</button>
  26. <button data-val='+' class='boxtn btn'>+</button>
  27. </view>
  28. <view>
  29. <button data-val='1' class='boxtn btn2'>0</button>
  30. <button data-val='.' class='boxtn'>.</button>
  31. <button data-val='=' class='boxtn btn'>=</button>
  32. </view>
  33. </view>
  34. </view>

样式部分

  1. .box{
  2. width:100%;
  3. height: 700px;
  4. background: #000;
  5. }
  6. .txt{
  7. color: #fff;
  8. width: 100%;
  9. height:120px;
  10. font-size: 50px;
  11. text-align: right;
  12. }
  13. .boxtn{
  14. width: 90px;
  15. height:90px;
  16. display:block;
  17. float:left;
  18. border-radius: 50%;
  19. line-height: 90px;
  20. text-align: center;
  21. margin-left: 3px;
  22. margin-top: 5px;
  23. color:#fff;
  24. background: #333333;
  25. font-weight: bold;
  26. font-size: 25px;
  27. }
  28. .btn{
  29. background: #f09a37;
  30. }
  31. .btn1{
  32. background: #a5a5a5;
  33. color:#000;
  34. }
  35. .btn2{
  36. width: 180px;
  37. border-radius: 40px;
  38. }

js部分

  1. //index.js
  2. //获取应用实例
  3. const app = getApp()
  4.  
  5. Page({
  6.  
  7. /**
  8. * 页面的初始数据
  9. */
  10. data: {
  11. screenNum: 0,//屏幕显示的数
  12. currentNum: '',//当前输入的数
  13. storage: 0,//存储的数
  14. operator: '',//运算符
  15. off: false,
  16. },
  17.  
  18. compute: function (e) {
  19. var btn_num = e.target.dataset.val;
  20. var obj = this;
  21. if (!isNaN(btn_num)) {
  22. if (obj.data.off == true) {
  23. obj.data.currentNum = ''
  24. obj.data.off = false;
  25. }
  26. obj.data.currentNum += btn_num
  27. obj.data.currentNum = Number(obj.data.currentNum);
  28. obj.data.currentNum = obj.data.currentNum.toString();
  29. } else {
  30. switch (btn_num) {
  31. case '+':
  32. case '-':
  33. case '*':
  34. case '/':
  35. case '=':
  36. // 将当前屏幕上的数字和本次的操作符存储到变量
  37.  
  38. if (obj.data.storage == 0) {
  39. obj.data.storage = obj.data.currentNum;
  40. obj.data.operator = btn_num;
  41. } else {
  42. if (obj.data.off != true) {
  43. if (obj.data.operator == '+') {
  44. obj.data.currentNum = Number(obj.data.storage) + Number(obj.data.currentNum)
  45. } else if (obj.data.operator == '-') {
  46. obj.data.currentNum = Number(obj.data.storage) - Number(obj.data.currentNum)
  47. } else if (obj.data.operator == '*') {
  48. obj.data.currentNum = Number(obj.data.storage) * Number(obj.data.currentNum)
  49. } else if (obj.data.operator == '/') {
  50. obj.data.currentNum = Number(obj.data.storage) / Number(obj.data.currentNum)
  51. }
  52. }
  53. obj.data.storage = obj.data.currentNum;
  54. obj.data.operator = btn_num;
  55. }
  56.  
  57. obj.data.off = true;
  58. break;
  59. case 'clear':
  60. obj.data.storage = 0;
  61. obj.data.currentNum = '0';
  62. obj.data.operator = '';
  63. break;
  64. case 'back':
  65. obj.data.currentNum = obj.data.currentNum.slice(0, -1);
  66. if (obj.data.currentNum == '') {
  67. obj.data.currentNum = '0';
  68. }
  69. break;
  70. case '.':
  71. if (obj.data.currentNum.indexOf('.') == -1) { // 判断是否已包含“.”
  72. obj.data.currentNum += btn_num
  73. }
  74. break;
  75. }
  76. }
  77. obj.setData({
  78. screenNum: obj.data.currentNum
  79. })
  80. },
  81.  
  82. })

效果图如下

微信开发者工具下载地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号