共计 3483 个字符，预计需要花费 9 分钟才能阅读完成。
| <!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> |
正文完
