参考までに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 プロキシ サーバーで双方向証明書検証を構成する方法
目次システムアップデート構成Windows Update サーバーの変更自動更新を有効にして許可する...
序文多くのサイトが、ポイントやゴールドコインなど、情報のダウンロードに料金を請求していることは誰もが...
長い移植と情報検索の期間を経て、組み込みDockerの問題を解決することができました。インターネット...
Nginx (エンジン x) は、高性能な HTTP およびリバース プロキシ サーバーであり、IM...
データベースでcreate tableステートメントを実行する テーブル `sys_acl` を作成...
序文非表示要素の 3 つの属性である表示、可視性、不透明度の類似点と相違点は、フロントエンドの就職面...
この記事では、スローモーションアニメーション効果を実現するためのJavaScriptの具体的なコード...
1. ソースコードからovsをコンパイルしてインストールします。依存関係をインストールします: # ...
オールラウンドなシステム監視ツール dstat dstat は、vmstat、iostat、nets...
基本イメージが以前に構成されていて、これらのイメージが他の場所でも必要な場合はどうなりますか?回答:...
Visual Studio Code は、Microsoft が開発した強力なテキスト エディター...
序文通常のユーザーはcrontabスケジュールタスクを定義します。たとえば、Oracleユーザーはス...
スティッキーフッターレイアウトとは何ですか?一般的な Web ページのレイアウトは、通常、ヘッダー部...
序文PC サーバーは今日まで発展を続け、パフォーマンスにおいて大きな進歩を遂げてきました。 64ビッ...
mysql の存在する例と存在しない例の詳細な説明テーブルA |列1 | 列1 | 列3 |テーブル...