AngularJSで西暦・和暦・年齢・干支を表に出力する方法について入門者向けにまとめました。
## 【表】西暦・和暦・年齢・干支
AngularJSで西暦・和暦・年齢・干支を表に出力します。
import { Component } from '@angular/core';
// 西暦を干支に変換
function yearToEto(year: number): string {
var arr1 = new Array("庚","辛","壬","癸","甲","乙","丙","丁","戊","己");
var arr2 = new Array("申","酉","戌","亥","子","丑","寅","卯","辰","巳","午","未");
var arr3 = new Array("猿","鳥","犬","猪","鼠","牛","虎","兎","竜","蛇","馬","羊");
// return arr1[year % 10] + "・" + arr2[year % 12] + "(" + arr3[year % 12] + ")";
return arr2[year % 12];// + arr3[year % 12];
};
// 西暦を干支に変換
function yearToEtoId(year: number): string {
var arr = new Array("saru","tori","inu","i","ne","ushi","tora","u","tatsu","mi","uma","hitsuji");
return arr[year % 12];
};
// 西暦を和暦に変換
function yearTowareki(year: number): string {
var wareki = "エラー";
if (year > 2018)
wareki = "未定" + (year - 2018);
else if (year > 1988)
wareki = "平成" + (year - 1988);
else if (year > 1925)
wareki = "昭和" + (year - 1925);
else if (year > 1911)
wareki = "大正" + (year - 1911);
else
wareki = "明治" + (year - 1867);
return wareki;
};
// 西暦を干支に変換
function ageToEvent(age: number): string {
var events = {0:"今年",
7:"小学入学",
13:"中学入学",
16:"高校入学",
19:"大学入学",
20:"成人,弱冠",
24:"厄年(男)",
27:"アラサー",
30:"而立",
32:"厄年(女)",
36:"厄年(女)",
40:"初老,不惑",
41:"厄年(男)",
50:"中老,知命",
60:"還暦,厄年",
64:"破瓜",
65:"定年退職",
70:"杖国",
77:"喜寿",
80:"傘寿,杖朝",
88:"米寿",
90:"卒寿",
98:"白寿",
100:"百賀",
108:"茶寿",
111:"皇寿",
112:"珍寿",
120:"大還暦"}
if (age in events) {
return events日付未入力;
}
else{
return "";
}
};
// 表の作成
function setTable(startYear: number, endYear: number): { any: any[]; } {
// 2次元配列の宣言
var data = {any:[]};
var i = 0;
var date = new Date();
var year = date.getFullYear();
for(i=startYear; i < endYear+1; i++){
data.any.push([i, yearTowareki(i), year-i +"歳", yearToEto(i), ageToEvent(year-i)]);
}
return data;
};
// コンポーネントの構成情報を定義するデコレータ
@Component({
// コンポーネントの適用先を表すセレクター式
selector: 'app-root',
// コンポーネントに適用するスタイルシート
styleUrls: ['./app.component.css'],
// コンポーネントに適用するテンプレート(外部ファイルから読み込み)
templateUrl: './app.component.html',
})
export class AppComponent {
private data: { any: any[]; };
constructor() {
this.data = setTable(1868, 2028);
}
};
■app.component.html
<table> <tr> <th>西暦</th> <th>和暦</th> <th>年齢</th> <th>干支</th> <th>人生暦</th> </tr> <ng-container *ngFor="let row of data.any; let i = index"> <tr> <ng-container *ngFor="let col of row; let j = index"> <td id="{{col}}" class="{{col}}">{{col}}</td> </ng-container> </tr> </ng-container> </table>
■app.component.css
body{ background:#222; } table{ text-align:center; width:100%; border-collapse: collapse; } td, th{ padding-top:7px; padding-bottom:7px; /* font-size:40px; */ font-size:100%; border: 2px #000 solid; border-collapse: collapse; } table th{ color:#eee; background-color: rgb(78, 54, 24); } /* 偶数行の背景色変更 */ tr:nth-child(2n) { background: rgb(226, 239, 209); } /* 奇数行の背景色変更 */ tr:nth-child(2n+1) { background: rgb(238, 238, 238); } .申,.酉,.戌,.亥,.子,.丑,.寅,.卯,.辰,.巳,.午,.未{ padding-left:16px; font-weight: bold; } .申,.酉,.戌,.亥,.子,.丑,.寅,.卯,.辰,.巳,.午,.未{ /* background-image: url(../img/ne.jpg); */ background-repeat: no-repeat; text-align:right; background-size:32px; background-position: left center; } /* .丑{ background-image: url(../img/ushi.jpg); } .寅{ background-image: url(../img/tora.jpg); } .卯{ background-image: url(../img/u.jpg); } .辰{ background-image: url(../img/tatsu.jpg); } .巳{ background-image: url(../img/mi.jpg); } .午{ background-image: url(../img/uma.jpg); } .未{ background-image: url(../img/hitsuji.jpg); } .申{ background-image: url(../img/saru.jpg); } .酉{ background-image: url(../img/tori.jpg); } .戌{ background-image: url(../img/inu.jpg); } .亥{ background-image: url(../img/i.jpg); } */
■実行結果
- | 参考文献・関連記事 |
---|---|
参考 | ■【TypeScript入門】使い方まとめ |
参考 | ■【AngularJS入門】基礎とサンプル集 |
関連 | ■【Ionic入門】Android・iPhoneアプリ開発編 |
コメント