微信小程序?qū)崿F(xiàn)簡易加法計算器
更新時間：2022年09月09日 10:35:55 作者：阿呱Zoe
這篇文章主要為大家詳細介紹了微信小程序加法計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)加法計算器的具體代碼，供大家參考，具體內(nèi)容如下
wxml
<!--pages/cal/cal.wxml-->
<view class="container">
? <input placeholder="被加數(shù)" bindinput="bindInput1"/>
? <input placeholder="加數(shù)" bindinput="bindInput2"/>
? <button type="primary" bindtap="bindAdd">計算</button>
? <input placeholder="結(jié)果" value="{{result}}" disabled/>
</view>js
Page({
?
? ? /**
? ? ?* 頁面的初始數(shù)據(jù)
? ? ?*/
? ? data: {
? ? ? num1:"",//被加數(shù)
? ? ? num2:"",//加數(shù)
? ? ? result:"" //結(jié)果
? ? },
? ? bindAdd:function(e) {
? ? ? ? var r =this.data.num1 * 1 +this.data.num2 * 1;
? ? ? ? console.log(r);
? ? ? ? this.setData({
? ? ? ? ? result: r
? ? ? ? });
? ? ? },
? ? ?
? ? ? bindInput1:function(e) {
? ? ? ? var n = e.detail.value;
? ? ? ? console.log(n);
? ? ? ? if (!isNaN(n)) {
? ? ? ? ? this.setData({
? ? ? ? ? ? num1: n
? ? ? ? ? });
? ? ? ? };
? ? ? },
? ? ?
? ? ? bindInput2:function(e) {
? ? ? ? var n = e.detail.value;
? ? ? ? console.log(n);
? ? ? ? if (!isNaN(n)) {
? ? ? ? ? this.setData({
? ? ? ? ? ? num2: n
? ? ? ? ? });
? ? ? ? };
? ? ? }
? ? })wxss
/* pages/tabbar2/calc/calc.wxss */
.container{
? ? justify-content: flex-start;
? ? padding: 30rpx 0;
}
.container input{
? ? background-color:#eee;
? ? border-radius: 6rpx;
? ? text-align: left;
? ? width: 720rpx;
? ? height: 100rpx;
? ? line-height: 100rpx;
? ? margin: 20rpx;
}
.container button{
? ? width: 80%;
}改slider的組件
wxml
<!--pages/tabbar2/sliderCalc/sliderCalc.wxml-->
<view class="content">
? ? <view class="section_title">被加數(shù)</view>
? ? <slider min="0" max="1000" bindchange="bindInput1" show-value></slider>
? ? <view class="section_title">加數(shù)</view>
? ? <slider min="0" max="1000" bindchange="bindInput2" show-value></slider>
? ? <button type="primary" bindtap="bindAdd">計算</button>
? ? <view class="section_title">結(jié)果：{{result}}</view>
</view>/* pages/tabbar2/sliderCalc/sliderCalc.wxss */
.content{
? ? margin: 40rpx;
}
.content button{
? ? width: 80%;
}
view,button,slider{
? ? margin: 40rpx 0;
}以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
TypeScript是一種強大的編程語言,它在JavaScript的基礎(chǔ)上添加了靜態(tài)類型檢查,使得代碼更加可維護和類型安全,在TypeScript中,類和接口是構(gòu)建復(fù)雜應(yīng)用程序的關(guān)鍵組成部分,本文將深入探討TypeScript中類與接口的使用,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細介紹了js下載文件并修改文件名的代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了Bootstrap表格和柵格分頁的相關(guān)資料,具有參考借鑒價值，特此分享到腳本之家平臺供大家參考，需要的朋友可以參考下2016-05-05
JavaScript通過字典進行字符串翻譯轉(zhuǎn)換的方法
這篇文章主要介紹了JavaScript通過字典進行字符串翻譯轉(zhuǎn)換的方法,涉及javascript字符串轉(zhuǎn)換的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
在vue項目中和后臺交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,這篇文章主要給大家介紹了關(guān)于如何使用TS對axios的進行簡單封裝的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了webpack4簡單入門實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本文給大家分享兩種方法來控制html元素的顯示和隱藏，分別利用html的style中兩個屬性，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09
這篇文章主要介紹了JS中回調(diào)函數(shù)及用法，通過實例代碼給大家詳細介紹了什么是回調(diào)函數(shù)，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
這篇文章主要為大家詳細介紹了js點擊按鈕實現(xiàn)圖片排序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
微信小程序數(shù)據(jù)統(tǒng)計,現(xiàn)在有很多的統(tǒng)計方法和統(tǒng)計工具,下面這篇文章主要給大家介紹了關(guān)于小程序統(tǒng)計來源信息的方案與具體代碼,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09