WeChatアプレット:シンプルな計算機、参考までに、具体的な内容は次のとおりです。 ミニプログラムに触れたばかりの人にとって、非常に実用的なプロジェクトを始めるのは非常に困難です。ミニプログラムの使い方にすぐに慣れたい場合は、まず簡単な計算機を作ってみることができます。 スクリーンショットを実行 計算機では、インターフェースの美観に対する要求は高くありません。いくつかのビューとボタン コントロールを組み合わせただけなので、インターフェースに多くの労力を費やす必要はありません。重要なのはロジック層です。最初のプロジェクトとして電卓を選んだ理由は、電卓のロジックは単純にも複雑にもでき、初心者のミニプログラムの習熟度に完全に適応できるからです。 メインコードjs: ページ({ データ: { 結果: "0", id1:"クリア", id2:"戻る", id3:"時間", id4:"div", id5:"mul", id6:"サブ", id7:"追加", id8:"ドット", id9:"eql", id10:"num_0", id11:"num_1", id12:"num_2", id13:"num_3", id14:"num_4", id15:"num_5", id16:"num_6", id17:"num_7", id18:"num_8", id19:"num_9", ボタンドット:false、 is_time:偽 }, クリックボタン: 関数(e) { コンソールログ(e); var buttonVal = e.target.id; var res = this.data.result; if(this.data.is_time==true){ 解像度=0 } var newbuttonDot=this.data.buttonDot; var 記号; ボタン値 >= "num_0" && ボタン値 <= "num_9") { var num=buttonVal.split('_')[1]; (res == "0" || ((res.length-0) -(length-1)) == "=") の場合 { 解像度 = 数値; } それ以外 { res = res + num; } } それ以外{ if(buttonVal=="ドット") { if(!newbuttonDot) { res = res + '.'; } } そうでない場合(buttonVal=="クリア") { 解像度='0'; } そうでない場合(buttonVal=="戻る") { var 長さ = res.length; 長さ>1の場合 { res=res.substr(0,長さ-1); } それ以外{ 解像度='0'; } } そうでない場合 (buttonVal == "div" || buttonVal == "mul" || buttonVal == "sub" || buttonVal == "add") { 長さが等しい場合{} それ以外{ res = JSON.stringify(res) } var is_sign=res.substr(res.length-1,res.length) is_sign=="+"||is_sign=="-"||is_sign=="×"||is_sign=="÷"){ res=res.substr(0,res.length-1); } スイッチ(ボタン値){ ケース "div": 符号 = '÷'; 壊す; ケース「mul」: 記号 = '×'; 壊す; ケース「sub」: 符号='-'; 壊す; ケース「追加」: 符号='+'; 壊す; } if(!isNaN(res.length)) { 解像度 1 res=res+sign; } } } this.setData({ is_time:false、 結果: res、 ボタンドット:新しいボタンドット、 }); }, 等しい: 関数(e){ var str = this.data.result; var アイテム = ''; var strArray = []; var temp = 0; for(var i=0;i<=str.length;i++){ var s = str.charAt(i); if((s!='' && s>='0' && s<='9') || s=='.'){ アイテム=アイテム+s; } それ以外{ strArray[temp]=項目; 温度++; strArray[temp]=s; 温度++; アイテム=''; } } if(isNaN(strArray[strArray.length-1])) { strArray.pop(); } 変数 数値; var res=strArray[0]*1; for(var i=1;i<=strArray.length;i=i+2){ num = strArray[i+1]; スイッチ(strArray[i]){ 場合 "-": res = (res-0)-(num-0); 壊す; ケース「+」: res = (res-0) + (num-0); 壊す; ケース「×」: res = (res-0)* (num-0); 壊す; ケース「÷」: if(数値!='0') { res = (res-0)/ (num-0); } それ以外 { 解像度 = '∞'; 壊す; } 壊す; } } this.setData({ 結果:res、 }); }, 時間:関数(e){ var util = require("../../utils/util.js"); var time = util.formatTime(新しい Date()); this.setData({ 結果:時間、 is_time:true }); }}) wxml <!--index.wxml--> <view class="project_name">シンプルな計算機</view> <view class="screen_content"> <view class="screen">{{結果}}</view> </ビュー> <view class="content"> <view class="buttonGroup"> <button id="{{id1}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">C</button> <button id="{{id2}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">BS</button> <button id="{{id3}}" bindtap="time" class="buttonitem color" hover-class="shadow"> <icon type="待機中" color="#66CC33"></icon> </ボタン> <button id="{{id4}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">÷</button> </ビュー> <view class="buttonGroup"> <button id="{{id17}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">7</button> <button id="{{id18}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">8</button> <button id="{{id19}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">9</button> <button id="{{id5}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">×</button> </ビュー> <view class="buttonGroup"> <button id="{{id14}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">4</button> <button id="{{id15}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">5</button> <button id="{{id16}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">6</button> <button id="{{id6}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">-</button> </ビュー> <view class="buttonGroup"> <button id="{{id11}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">1</button> <button id="{{id12}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">2</button> <button id="{{id13}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">3</button> <button id="{{id7}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">+</button> </ビュー> <view class="buttonGroup"> <button id="{{id10}}" bindtap="clickButton" class="buttonitem1 color" hover-class="shadow">0</button> <button id="{{id8}}" bindtap="clickButton" class="buttonitem1 color" hover-class="shadow">.</button> <button id="{{id9}}" bindtap="equal" class="equal" hover-class="shadow">=</button> </ビュー> </ビュー> 色: /**index.wxss**/ ページ{ 背景: #f5f5f5; } .プロジェクト名{ 位置:絶対; 上:25px; 幅:100%; テキスト配置: 中央; フォントサイズ: 30px; } .screen_content{ 位置: 固定; 色: #1b1717; 背景: #fff; フォントサイズ: 40px; 下部: 390px; テキスト配置: 右; 高さ:100px; 幅: 100%; 単語折り返し: 単語を区切る; 上境界線:1px 実線 #a8a8a8; ボーダー下部:1px 実線 #a8a8a8; } 。画面{ 位置: 絶対; フォントサイズ: 40px; テキスト配置: 右; 下:0px; 幅: 96%; 残り:2% 単語折り返し: 単語を区切る; } 。コンテンツ{ 位置: 固定; 下部: 0; } .ボタングループ{ ディスプレイ: フレックス; flex-direction: 行; } .ボタン項目{ テキスト配置: 中央; 行の高さ: 120rpx; 幅: 25%; 境界線の半径: 0; } .ボタン項目1{ 幅: 192rpx; テキスト配置: 中央; 行の高さ: 120rpx; 境界線の半径: 0; } アイコン{ 位置: 絶対; 上位: 20% 左: 67rpx; } 。色{ 背景: #fff; } 。等しい{ 幅: 380rpx; テキスト配置: 中央; 行の高さ: 120rpx; 境界線の半径: 0; 背景: #fff; } 。影{ 背景: #e9ebe9; } 追記ここでは加算と減算について大まかにしか説明していませんが、このような計算機にはすでに基本的な機能が備わっています。習熟が深まるにつれて、平方や平方根などのより複雑な機能を追加して、小さなプログラムの開発を習得することもできます。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL の文字セット utf8 を utf8mb4 に変更する方法
>>: CentOS7 は Docker のバージョン 19 をデプロイします (簡単なので、従ってください)
この記事の例では、日付と時刻の選択を実装するための uniapp の具体的なコードを参考までに共有し...
目次インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックスプッ...
目次1. 画像のバイナリデータを表示する方法2. 絵の種類の見分け方3. 画像の種類を検出する方法3...
マウスをホバーすると画像が折りたたまれる効果を実現する CSS 1. 実施のポイント折り畳みは複数の...
目次1. EclipseがTomcatを構成する2. Tomcat の無効なポートの解決方法方法1:...
今回はReact-Flaskフレームワーク上でアップロードコンポーネントを開発するスキルについてお話...
目次概要1. 入力および出力プロパティの概要2. 入力属性3. プロパティバインディングは親コンポー...
# 以下の例は x64 ビット ランタイム v3.0.0 用です mkdir /runtimes ...
目次適用シナリオ:方法 1: 正規表現 (推奨)方法2: 配列のreduceメソッドを使用する方法3...
目次序文コンテナ間の通信を容易にするためのブリッジネットワークを作成するCentOS7イメージを使用...
目次1. NFS の概要2. NFS構築1. NFSサーバーの構築2. NFSクライアントの構築3....
Linux は、システム内のデバイス、インターフェース、ファイル、スタートアップ、アプリケーション ...
目次ステップ1: インストールステップ2: 引用ステップ3: 使用Webプロジェクトでは、データを読...
ファイル サーバーは、企業内で最も一般的に使用されるサーバーの一つであり、主にファイル共有を提供する...
この記事では、検証コード干渉を実装するためのjsの具体的なコードを参考までに共有します。具体的な内容...