折翼天使资源社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 268|回复: 0

[文档教程] 微信小程序实现一个计算器,仿iOS原生计算器

[复制链接]

8249

主题

8655

帖子

152

积分

网站编辑

Rank: 8Rank: 8

天使之心
0
注册时间
2013-8-22
发表于 2018-11-23 11:22:32 | 显示全部楼层 |阅读模式
下面是用微信小程序写的一个简单的计算器,有兴趣的小伙伴可以了解一下。

页面部分
  1. {{screenNum}}
  2. AC
  3. #
  4. /
  5. 7
  6. 8
  7. 9
  8. *
  9. 4
  10. 5
  11. 6
  12. -
  13. 1
  14. 2
  15. 3
  16. +
  17. 0
  18. .
  19. =
复制代码
复制代码
样式部分
  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. Page({
  5. /**
  6. * 页面的初始数据
  7. */
  8. data: {
  9. screenNum: 0,//屏幕显示的数
  10. currentNum: '',//当前输入的数
  11. storage: 0,//存储的数
  12. operator: '',//运算符
  13. off: false,
  14. },
  15. compute: function (e) {
  16. var btn_num = e.target.dataset.val;
  17. var obj = this;
  18. if (!isNaN(btn_num)) {
  19. if (obj.data.off == true) {
  20. obj.data.currentNum = ''
  21. obj.data.off = false;
  22. }
  23. obj.data.currentNum += btn_num
  24. obj.data.currentNum = Number(obj.data.currentNum);
  25. obj.data.currentNum = obj.data.currentNum.toString();
  26. } else {
  27. switch (btn_num) {
  28. case '+':
  29. case '-':
  30. case '*':
  31. case '/':
  32. case '=':
  33. // 将当前屏幕上的数字和本次的操作符存储到变量
  34. if (obj.data.storage == 0) {
  35. obj.data.storage = obj.data.currentNum;
  36. obj.data.operator = btn_num;
  37. } else {
  38. if (obj.data.off != true) {
  39. if (obj.data.operator == '+') {
  40. obj.data.currentNum = Number(obj.data.storage) + Number(obj.data.currentNum)
  41. } else if (obj.data.operator == '-') {
  42. obj.data.currentNum = Number(obj.data.storage) - Number(obj.data.currentNum)
  43. } else 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. }
  48. }
  49. obj.data.storage = obj.data.currentNum;
  50. obj.data.operator = btn_num;
  51. }
  52. obj.data.off = true;
  53. break;
  54. case 'clear':
  55. obj.data.storage = 0;
  56. obj.data.currentNum = '0';
  57. obj.data.operator = '';
  58. break;
  59. case 'back':
  60. obj.data.currentNum = obj.data.currentNum.slice(0, -1);
  61. if (obj.data.currentNum == '') {
  62. obj.data.currentNum = '0';
  63. }
  64. break;
  65. case '.':
  66. if (obj.data.currentNum.indexOf('.') == -1) { // 判断是否已包含“.”
  67. obj.data.currentNum += btn_num
  68. }
  69. break;
  70. }
  71. }
  72. obj.setData({
  73. screenNum: obj.data.currentNum
  74. })
  75. },
  76. })
复制代码
复制代码
推荐课程:微信小程序官方课程