2023年跨年代码(新年祝福语生成器)

前言

时光飞逝，暂停脚步，站在2022的尾巴，一转眼马上就来到了2023，回想起来，仿佛就在昨天一样。回望2022年，汗水与苦累相伴，但只要是自己喜欢的事，再累也是值得的。

千万别受了点伤，就一蹶不振，毕竟在未来还有很多大风大浪等待着你去乘风破浪！

再见，2022！您好，2023，不念过往，不惧将来！唯累过，方得闲！唯苦过，方知甜。用尽心机不如静心做事！

今天就借着新年到来的喜庆，给大家分享一个新年拜年祝福语自动生成的前端代码。

效果展示

源码

HTML：

<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>

<!-- Table for aligning pinyin and Chinese characters -->
<table>
    <tr>
        <th class="pinyin" id="pinyin1">xīn</th>
        <th class="pinyin" id="pinyin2">nián</th>
        <th class="pinyin" id="pinyin3">kuài</th>
        <th class="pinyin" id="pinyin4">lè</th>
    </tr>
    <tr>
        <td id="phraseChinese1">新</td>
        <td id="phraseChinese2">年</td>
        <td id="phraseChinese3">快</td>
        <td id="phraseChinese4">樂</td>
    </tr>
</table>

<h2 id="phraseEnglish">(Happy new year)</h2>

<button type="button" id="button">
    <p>Generate phrase</p>
</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

JavaScript：

var pinyin1 = document.getElementById("pinyin1");
var pinyin2 = document.getElementById("pinyin2");
var pinyin3 = document.getElementById("pinyin3");
var pinyin4 = document.getElementById("pinyin4");

var phraseChinese1 = document.getElementById("phraseChinese1");
var phraseChinese2 = document.getElementById("phraseChinese2");
var phraseChinese3 = document.getElementById("phraseChinese3");
var phraseChinese4 = document.getElementById("phraseChinese4");

var phraseEnglish = document.getElementById("phraseEnglish");

var button = document.getElementById("button");
var random = Math.random();

// Arrays for pinyin and Chinese characters
var p1 = [
    "xīn",
    "gōng",
    "dà",
    "wàn",
    "nián",
    "shēn",
    "xīn",
    "gōng"
];

var p2 = [
    "nián",
    "xǐ",
    "jí",
    "shì",
    "nián",
    "tǐ",
    "xiǎng",
    "hè"
];

var p3 = [
    "kuài",
    "fā",
    "dà",
    "rú",
    "yǒu",
    "jiàn",
    "shì",
    "xīn"
];

var p4 = [
    "lè",
    "cái",
    "lì",
    "yì",
    "yú",
    "kāng",
    "chéng",
    "xǐ"
];

var phrasesC1 = [
    "新",
    "恭",
    "大",
    "萬",
    "年",
    "身",
    "心",
    "恭",
    "兔",
    "青"
];

var phrasesC2 = [
    "年",
    "喜",
    "吉",
    "事",
    "年",
    "體",
    "想",
    "賀",
    "圆",
    "春"
];

var phrasesC3 = [
    "快",
    "發",
    "大",
    "如",
    "有",
    "健",
    "事",
    "新",
    "鱼",
    "永"
];

var phrasesC4 = [
    "樂",
    "財",
    "利",
    "意",
    "餘",
    "康",
    "成",
    "禧",
    "润",
    "兔"
];

// English phrases
// Translations taken from here: http://www.travelsintranslation.com/2014/01/cantonese-chinese-new-year-phrases/
var phrasesE = [
    "(Happy new year)",
    "(Congratulations on your prosperity)",
    "(Great luck and prosperity)",
    "(May 10,000 things go according to your wishes)",
    "(Every year have more than you need)",
    "(Wishing you good health)",
    "(May all your heart's desires come true)",
    "(Congratulations in the new year)",
    "(A little chubby girl)",
    "(Forever young)"
];

// Sets text content as random phrase from arrays
pinyin1.textContent = p1[Math.floor(random * p1.length)];
pinyin2.textContent = p2[Math.floor(random * p2.length)];
pinyin3.textContent = p3[Math.floor(random * p3.length)];
pinyin4.textContent = p4[Math.floor(random * p4.length)];

phraseChinese1.textContent = phrasesC1[Math.floor(random * phrasesC1.length)];
phraseChinese2.textContent = phrasesC2[Math.floor(random * phrasesC2.length)];
phraseChinese3.textContent = phrasesC3[Math.floor(random * phrasesC3.length)];
phraseChinese4.textContent = phrasesC4[Math.floor(random * phrasesC4.length)];

phraseEnglish.textContent = phrasesE[Math.floor(random * phrasesE.length)];

var onClick = function() {
    var random = Math.random();

    pinyin1.textContent = p1[Math.floor(random * p1.length)];
    pinyin2.textContent = p2[Math.floor(random * p2.length)];
    pinyin3.textContent = p3[Math.floor(random * p3.length)];
    pinyin4.textContent = p4[Math.floor(random * p4.length)];

    phraseChinese1.textContent = phrasesC1[Math.floor(random * phrasesC1.length)];
    phraseChinese2.textContent = phrasesC2[Math.floor(random * phrasesC2.length)];
    phraseChinese3.textContent = phrasesC3[Math.floor(random * phrasesC3.length)];
    phraseChinese4.textContent = phrasesC4[Math.floor(random * phrasesC4.length)];

    phraseEnglish.textContent = phrasesE[Math.floor(random * phrasesE.length)];
}

// Sets text content as random phrase when button is clicked
button.addEventListener("click", onClick);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

CSS:

body {
    background-color: #c6070c;
    color: #ffe392;
    font-family: "Lato", Helvetica, Arial, Hiragino Sans GB W6, sans-serif;
    text-align: center;
}
table {
    padding-top: 80px;
    margin: auto;
    width: 30%;
}
.pinyin {
    height: 20px;
    font-size: 1.1em;
    letter-spacing: 3px;
    font-weight: 400;
}
td {
    font-size: 8em;
    text-align: center;
    font-weight: 700;
    padding: 0px;
}
h2 {
    margin-top: 15px;
    margin-bottom: 100px;
    font-size: 3em;
    text-transform: uppercase;
    font-weight: 700;
    word-spacing: 5px;
}
p {
    font-weight: 700;
    letter-spacing: 1px;
    word-spacing: 2px;
}
button {
    background-color: #ef941a;
    color: #fffbe2;
    width: 200px;
    position: relative;
    border-radius: 5px;
    margin: 0;
    padding: 0;
    line-height: 0.5;
    cursor: pointer;
    border: none;
    outline: none;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
}
button:hover,
button:focus {
    background-color: #efa134;
}
button:active {
    transform: translate(0px, 2px);
    -webkit-transform: translate(0px, 2px);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

站在2022的末端，告诉自己，过去不回头，未来不将就！2023，加油！