Shulou(Shulou.com)06/02 Report--

This article is about how javascript implements calculator functions. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Introduction of calculator function

It can realize data addition (+), subtraction (-), multiplication (*), division (/), remainder operation (%), as well as data deletion (Del) and emptying functions (C).

2. Calculator page design 1. Navigation bar section {"navigationBarBackgroundColor": "# fff", "navigationBarTextStyle": "black", "navigationBarTitleText": "calculator"} 2, data part data: {/ / data only the initial data num: "1" Op: "" / / record operation symbol} 3, index.wxml layout page {{num}} {{op}} C Del% / 7 8 9 * 4 56-1 23 + 0. = 4. Index.css style page page {display: flex; flex-direction: column;/* Project Spindle arrangement Direction * / height: 100%;} .result {flex: 1 * evenly distributed element * / background: # f3f6fe.position: relative;}. Result-num {position: absolute;/* parent * / font-size: 20pt; bottom: 5vh; right: 3vw;} .result-op {position: absolute; font-size: 15pt Bottom: 1vh; right: 3vw;} .btns {flex: 1; display: flex; flex-direction: column;/* with large view perpendicular to vertical * / font-size: 17pt; border-top: 1rpx solid # ccc; border-left: 1rpx solid # ccc;} .btns > view {flex: 1; display: flex;} .btns > view > view {flex-basis: 25% ccc; border-left * width ratio * / border-bottom: 1rpx solid # ccc; border-right: 1rpx solid # ccc The proportion of box-sizing: border-box;/* with borders * / display:flex; align-items: center; justify-content: center;/* is added together to center the text * /} .btns > view:last-child > view:first-child {flex-basis: 50%;} .btns > view:first-child > view:first-child {color:#f00;} .btns > view > view:last-child {color:# fcBe00;} .bg {background: # eee;} 5.

3. Function realization part 1. Delete function

There are two parameters in the substr () function, the first indicating the position of the beginning of the interception, and the second indicating the length of the interception.

DelBtn:function (e) {var num=this.data.num.substr (0recoverythis.data.num.num 1); this.setData ({num:num=== "?" 0 ": num})} 2. Emptying function reSetBtn:function (e) {/ / all becomes the initial state this.result=null; this.isClear=false This.setData ({num: "0", op: ""})} 3. Other functions implement data: {/ / data only the initial data is placed in num: "1", op: "" / / record operation symbol}, result:null, isClear:false,// is used to record the status numBtn:function (e) {var num = e.target.dataset.val// to get the value in data-val / / if you press 0 multiple times or isClear is true Then the original data is cleared and the number if (this.data.num==='0' | | this.isClear) {this.setData ({num:num}) / / the obtained value is given to result this.isClear=false} else {this.setData ({num:this.data.num+num})}, opBtn:function (e) {var op=this.data.op / / record the current op var num=Number (this.data.num) first; / / get the current num data this.setData ({op:e.target.dataset.val}); / / give the pressed button to the variable op if (this.isClear) {/ / because in the above operation, if the operator is pressed, isclear is true, and then return return} this.isClear=true in order to avoid pressing the addition multiple times / / when the user presses the operation button and then presses the number, the original number is cleared if (this.result===null) {this.result=num Return} if (op=== "+") {this.result=this.result+num this.setData ({num:this.result}) / / add the result as num} else if (op=== "-") {this.result=this.result-num} else if (op=== "*") {this.result=this.result*num} else if (op=== "/") {this.result=this.result/num} else If (op=== "%") {this.result=this.result%num} this.setData ({num:this.result+ ""}) / / convert to string type} DoBtn:function (e) {if (this.isClear) {/ / indicates that the previous operation is over Press it at the beginning. This.setData ({num: "0."}); this.isClear=false; return} / / if you press more. If (this.data.num.indexOf (".") > = 0) {return} / / normal number followed by click this.setData ({num:this.data.num+ "."})}, thank you for reading! This is the end of the article on "how to realize the calculator function of javascript". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.