<!DOCTYPE html>
<html>
<head>
<title>Jeskson 达达前端 - 新年快乐 </title>
</head>
<style type="text/css">
body {
/* 背景色彩 */
background-color: #c6070c;
/* 字体色彩 */
color: #ffe392;
/* 文字居中 */
text-align: center;
}
table {
padding-top: 100px;
/* 居中 */
margin: auto;
/* 宽比例 */
width: 50%;
}
.pinyin {
height: 20px;
/* 字母间距 */
letter-spacing: 3px;
font-weight: 400;
}
td {
font-size: 158px;
text-align: center;
font-weight: 700;
padding: 0px;
}
h2 {
margin-top: 15px;
margin-bottom: 100px;
font-size: 38px;
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: 16px;
text-transform: uppercase;
letter-spacing: 1px;
}
button:hover,
button:focus {background-color: #efa134;}
button:active {transform: translate(0px, 2px);
-webkit-transform: translate(0px, 2px);
}
</style>
<body>
<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="jeskson1"> 新 </td>
<td id="jeskson2"> 年 </td>
<td id="jeskson3"> 快 </td>
<td id="jeskson4"> 樂 </td>
</tr>
</table>
<h2 id="dadaEnglish">(新年快乐)</h2>
<button type="button" id="button">
<p> 新年现金 </p>
</button>
<script type="text/javascript">
var pinyin1 = document.getElementById("pinyin1");
var pinyin2 = document.getElementById("pinyin2");
var pinyin3 = document.getElementById("pinyin3");
var pinyin4 = document.getElementById("pinyin4");
var jeskson1 = document.getElementById("jeskson1");
var jeskson2 = document.getElementById("jeskson2");
var jeskson3 = document.getElementById("jeskson3");
var jeskson4 = document.getElementById("jeskson4");
var dadaEnglish = document.getElementById("dadaEnglish");
var button = document.getElementById("button");
var random = Math.random();
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 dadasC1 = [
"新",
"恭",
"大",
"萬",
"年",
"身",
"心",
"恭"
];
var dadasC2 = [
"年",
"喜",
"吉",
"事",
"年",
"體",
"想",
"賀"
];
var dadasC3 = [
"快",
"發",
"大",
"如",
"有",
"健",
"事",
"新"
];
var dadasC4 = [
"樂",
"財",
"利",
"意",
"餘",
"康",
"成",
"禧"
];
var dadasE = ["( 新年快乐)",
"(恭喜你的胜利)",
"(吉星高照)",
"(愿一万件事都按你的欲望去做吗)",
"(每一年都比你须要的多)",
"(祝您身体健康)",
"(愿你心想事成)",
"(恭贺新禧)"
];
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)];
jeskson1.textContent = dadasC1[Math.floor(random * dadasC1.length)];
jeskson2.textContent = dadasC2[Math.floor(random * dadasC2.length)];
jeskson3.textContent = dadasC3[Math.floor(random * dadasC3.length)];
jeskson4.textContent = dadasC4[Math.floor(random * dadasC4.length)];
dadaEnglish.textContent = dadasE[Math.floor(random * dadasE.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)];
jeskson1.textContent = dadasC1[Math.floor(random * dadasC1.length)];
jeskson2.textContent = dadasC2[Math.floor(random * dadasC2.length)];
jeskson3.textContent = dadasC3[Math.floor(random * dadasC3.length)];
jeskson4.textContent = dadasC4[Math.floor(random * dadasC4.length)];
dadaEnglish.textContent = dadasE[Math.floor(random * dadasE.length)];
}
button.addEventListener("click", onClick);
</script>
</body>
</html>