タイムテーブルジェネレータを使用して最初の電子プロジェクトを作る

私たちは電子フレームワークのタイムテーブルジェネレータアプリケーションを作成します.このアプリは、エクスポートすることができますタイムテーブルを生成することができます.xlsxとシステムに格納できます.

依存

開始するには、電子、ノードJS、およびNPMをインストールしていることを確認します.

アプリの設定

開いている端末とタイプのNPX電子アプリタイムテーブルジェネレータを作成します.次のように出力します.

インデックス.HTML

時刻表を作成するには、いくつかのクラスの数と対象名が必要です.そのために、このようなラベルを選択し、ボックスを作成します.


現在、我々は主題名を必要とします.このため、動的に入力フィールドを生成します.これはJavaScriptで行うことができます.現在、JavaScriptファイルを使ってタイムテーブルを生成します.

JavaScriptファイルを介した表の作成

新しいJavaScriptファイルを作成します.前に述べた主題名を配列で追加する必要があります.次のようにします.

注意:この関数は、新しい入力フィールドの「+」ボタンをクリックすると新しいテーマ名を入力します.

上記のデータをローカルストレージに保存します(後でローカルストレージを使用してデータを保存する理由を説明します).次に、次のページに時刻表を表示し、表示する関数を作成します.
ウィンドウ.ロケーション.置換("02 . html ")/
ローカルストレージ.setitem ("time ", time )
var nclass = number ( localstorage . getItem ("nclass "))////ローカルストレージからデータを取得するには
( var i = 1 ; i <= 5 ; i++) {
HTML +="
"+日[ i - 1 ]+'/daysは週の日数を含む配列です.
( j = 1 ; j < nclass ; j++)
( j == nclass/2 )
HTML +=''被験者[ math . floor ( math . random (* Subject + length + 0 )]+'''ランチ'+'++ [数学]階( math . random (*)+ length + 0 )++'
その他
HTML +=' subject ([ math . floor ( math . random ()+ subjects . length + 0 )]+''
｝
｝
HTML +="
｝
HTML +="
ドキュメント.getElementById ("TT ")HTMLのHTML

次ページへの表の表示

次のページにテーブルを表示するには、新しいHTMLファイルを作成し、その関数名をbodyタグの負荷に追加します.
ここでローカルストレージの役割があります.以前のページからデータを取得するには、ローカルストレージに保存します.今、テーブルを作るために格納されたデータを使用できます.
それは、今すぐターミナルでnpm startに入力してアプリを起動します

ボーナス

エクスポートしたい場合は.xlsx Table 2 Excelを使用します.jsそのためには、依存関係をインストールする必要があります.ターミナルを開き、npm install bootstrap jquery popperをタイプします.JS XLSXファイル.それらを順番に含めるようにしてください(ブートストラップ、jQueryとしてTable 2 Excel )
次に、このjQuery関数を追加します.

あなたが遊んで、より多くの機能を追加することができます.このプロジェクトは以下のとおりです.