The topic of this article: Programmer's Mid-Autumn Festival
Creation date: 2020.08.27
Personal homepage: KinHKin's blog_CSDN blog-vue, performance optimization, front-end development specification field blogger
2020.9.10 is a rare traditional festival, Mid-Autumn Festival and Teacher's Day are on the same day, this probability is very rare. By calculation, the same day of the Mid-Autumn Festival and National Day occurs only 4 times in the 21st century. The last time was in 2001, and the other two were in 2031 and 2077. The Mid-Autumn Festival is fixed on the fifteenth day of the eighth month of the lunar calendar every year, but its date in the Gregorian calendar is very irregular, and the reason for this change is the "leap month".
Origin of Mid-Autumn Festival
The Mid-Autumn Festival is one of the traditional folk festivals in China. There are many theories about the origin of the festival. One is that it originated from the sacrificial activities of ancient emperors. "Book of Rites" records: "The Son of Heaven rises to the sun in the spring, and the moon at the autumn evening", the evening moon is the sacrifice to the moon, indicating that as early as the Spring and Autumn Period, the emperors have already begun to worship the moon and worship the moon. Later, noble officials and scholars followed suit and gradually spread to the people. Second , the origin of the Mid-Autumn Festival is related to agricultural production. During the Mid-Autumn Festival in August, the crops are basically mature, and farmers use the "Mid-Autumn Festival" as a festival to celebrate the harvest. Some historians also pointed out that the origin of the Mid-Autumn Festival should be on August 15, the thirteenth year of the Great Yee at the end of the Sui Dynasty. On this day, Tang Jun, Pei Ji, saw the moon and successfully invented moon cakes as military food, successfully solving the problem of insufficient food in the military. Since then, people have designated August 15 as the Mid-Autumn Festival as a commemoration.
Mid-Autumn Festival Customs
The customs of the Mid-Autumn Festival are: listening to incense, walking on the moon, worshiping ancestors, lighting lanterns, offering sacrifices to the moon, guessing riddles, playing with money, watching the moon, chasing the moon, vertical Mid-Autumn Festival, begging for the moon to shine on the moon, watching tides, eating moon cakes, and burning incense sticks , Play with Rabbit Lord, play with lanterns, tie lanterns, dance fire dragons, throw Papa to recruit relatives, steal melons and pray for seeds, drink sweet-scented osmanthus wine, eat snails, appreciate sweet-scented osmanthus, etc.
Programmer Mid-Autumn Festival
Developed with vue, combined with element ui to create happy Mid-Autumn Festival activities, including two parts: memory corridor and guessing lantern riddles, you can upload custom pictures, and the part of guessing lantern riddles is optimized to page up and down for interaction.
Preview: Mobile
The preview effect on the mobile phone is to use the marquee in the memory corridor. When the space in the width direction of the page is free, but the space in the height direction is lacking, the card style can be used. The code is as follows:
<h1>记忆走廊</h1>
<el-carousel :interval="2000" type="card" height="300px">
<el-carousel-item v-for="item, index in list" :key="'i' + index">
<img :src="item.image" class="medium" @click="onImageBtnClick(item)" />
</el-carousel-item>
</el-carousel>Click on the picture to jump.
Guessing lantern riddles is to use json data with el-collapse component to display the first example, and the subsequent content is to click the page turning operation. This design is to facilitate users to concentrate and use this function effectively.
code show as below:
<h1>猜灯谜</h1>
<el-collapse v-model="activeName" accordion @change="colloChange">
<div class="collapse-class" v-for="(item, index) in secry" :key="'s' + index">
<el-collapse-item v-if="index == active" :name="index + 1">
<template #title>
<div class="title-class">
<div>
{
{ (index ? '' : '示例：')
+ item.title
}}
</div>
<div class="anser" v-if="index > 0">点击展开查看答案｜<span v-if="timer">{
{ timer }}s后</span>可以跳转下一题</div>
</div>
</template>
<div>{
{ item.answer }}</div>
<div>{
{ item.des }}</div>
</el-collapse-item>
</div>
</el-collapse>Cooperate with the page turning operation to facilitate the simplicity of the subsequent guessing pages and the convenience of interaction:
<el-button @click="active--; timer = 0" :disabled="isDisPre()">上一个</el-button>
<el-button type="primary" @click="nextclick" :disabled="isDis()">
下一个
</el-button>Guess the next question preview:
The effect of guessing lantern riddles is simple, not fancy, easy for users to operate online, and the 30-second countdown can help users think. The 30-second countdown controls whether the next question can be viewed, and the user can expand to view the answer at any time, giving the user at least 30 seconds to think about a question, which is a consideration for system security.
The countdown function is as follows:
count() {
let time = this.timer
let timerId = setInterval(() => {
time--
if (time == 0) {
this.timer = 0
clearInterval(timerId)
}
this.timer = time
}, 1000)
},Control of page up and down function:
isDisPre() {
if (this.active == 0 || this.timer) {
return true
} else {
return false
}
},
isDis() {
if (this.active == this.secry.length - 1 || (this.active > 0 && this.timer)) {
return true
} else {
return false
}
},
nextclick() {
this.active++; this.timer = 30; this.count()
},This Mid-Autumn Festival interactive project is developed using the front-end vue+element component with timer and json data format. The content is relatively simple and easy to use. It is suitable for basic students to learn and needs to send the complete code privately. The code will be placed in the github repository later.
Please look forward to it, welcome to like and comment, it is not easy to create, a lot of support, thank you for watching.