前言
中秋节是中国传统的重要节日之一，通常在农历八月十五这一天庆祝。作为家庭团聚和感恩的时刻，中秋节承载着浓厚的文化内涵和美好的寓意。
中秋节的前夕，人们忙碌地准备着各种庆祝活动。家家户户都会制作精美的月饼，象征着团圆和美好的祝愿。而赏月则是中秋节最具特色的活动之一，人们会在明亮的月光下聚集在一起，共同欣赏皓月当空的美景，思念远方的亲人和朋友。
中秋节还有丰富多彩的民间传统，如嫦娥奔月的传说、猜灯谜的游戏以及舞龙舞狮等民俗表演，都让这个节日更加热闹有趣。
而中秋节也象征着人们对美好生活的向往和祈愿。无论身处何地，中秋节都是家人团聚、分享快乐的时刻。即使远离故乡，人们也会通过电话、视频等方式与亲朋好友相聚，共同庆祝这个特殊的节日。
中秋节是中华民族传统文化中的瑰宝，也是中华民族传承和弘扬中秋文化的重要时刻。让我们珍惜这个团圆的时刻，传承着中秋节的美好传统，将祝福与思念化作一轮明月，倾诉在天空之上。
在这个中秋佳节来临之际，让我们怀揣着愉悦的心情，与亲人、朋友分享快乐，共同感受这个古老而美丽的节日带给我们的温暖与魅力。祝愿大家中秋快乐，幸福团圆！
做一个最简单猜灯谜
本来想起vue或者用uniapp写一个使用h5，可是我没有一点产品概览，我发现我离开了ui图我就不会画页面了，所以做出来比较丑。（别介意）
第一步肯定是把背景图整上
整个界面也就背景图能看了哈哈哈
//因为做就是做最简单的所以直接在body上放背景图
body {
height: 100vh;
width: 100vw;
background: url('./assets/dd6fc8164b8244a8b0c85bf4c63055f2.jpeg')no-repeat center;
/* 图片来源百度 */
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
画出我们需要的标题、谜面、提示，还可以题目选择
基本上都是用的id作为选择器，是因为id现在可以不用再使用querySelector或者getElementById获取dom进行实践操作
<div class="moon_box">
<div>
<div style="width:200px ;">谜面:<div id="riddle"></div>
</div>
<div>提示:<div id="tips"></div>
</div>
<div><input type="text" id="anser"></div>
</div>
<div>
<div>题目选择:</div>
<div id="choose">
//这里面留着渲染题目顺序
</div>
</div>
</div>
就差题目切换和猜答案了
<div class="btn_list">
<div id="last" style="cursor: pointer;">上一题</div>
<div id="guest" style="cursor: pointer;">猜</div>
<div id="next" style="cursor: pointer;">下一题</div>
</div>
</div>
<div id="msg"></div>//回答后的弹窗提示
接下来就是做js的处理了
//首先定义谜面数组
let riddleList = [
{
riddle: '看着是绿，吃着是红，吐出来是黑',
tips: '打一个水果',
anser: '西瓜'
},
{
riddle: '黄皮面子，白布果子，打开白布是梳子',
tips: '打一水果',
anser: '柚子'
}, {
riddle: '薄薄一张口，能啃硬骨头。吃肉不喝汤，吃瓜不嚼豆',
tips: '打一日常用品',
anser: '菜刀'
}, {
riddle: '一人挑两小人',
tips: '猜一字',
anser: '夹'
}, {
riddle: '无底洞',
tips: '打一成语',
anser: '深不可测'
}, {
riddle: '互吻',
tips: '猜一字',
anser: '吕'
}, {
riddle: '吃进的是草，挤出的是宝。舍己为人类，功劳可不小',
tips: '打一动物名',
anser: '奶牛'
}, {
riddle: ' 四通八达',
tips: '打一成语',
anser: '头头是道'
}, {
riddle: '需要一半，留下一半',
tips: '猜一字',
anser: '雷'
}, {
riddle: '一斗米',
tips: '猜一个字',
anser: '料'
}, {
riddle: '一口吃掉牛尾巴',
tips: '猜一个字',
anser: '告'
}, {
riddle: '苗头不对',
tips: '猜一字谜底',
anser: '笛'
}, {
riddle: '身子轻如燕，飞在天地间，不怕相隔远，也能把话传',
tips: '打一动物名',
anser: '信鸽'
}, {
riddle: '鼻子朝天，嘴巴朝地。敲它一锤，惊天动地',
tips: '打一日常用品',
anser: '大钟'
}, {
riddle: '飞行员',
tips: '打一成语',
anser: '有机可乘'
}, {
riddle: '二兄弟，各自立',
tips: '猜一个字',
anser: '竞'
}, {
riddle: '只鸟，猜一个字',
tips: '字谜语答案',
anser: '鸠'
}, {
riddle: '脚像细牛脚，身像大狗重。行象后生子，须象老大人',
tips: '打一动物名',
anser: '羊'
}, {
riddle: '无脚也无手，身穿鸡皮皱。谁若碰着它，吓得连忙走',
tips: '打一动物名',
anser: '蛇'
},
]
//渲染谜面和提示操作
let chooseHtml = ``
riddleList.forEach((item, index) => {
chooseHtml += `<div class="choose_box" data-index="${index}">${index}</div>`
choose.innerHTML = chooseHtml
})
//定义全局变量 当前题目序号
let riddleIndex = 0
//初始化
function init() {
dream(riddleIndex)
}
//渲染操作
function dream(n) {
riddle.textContent = riddleList[n].riddle
tips.textContent = riddleList[n].tips
}
init()
//回答问题
guest.addEventListener('click', () => {
msg.style.display = 'block'
if (anser.value == riddleList[riddleIndex].anser) {
msg.style.background = '#26cd4c'
msg.textContent = '答对了'
} else {
msg.style.background = 'red'
msg.textContent = '答错了'
}
setTimeout(() => {
msg.style.display = 'none'
}, 2000)
})
//切换题目
let choose_box = document.querySelectorAll('.choose_box')
choose_box.forEach((i, ind) => {
i.addEventListener('click', () => {
riddleIndex = ind
dream(ind)
})
})
//上一题
last.addEventListener('click', () => {
if (riddleIndex <= 0) {
alert('没有上一题了')
return false
}
dream(--riddleIndex)
})
//下一题
next.addEventListener('click', () => {
if (riddleIndex >= riddleList.length - 1) {
alert('没有下一题了')
return false
}
dream(++riddleIndex)
})
最后原谅我这没有设计的css了
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
background: url('./assets/dd6fc8164b8244a8b0c85bf4c63055f2.jpeg')no-repeat center;
/* 图片来源百度 */
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.warp {
height: 500px;
width: 500px;
background-color: rgba(240, 248, 255, .8);
border-radius: 20px;
padding: 25px;
border: 1px solid silver;
}
.moon_box {
display: flex;
justify-content: space-around;
}
#anser {
outline: none;
border: 1px solid silver;
height: 30px;
}
#riddle {
margin-bottom: 10px;
color: #26cd4c;
}
.btn_list {
margin-top: 15px;
display: flex;
justify-content: center;
gap: 15px;
}
#choose {
display: flex;
flex-wrap: wrap;
width: 230px;
gap: 10px;
}
.choose_box {
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: azure;
margin-top: 10px;
}
#tips {
color: #fd2121
}
#msg {
position: absolute;
top: 40px;
padding: 10px 25px;
color: antiquewhite;
border-radius: 25px;
}
给你们看看丑陋的成品图
最后祝大家中秋+国庆快乐
