微信小程序实现简单计算器与秒表
作者:枫渝浪天下 发布时间:2024-04-18 09:31:23
标签:微信小程序,计算器,秒表
本文实例为大家分享了微信小程序实现简单计算器与秒表的具体代码,供大家参考,具体内容如下
实验内容:
任务一:实现一个简单的加减乘除运算。
首先输入两个运算数,然后选择加、减、乘、除四个运算中的某一个运算按钮(共4个按钮),最后在界面上显示运算结果。运算数及运算结果支持整数和浮点数。
任务二:设计一个计数秒表。
不要求绘制秒表表盘、表针,只要求以数字的方式显示秒表计数即可。注意:显示形式为:分钟:秒数:百分之一秒数。(如果不清楚可以看看自己手机上的秒表数字显示)。
界面上设计一个按钮,计数未开始时,按钮显示文字为“开始“,点击后开始计数,并且按钮的显示文字变成”停止“,如果再次点击按钮则计数停止。
实验效果:
实验代码目录:
countingWatch 目录中放的是 秒表代码, index目录中放的是 简单计算器代码
实验代码:
简单计算器代码:
index.js
// index.js
const app = getApp()
Page({
data: {
describe: "计算",
num1: null,
num2: null,
result: 0
},
input1(e) {
this.setData({
num1: parseFloat(e.detail.value)
})
},
input2(e) {
this.setData({
num2: parseFloat(e.detail.value)
})
},
addButton(e) {
if (this.data.num1 && this.data.num2) {
this.setData({
describe: "加法",
result: this.data.num1 + this.data.num2
})
}
},
subButton(e) {
if (this.data.num1 && this.data.num2) {
this.setData({
describe: "减法",
result: this.data.num1 - this.data.num2
})
}
},
mulButton(e) {
if (this.data.num1 && this.data.num2) {
this.setData({
describe: "乘法",
result: this.data.num1 * this.data.num2
})
}
},
divButton(e) {
if (this.data.num1 && this.data.num2) {
this.setData({
describe: "除法",
result: this.data.num1 / this.data.num2
})
}
},
jump:function(){
wx.navigateTo({
url: '../countingWatch/countingWatch'
})
}
})
index.wxml
<!--index.wxml-->
<view class="firstNum">
<!-- <text>请输入第一个运算数:</text> -->
<label class="text" >请输入第一个运算数: </label>
<input type="digit" bindinput="input1" style=" border: 2rpx solid #ccc; width:150px; margin-left: 5px; "/>
</view>
<view class="secondNum">
<text class="text">请输入第二个运算数:</text>
<input type="digit" bindinput="input2" style=" border: 2rpx solid #ccc; width:150px; margin-left: 5px;"/>
</view>
<view class="describe">
<button bindtap="addButton" style="width: 30rpx;">+</button>
<button bindtap="subButton" style="width: 30rpx">
-</button>
<button bindtap="mulButton" style="width: 30rpx" >
*</button>
<button bindtap="divButton" style="width: 30rpx">
/</button>
</view>
<view class="result">
<text>{{describe}}结果:{{result}}</text>
</view>
<button bindtap="jump" class="jump">跳转至秒表</button>
index.wxss
/**index.wxss**/
.text{
font-size: 1.5ex;
font-weight: 600;
}
.firstNum,
.secondNum,
.result {
margin: 50rpx;
display: flex;
flex-direction: row;
height:50px;
}
.describe {
display: flex;
justify-content: space-evenly;
}
.describe button {
display: flex;
align-items: center;
justify-content: center;
color: black;
background-color: aqua;
}
.jump{
background: rgb(204, 19, 221);
margin-top: 100px;
}
秒表代码:
countingWatch.js
// pages/countingWatch/countingWatch.js
const app = getApp()
Page({
data: {
timer:null,
minute: 0, // 分
second: 0 , // 秒
millisecond:0,
describe:'开始',
timeformat:'00:00:00'
},
//计时开始
start: function () {
if(this.data.describe == "开始"){
this.setData({
describe:"停止"
})
this.setData({
minute:0,
second:0,
millisecond:0
})
this.data.timer = setInterval(this.counter,50)
}else{
this.setData({
describe:"开始"})
//这个是系统提供的用于时钟暂停的方法
clearInterval(this.data.timer)
}
},
counter:function(){
var second = this.data.second
var minute = this.data.minute
var millisecond = this.data.millisecond
this.setData({
millisecond:millisecond+5
})
if(millisecond >=99){
this.setData({
millisecond:0,
second:second+1
})
}
if(second == 60){
this.setData({
second : 0,
minute:minute+1
})
}
this.setData({
timeformat:minute+":"+second+":"+millisecond
})
},
jump:function(){
wx.navigateTo({
url: '../index/index'
})
}
})
countingWatch.wxml
<!--pages/countingWatch/countingWatch.wxml-->
<view class="timeformat">{{timeformat}}</view>
<button bindtap="start">{{describe}}</button>
<button class="jump" bindtap="jump">跳转至计算器</button>
countingWatch.wxss
/* pages/countingWatch/countingWatch.wxss */
button{
width:150rpx;
background: rgb(51, 231, 15);
color: #fff;
margin-bottom: 8px;
}
.timeformat{
margin: 20px;
text-align: center;
font-weight: 600;
font-size: 30px;
}
.jump{
background: rgb(204, 19, 221);
margin-top: 100px;
}
还有一个用于衔接两个页面的代码
app.json
{
"pages": [
"pages/index/index",
"pages/countingWatch/countingWatch",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "两个数的运算",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
来源:https://blog.csdn.net/qq_51901495/article/details/124576999
0
投稿
猜你喜欢
- 本文实例讲述了Python排序搜索基本算法之冒泡排序。分享给大家供大家参考,具体如下:冒泡排序和选择排序类似,也是第n次把最小的元素排在第n
- 淘宝的 NPM 镜像是一个完整的npmjs.org镜像。你可以用此代替官方版本(只读),同步频率目前为 15分钟 一次以保证尽量与官方服务同
- 有空余的时候自己写了一下,代码没有进行很好的规整。如果发现bug请及时通告我,谢谢 主要功能:1、点击插入表情,可选
- 看代码吧~# -*- coding:utf-8 -*- import osimport jsonimport numpy as np #fr
- 主程序import pygamefrom pygame.sprite import Groupfrom settings import Se
- 导读:这篇论坛文章主要介绍了使用SQL Server升级顾问的具体步骤,详细内容请参考下文。微软提供了SQL Server 2008升级顾问
- 一、使用NumPy读写文本文件在数据分析中,经常需要从文件中读取数据或将数据写入文件,常用的存储文件的格式有文本文件、CSV格式文件、二进制
- sql server 全文检索有两种搜索方式,一种是contains,另一种是freetext。前者是包含,类似于 like '%关
- 不知道大家有没有这样一个烦恼,“自己的电脑总是被别人使用,又不好意思设置密码”,所以利用python设计了一个程序来实现自由管控。功能虽然简
- 1、首先在系统盘中查找scrrun.dll,如果存在这个文件,请跳到第三步,如果没有,请执行第二步。 2、在安装文件目录i386中找到scr
- 话说土匪老湿在他的大作 《交互设计之回归篇》 里曝光了上次有意思小组竞赛我们小组分享的话题 “瞬间的快感”,但这一极具噱
- 问题你要处理由大量不同类型的对象组成的复杂数据结构,每一个对象都需要需要进行不同的处理。比如,遍历一个树形结构,然后根据每个节点的相应状态执
- <?php # 设置 $domain 为你的域名 (注意没有www) $domain = "aspxhome.com&quo
- 用下面这个函数:Function CheckStringLength(txt) &n
- 要说2017年什么技术最火爆,无疑是google领衔的深度学习开源框架Tensorflow。本文简述一下深度学习的入门例子MNIST。深度学
- 偶然看到 Tanel Poder 提到的一个 Metalink Note (438452.1): Performance Tools Qui
- 有时我们会碰到类似下面这样的 unicode 字符串:u'\xe4\xbd\xa0\xe5\xa5\xbd'这明显不是一个正
- 书接上文用Python搓一个太阳系你们要的3D太阳系3体人真的存在吗太长不看版最小势能点在由两个大质量物体构成的重力系统中,有一些特殊的区域
- 注意:什么路径不可改就搜索该路径进行删除注册表记录,然后重启电脑按 win键盘+R输入 regedit 进去注册表,点击计算机按“编辑”--
- 目录寻找 url下载视频执行代码下载:最后的话回答来源微信 8.0 版本更新后,可以设置个人状态,状态里面可以添加火录制视频,很快状态视频就