参考までにWeChatアプレットで書かれた簡単な計算機です。具体的な内容は次のとおりです。 jisaunqi.js より // ページ/jisuanqi/jisuanqi.js ページ({ /** * ページの初期データ */ データ: { 結果: "0", 弦:""、 cal:"", 数値1:"", 数値2:"" }, btSubmit:function(e){ コンソールログ(e); var num1 = this.data.num1; var cal = this.data.cal; var num2 = this.data.num2; var char = e.target.id; var 文字列 ; if((char>="0"&&char<="9"||char=='.')&&cal==""){ num1=num1+文字; this.setData({ 数値1:数値1, }) } そうでない場合((char>="0"&&char<="9"||char=='.')&&cal!=""){ num2=num2+文字; this.setData({ 数値2:数値2, }) } それ以外 { cal=文字; this.setData({ cal:cal、 }) } this.setData({ 文字列:num1+cal+num2 }) }, クリーン:関数(e){ this.setData({ 弦:""、 数値1:"", 数値2:"", cal:"" }) }, 計算:関数(e){ var num1 = this.data.num1; var num2 = this.data.num2; var cal = this.data.cal; var 結果; スイッチ(cal){ case '+':結果=num1*1+num2*1;break; case '-':結果=num1*1-num2*1;break; case '*':結果=(num1*1)*(num2*1);break; case '/':結果=(num1*1)/(num2*1);break; } num1=結果; cal=""; 数値2=""; this.setData({ 結果:結果、 数値1:数値1, cal:cal、 数値2:数値2 }) }, 逆関数(e){ var cal = this.data.cal; var num1 = this.data.num1; var num2 = this.data.num2; if(cal==""){num1="-";} そうでない場合は(cal!=""){num2="-"} this.setData({ 数値1:数値1, 数値2:数値2 }) }, lololo:function(e){ コンソールログ(123) }, 確認:関数(e){ コンソールログ(555); コンソール.log(e) }, イベント:関数(e){ wx.navigateTo({ url: '/pages/event/event', }) }, バインド入力:関数(e){ コンソール.log(1) }, ジスアンキ:function(e){ var n1 = e.detail.value.num1; var n2 = e.detail.value.num2; var 結果 = n1 * 1 + n2 * 1; コンソールログ(n1); コンソールログ(n2); console.log(結果); this.setData({ 結果:結果 }) }, tiaozhuan:function(e){ wx.navigateTo({ URL: '/pages/9x9form/9x9form', }) }, /** * ライフサイクル機能 - ページの読み込みをリッスンする*/ onLoad: 関数 (オプション) { }, /** * ライフサイクル関数 - ページの初期レンダリングの完了を待機します*/ onReady: 関数 () { }, /** * ライフサイクル機能 - モニターページ表示 */ onShow: 関数() { }, /** * ライフサイクル機能 - ページの非表示を監視する*/ onHide: 関数 () { }, /** * ライフサイクル機能 - ページのアンインストールを監視する*/ onUnload: 関数 () { }, /** * ページ関連のイベント処理関数 - ユーザーのプルダウンアクションをリッスンする */ onPullDownRefresh: 関数 () { }, /** * ページ上のボトムイベントを処理する関数*/ onReachBottom: 関数 () { }, /** * ユーザーは右上隅をクリックして共有します*/ onShareAppMessage: 関数 () { } }) jisuanqi.json { "コンポーネントの使用": {}, "navigationBarTitleText": "電卓" } jisuanqi.wxml <ビュークラス="コンテナ"> <view class="view1">{{文字列}}</view> <view class="view2">{{結果}}</view> <view class="button-group"> <button class="button">履歴</button> <button class="button" bindtap="clean">C</button> <button class="button"></button> <button class="button" id="/" bindtap="btSubmit">/</button> </ビュー> <view class="button-group"> <button class="button" id="7" bindtap="btSubmit">7</button> <button class="button" id="8" bindtap="btSubmit">8</button> <button class="button" id="9" bindtap="btSubmit">9</button> <button class="button" id="*" bindtap="btSubmit">*</button> </ビュー> <view class="button-group"> <button class="button" id="4" bindtap="btSubmit">4</button> <button class="button" id="5" bindtap="btSubmit">5</button> <button class="button" id="6" bindtap="btSubmit">6</button> <button class="button" id="-" bindtap="btSubmit">-</button> </ビュー> <view class="button-group"> <button class="button" id="1" bindtap="btSubmit">1</button> <button class="button" id="2" bindtap="btSubmit">2</button> <button class="button" id="3" bindtap="btSubmit">3</button> <button class="button" id="+" bindtap="btSubmit">+</button> </ビュー> <view class="button-group"> <button class="button" bindtap="reverse">-(マイナス記号)</button> <button class="button" id="0" bindtap="btSubmit">0</button> <button class="button" id="." bindtap="btSubmit">.</button> <button class="button" bindtap="計算">=</button> </ビュー> </ビュー> <navigator url="/pages/event/event">イベントへジャンプ</navigator>// jisuanqi.wxss 。ボタン{ 幅: 160rpx; 高さ: 100rpx; 左マージン: 10rpx; 左パディング: 10rpx; 上マージン: 10rpx; テキスト配置: 中央; 行の高さ: 100rpx; パディング: 5px; 境界線の半径: 5px; } .ボタングループ{ ディスプレイ: フレックス; flex-direction: 行; align-content: flex-start; } 。容器{ ディスプレイ: フレックス; flex-direction: 列; コンテンツの端揃え: flex-end; /* align-content: flex-end; */ } .view1{ 高さ: 100rpx; 背景色: #e4e4e4; 行の高さ: 100rpx; フォントサイズ: 20px; } .view2{ 高さ: 100rpx; 上マージン: 5px; 背景色: #e4e4e4; 行の高さ: 100rpx; フォントサイズ: 20px; } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Mysql5.7.18 のインストールとマスタースレーブレプリケーションの詳細なグラフィック説明
>>: nginx プロキシ サーバーで双方向証明書検証を構成する方法
効果上から下へフェードアウト ソースコードhtml、Angular構文を使用して、必要な構文を取得す...
Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュー...
この記事では、ショッピングカートの完全な機能を実現するためのjQueryの具体的なコードを参考までに...
現在、新しいアプリプロジェクトを開発中です。私にとっても初めてのアプリ開発です。チームで調査と検討を...
デザイナーは心理学を理解する必要があるデザイナーが知るべき心理学という本は非常に興味深いです。まず、...
Nginx は、マスター プロセス (MasterProcess) と、同じ数のホスト CPU コア...
SQL を最適化する必要があるのはなぜですか?当然ですが、SQL ステートメントを記述する場合、次の...
プロパティやイベントがあるにもかかわらず、JavaScript で子コンポーネントに直接アクセスする...
序文:プロジェクトの開発中に、1 行にナビゲーション バーが多すぎる場合に水平スクロール バーを実装...
エラーの説明: 1. Linux (CentOS 7 64) システムに Nginx (1.18.0...
今日、ディスクアラーム例外を受け取りました。50G ディスクが爆発しました。分析と解決のプロセスは次...
[LeetCode] 177. 最も高い給与従業員テーブルからn番目に高い給与を取得する SQL ...
目次アプリケーションシナリオ簡単に言えば、カスタム指示基本概念グローバルカスタマイズローカルカスタマ...
「初心者向けソースコードからの MySQL デッドロック問題の理解」では、MySQL ソースコードを...
今日はMySQLのインストール方法を学びましたが、その過程でいくつか問題が発生しました。関連記事をい...