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
In order to provide high availability of the netw...
Primary Key: Keyword: primary key Features: canno...
Table of contents 1. Build Docker 2. Enter the co...
Website compatibility debugging is really annoyin...
1. Single column index Choosing which columns to ...
Database performance optimization generally adopt...
disabled definition and usage The disabled attrib...
Windows installation mysql-5.7.17-winx64.zip meth...
Table of contents 1. Test environment 1.1 Install...
This article example shares the specific code of ...
Transactions ensure the atomicity of multiple SQL...
Preface Vue provides a wealth of built-in directi...
A new window opens. Advantages: When the user cli...
background: Tablespace: All INNODB data is stored...
Preface The database has always been my weak poin...