微信小程序?qū)崿F(xiàn)簡單計算器與秒表

更新時間：2022年09月08日 16:07:57 作者：楓渝浪天下

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)簡單計算器與秒表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)簡單計算器與秒表的具體代碼，供大家參考，具體內(nèi)容如下

實驗內(nèi)容：

任務一：實現(xiàn)一個簡單的加減乘除運算。

首先輸入兩個運算數(shù)，然后選擇加、減、乘、除四個運算中的某一個運算按鈕（共4個按鈕），最后在界面上顯示運算結果。運算數(shù)及運算結果支持整數(shù)和浮點數(shù)。

任務二：設計一個計數(shù)秒表。

不要求繪制秒表表盤、表針，只要求以數(shù)字的方式顯示秒表計數(shù)即可。注意：顯示形式為：分鐘：秒數(shù)：百分之一秒數(shù)。（如果不清楚可以看看自己手機上的秒表數(shù)字顯示）。

界面上設計一個按鈕，計數(shù)未開始時，按鈕顯示文字為“開始“，點擊后開始計數(shù)，并且按鈕的顯示文字變成”停止“，如果再次點擊按鈕則計數(shù)停止。

實驗效果：

實驗代碼目錄：

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>請輸入第一個運算數(shù):</text> -->
? ? <label class="text" >請輸入第一個運算數(shù): </label>
? ? <input type="digit" bindinput="input1" ? ? ? style=" border: 2rpx solid #ccc; width:150px; ?margin-left: 5px; "/>
</view>
<view class="secondNum">
? ? <text class="text">請輸入第二個運算數(shù):</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:"開始"})
? ? ? ? ? ?//這個是系統(tǒng)提供的用于時鐘暫停的方法
? ? ? ? ? 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": "兩個數(shù)的運算",
? ? "navigationBarTextStyle": "black"
? },
? "style": "v2",
? "sitemapLocation": "sitemap.json"
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: