前言

时光飞逝，暂停脚步，站在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>

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);

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);
}

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

2023年跨年代码(新年祝福语生成器)相关推荐

html5新年主题,HTML CSS3农历新年祝福语生成器
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var pinyin1 = document.getElementById("pinyin1&qu ...
Python创作新年祝福语
新春将至,笔者模仿"狗屁不通文章生成器",创作了一个简易的新年祝福语自动生成器.希望各位看官喜欢! 代码 import randomdef generateWish1():list ...
(三款)Html5+Css+JavaScript实现2023年跨年代码烟花设计
简介一共是三款烟花设计 Html5+Css+JavaScript实现2023年跨年代码烟花设计主题第一款 (有雪花设计没有音乐) index.html <!DOCTYPE html> ...
Python格式化新年祝福语
Python格式化新年祝福语仅供娱乐,哈哈哈哈哈哈. 步骤 0.从网上找到祝福语. 1.然后用Python进行格式化qwq. 2.打印并保存.这里我保存为字符串. a.男孩子 def test1() ...
祝学校计算机系的新年贺词,新年祝福语：学校新年贺词祝福短信
新年祝福语:学校新年贺词祝福短信以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 祝新年快乐,吉祥如意,健健康康,美美丽丽 ...
给python点颜色青少年学编程_给老师的新年祝福语
给老师的新年祝福语老师是每个学生的恩人,有一个好老师才会有很多的好学生.新年到了,给老师送去美好的祝福吧,下面给大家分享了给老师的新年祝福语,一起来看看吧! 1.亲爱的老师们,您们辛苦了,新的一年里 ...
html5 2019新年祝福页面,2019最新创意暖心新年祝福语简单的祝福 - 中国万年历
摘要 2019最新创意暖心新年祝福语简单的祝福中国万年历是介绍中国传统节日以及世界节日大全,包含各种节日的由来,习俗,节日祝福语等. 伴随着放假的声音,春节离我们越来越近,不管是朋友圈还是空间都开 ...
2008精选新年祝福语
--新年祝福语-- 1. 风雨送春归,飞雪迎福到,已收短信千万封,犹有人未到.阿福不争先,只等吉时报,待到祈愿变现时,俺随鞭炮笑. 2. 在关爱中让友情更深,在牵挂中让亲情 ...
用计算机拜年祝福语,新年祝福语：拜年用语
新年祝福语:拜年用语以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 1.一年一度,新春伊始,恭祝:大财小财意外财,财源滚 ...

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

新年祝福语生成器

前言

效果展示

源码

2023年跨年代码(新年祝福语生成器)相关推荐

最新文章

热门文章