This article is a simple calculator written using the WeChat applet. Interested friends can take a look. Page Sections <view class='box'> <view class='txt'>{{screenNum}}</view> <view capture-bind:touchstart="compute"> <view> <button data-val='clear' class='boxtn btn1'>AC</button> <button data-val='back' class='boxtn btn1'>←</button> <button data-val='#' class='boxtn btn1'>#</button> <button data-val='/' class='boxtn btn'>/</button> </view> <view> <button data-val='7' class='boxtn'>7</button> <button data-val='8' class='boxtn'>8</button> <button data-val='9' class='boxtn'>9</button> <button data-val='*' class='boxtn btn'>*</button> </view> <view> <button data-val='4' class='boxtn'>4</button> <button data-val='5' class='boxtn'>5</button> <button data-val='6' class='boxtn'>6</button> <button data-val='-' class='boxtn btn'>-</button> </view> <view> <button data-val='1' class='boxtn'>1</button> <button data-val='2' class='boxtn'>2</button> <button data-val='3' class='boxtn'>3</button> <button data-val='+' class='boxtn btn'>+</button> </view> <view> <button data-val='1' class='boxtn btn2'>0</button> <button data-val='.' class='boxtn'>.</button> <button data-val='=' class='boxtn btn'>=</button> </view> </view> </view> Style section .box{ width:100%; height: 700px; background: #000; } .txt{ color: #fff; width: 100%; height:120px; font-size: 50px; text-align: right; } .boxtn{ width: 90px; height:90px; display:block; float:left; border-radius: 50%; line-height: 90px; text-align: center; margin-left: 3px; margin-top: 5px; color:#fff; background: #333333; font-weight: bold; font-size: 25px; } .btn{ background: #f09a37; } .btn1{ background: #a5a5a5; color:#000; } .btn2{ width: 180px; border-radius: 40px; } js part //index.js //Get the application instance const app = getApp() Page({ /** * Initial data of the page */ data: { screenNum: 0, //The number displayed on the screen currentNum: '', //The current input number storage: 0, //The stored number operator: '', //Operator off: false, }, compute: function (e) { var btn_num = e.target.dataset.val; var obj = this; if (!isNaN(btn_num)) { if (obj.data.off == true) { obj.data.currentNum = '' obj.data.off = false; } obj.data.currentNum += btn_num obj.data.currentNum = Number(obj.data.currentNum); obj.data.currentNum = obj.data.currentNum.toString(); } else { switch (btn_num) { case '+': case '-': case '*': case '/': case '=': // Store the current number on the screen and the operator into the variable if (obj.data.storage == 0) { obj.data.storage = obj.data.currentNum; obj.data.operator = btn_num; } else { if (obj.data.off != true) { if (obj.data.operator == '+') { obj.data.currentNum = Number(obj.data.storage) + Number(obj.data.currentNum) } else if (obj.data.operator == '-') { obj.data.currentNum = Number(obj.data.storage) - Number(obj.data.currentNum) } else if (obj.data.operator == '*') { obj.data.currentNum = Number(obj.data.storage) * Number(obj.data.currentNum) } else if (obj.data.operator == '/') { obj.data.currentNum = Number(obj.data.storage) / Number(obj.data.currentNum) } } obj.data.storage = obj.data.currentNum; obj.data.operator = btn_num; } obj.data.off = true; break; case 'clear': obj.data.storage = 0; obj.data.currentNum = '0'; obj.data.operator = ''; break; case 'back': obj.data.currentNum = obj.data.currentNum.slice(0, -1); if (obj.data.currentNum == '') { obj.data.currentNum = '0'; } break; case '.': if (obj.data.currentNum.indexOf('.') == -1) { // Check whether "." is included obj.data.currentNum += btn_num } break; } } obj.setData({ screenNum: obj.data.currentNum }) }, }) The effect diagram is as follows WeChat Developer Tools Download Address The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Will this SQL writing method really cause the index to fail?
>>: Modify the jvm encoding problem when Tomcat is running
Table of contents definition The role of the curs...
Regarding display: flex layout, some people have ...
This article records the installation and configu...
I have been quite free recently. I have been doin...
Table of contents Problems with resource manageme...
As the company's influence grows and its prod...
Error message: ERROR 2002: Can't connect to l...
A jQuery plugin every day - step progress axis st...
Summary This article will introduce the following...
Today, when verifying the concurrency problem of ...
Original address: https://blog.csdn.net/m0_465798...
Let's first look at the basic syntax of the c...
The props of the component (props is an object) F...
Table of contents 1. TypeScript is introduced int...
Table of contents Determine whether a record alre...