HTML CSS3农历新年祝福语生成器

Lunar/Chinese New Year Phrase Generator 很有趣的一个作品，可在中国节日使用。

css3, phase

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 7007
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

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

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

HTML

Lunar/Chinese New Year Phrase Generator 很有趣的一个作品，可在中国节日使用。

css3, phase

编辑器支持Emmet

快捷键

Lunar/Chinese New Year Phrase Generator 很有趣的一个作品，可在中国节日使用。

css3, phase

HTML5 CSS3新奇的响应式皂形网格布局页面模板 | mask-image使用示例

使用HTML5 CSS3构建的Chrome浏览器标题栏仿真界面

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：