<canvas id="fireworks"></canvas>

<table>
<tr>
<th class="pinyin" id="pinyin1">xīn</th>
<th class="pinyin" id="pinyin2">chū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>

<div id="volumeControl">🔊</div>

<script>
// 获取文字元素
const pinyin1 = document.getElementById("pinyin1"),
      pinyin2 = document.getElementById("pinyin2"),
      pinyin3 = document.getElementById("pinyin3"),
      pinyin4 = document.getElementById("pinyin4"),
      jeskson1 = document.getElementById("jeskson1"),
      jeskson2 = document.getElementById("jeskson2"),
      jeskson3 = document.getElementById("jeskson3"),
      jeskson4 = document.getElementById("jeskson4"),
      dadaEnglish = document.getElementById("dadaEnglish");

const p1 = ["xīn","gōng","dà","wàn","nián","shēn","xīn","gōng"];
const p2 = ["chūn","xǐ","jí","shì","nián","tǐ","xiǎng","hè"];
const p3 = ["kuài","fā","dà","rú","yǒu","jiàn","shì","xīn"];
const p4 = ["lè","cái","lì","yì","yú","kāng","chéng","xǐ"];
const dadasC1 = ["新","恭","大","萬","年","身","心","恭"];
const dadasC2 = ["春","喜","吉","事","年","體","想","賀"];
const dadasC3 = ["快","發","大","如","有","健","事","新"];
const dadasC4 = ["樂","財","利","意","餘","康","成","禧"];
const dadasE = ["(新春快乐)","(八方來財)","(祝贺你的成功)","(吉星高照)","(岁岁平安，年年有余)","(身体健康，平安喜乐)","(前程似錦，美夢成真)","(愿你心想事成)","(謝謝這一年的互相照應)","(愿你永远不死)","(恭贺新禧)"];

function randomItem(arr){return arr[Math.floor(Math.random()*arr.length)];}
function updateBlessing(){
    [pinyin1,pinyin2,pinyin3,pinyin4].forEach((el,i)=>{
        el.textContent = randomItem([p1,p2,p3,p4][i]);
        el.classList.remove("fade"); void el.offsetWidth; el.classList.add("fade");
    });
    [jeskson1, jeskson2, jeskson3, jeskson4].forEach((el,i)=>{
        el.textContent = randomItem([dadasC1,dadasC2,dadasC3,dadasC4][i]);
        el.classList.remove("fade"); void el.offsetWidth; el.classList.add("fade");
    });
    dadaEnglish.textContent = randomItem(dadasE);
    dadaEnglish.classList.remove("fade"); void dadaEnglish.offsetWidth; dadaEnglish.classList.add("fade");
}

document.addEventListener("click", updateBlessing);