微信小程序选项卡功能开发步骤与方法全解析
476
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小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~