微信小程序实验一 ——— 简单计算器与秒表

实验内容：

任务一：实现一个简单的加减乘除运算。

首先输入两个运算数，然后选择加、减、乘、除四个运算中的某一个运算按钮（共4个按钮），最后在界面上显示运算结果。运算数及运算结果支持整数和浮点数。

任务二：设计一个计数秒表。

不要求绘制秒表表盘、表针，只要求以数字的方式显示秒表计数即可。注意：显示形式为：分钟：秒数：百分之一秒数。（如果不清楚可以看看自己手机上的秒表数字显示）。

界面上设计一个按钮，计数未开始时，按钮显示文字为“开始“，点击后开始计数，并且按钮的显示文字变成”停止“，如果再次点击按钮则计数停止。

实验效果：

实验代码目录：

countingWatch 目录中放的是秒表代码， index目录中放的是简单计算器代码

实验代码：

简单计算器代码：

index.js

// index.jsconst 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.jsconst 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.secondvar minute = this.data.minutevar millisecond = this.data.millisecondthis.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"
}

微信小程序实验一 ——— 简单计算器与秒表相关推荐

android商品数量加减,微信小程序实现一个简单的商品数量加减案例
简介这是一个用微信小程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用,很简单哦~~~. 核心js方法说明addCount(增加数量) delCount (减少数量) ...
微信小程序实验案例：简易成语小词典
微信小程序实验案例:简易成语小词典 01.准备工作 1●申请数据接口现在网络上第三方的免费数据资源越来越少了,这里推荐使用聚合数据的免费接口来实现本次实验案例. 首先访问聚合数据官网https:// ...
微信小程序消息通知简单Demo
前言最近项目有需求需要用到微信小程序推送消息,在此记录一下实验过程. 前提准备在开始前,你需要准备: 注册微信小程序一个简单的springBoot 项目微信开发者工具正式微信小程序发送 ...
微信小程序实验报告-----学生家教小程序
实验报告课程名称:企业级前端应用开发实践实验项目:学生家教小程序实验地点: 专业班级: 学号: 学生姓名: 指导教师: 年月日实验报告实验名称学生家教系统实验地点实验日 ...
微信小程序开发之简易计算器
微信小程序之简易计算器一.介绍 1.中缀表达式中缀表达式是一种通用的算术或逻辑公式表示方法,操作符以中缀形式处于操作数的中间.中缀表达式是人们常用的算术表示方法. 虽然人的大脑很容易理解与分析中缀 ...
微信小程序实验四 —— 扫雷游戏
实验小提醒,打开微信小程序模板时,一定要看清楚,要选js模板,不要选ts模板,因为ts中对数据类型检查更严格,同样的代码在ts中可能无法运行! 实验内容: 编写如下扫雷游戏,基本要求如下: (1)方块 ...
微信小程序嵌套h5页面+发布微信小程序（超级简单）
将发布的h5页面转换成微信小程序,无需重新开发,操作超级简单!!! 使用到的技术为uniapp和web-view 首先,我们先来了解一下web-view是什么: 简单的一句话来讲:web-view 是 ...
微信小游戏计算机算题,微信小程序学习：简易计算器
昨天刚刚接触的微信小程序,写了个计算器demo,因为自身有一点前端的基础,所以看微信小程序的api时没有这么云里雾里,几乎跟前端没差太多,所以上手挺快,先上效果图仿制iphone的计算器实现了+-* ...
微信小程序云开发简单入门教程
文章目录 ###开场白: 云开发顾名思义就是后端开发,应该是微信上周才推出的开放能力,现在这让我想起了以前的leancloud,和更早的bmob了,而leancloud一早就开始支持微信小程序开发了 ...
《移动软件开发》实验1：第一个微信小程序实验报告
2022年夏季<移动软件开发>实验报告本实验报告所参考实验文档为:Docs (feishu.cn) 如想获得详细的制作过程,请点击上面链接.该博客仅为个人使用实验报告姓名和学号? / ...

微信小程序实验一 ——— 简单计算器与秒表

实验代码：

微信小程序实验一 ——— 简单计算器与秒表相关推荐

最新文章

热门文章