用微信小程序实现计算器功能

网友投稿 526 2023-11-13

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

用微信小程序实现计算器功能

页面部分

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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>

样式部分

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.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部分

效果图如下

微信开发者工具-

您可能感兴趣的文章:微信小程序 简易计算器实现代码实例微信小程序实现计算器功能微信小程序实现简易计算器微信小程序实现简易计算器微信小程序实现计算器小功能微信小程序实现小型计算器微信小程序计算器实例详解微信小程序实现计算器案例微信小程序实现简单计算器微信小程序计算器实现案例详解

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：计算 程序 微信小程序 小程序 js
上一篇:APP软件开发简单吗？
下一篇:快速学会app开发，为企业节省资金
相关文章

 发表评论

暂时没有评论，来抢沙发吧~