参考までに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 プロキシ サーバーで双方向証明書検証を構成する方法
最近、顧客のフッターメールボックスにクリックして送信するメール機能を追加しました。Baidu で検索...
環境準備:複数のコンテナに基づいてホストに lnmp をデプロイします。 nginx サービス: 1...
Web 上でフォントを使用することは、基本的なスキルであると同時に芸術でもあります。英語のフォントに...
目次1. 父から息子へ2. 息子から父へ3. 親子関係のないコンポーネントの値の転送4. ヴュークス...
目次序文静的スコープと動的スコープ静的スコープ実行プロセス動的スコープ実行プロセスエクササイズ練習1...
HTMLはヘッドとボディの2つの部分で構成されています** ヘッド内のタグはヘッドタグです** タイ...
プラットフォームの展開1. JDKをインストールするステップ1. OracleJDKをダウンロードす...
序文特に bash 環境では、スクリプトの実行方法によって結果が異なります。スクリプトを実行する方法...
目次スムーズなアニメーションの基準方法1: Chromeデベロッパーツールを使用する方法 2: フレ...
序文開発中は、インターフェース要求の繰り返しによってさまざまな問題が発生することがよくあります。ネッ...
目次複数テーブル結合の基本構文クロス結合と直積現象クロスコネクトデカルト積現象内部結合外部結合左外部...
表では、左上の境界線の色を個別に定義したり、セルの右下の境界線の色を定義したりできます。これら 2 ...
中国の習慣では、旧暦の1月15日より前に新年を祝います。ここで、庭にいる友人たちに新年の幸せを祈りた...
序文著者は、アプリケーションからフレームワーク、オペレーティング システムに至るまで、あらゆるコード...
結合の種類1. 内部結合: 結合関係を持つ 2 つのテーブル内のフィールドは、結合関係を満たすレコー...