js+css实现新年快乐随机祝福文字代码
代码语言:html
所属分类:其他
代码描述:js+css实现新年快乐随机祝福文字代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> 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); } </style> </head> <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="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> <script > 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ǐ", &quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0