快捷導(dǎo)航

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

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

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

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

實(shí)驗(yàn)內(nèi)容：

任務(wù)一：實(shí)現(xiàn)一個(gè)簡(jiǎn)單的加減乘除運(yùn)算。

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

任務(wù)二：設(shè)計(jì)一個(gè)計(jì)數(shù)秒表。

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

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

實(shí)驗(yàn)效果：

實(shí)驗(yàn)代碼目錄：

countingWatch 目錄中放的是秒表代碼， index目錄中放的是簡(jiǎn)單計(jì)算器代碼

實(shí)驗(yàn)代碼：

簡(jiǎn)單計(jì)算器代碼：

index.js

// index.js
?
const app = getApp()
?
Page({
? data: {
? ? ? describe: "計(jì)算",
? ? ? 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>請(qǐng)輸入第一個(gè)運(yùn)算數(shù):</text> -->
? ? <label class="text" >請(qǐng)輸入第一個(gè)運(yùn)算數(shù): </label>
? ? <input type="digit" bindinput="input1" ? ? ? style=" border: 2rpx solid #ccc; width:150px; ?margin-left: 5px; "/>
</view>
<view class="secondNum">
? ? <text class="text">請(qǐng)輸入第二個(gè)運(yùn)算數(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}}結(jié)果:{{result}}</text>
</view>
<button bindtap="jump" class="jump">跳轉(zhuǎn)至秒表</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'
? },
?
//計(jì)時(shí)開始
? 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:"開始"})
? ? ? ? ? ?//這個(gè)是系統(tǒng)提供的用于時(shí)鐘暫停的方法
? ? ? ? ? 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">跳轉(zhuǎn)至計(jì)算器</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;
}

還有一個(gè)用于銜接兩個(gè)頁(yè)面的代碼

app.json

?{
? "pages": [
? ? "pages/index/index",
? ? "pages/countingWatch/countingWatch",
? ? "pages/logs/logs"
? ?
? ],
? "window": {
? ? "backgroundTextStyle": "light",
? ? "navigationBarBackgroundColor": "#fff",
? ? "navigationBarTitleText": "兩個(gè)數(shù)的運(yùn)算",
? ? "navigationBarTextStyle": "black"
? },
? "style": "v2",
? "sitemapLocation": "sitemap.json"
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: