Tiktok抖音最新无人互动直播项目：猜成语V4版（带语音感谢用户送礼物功能）源代码解析
之前写的文章是关于Tiktok抖音最新无人互动直播项目：猜成语V1版源代码解析，可以参考之前的文章https://blog.csdn.net/u010978757/article/details/124658753今天要讲的是最新的V4版本源码解析，这个版本新增了语音播报和错题显示功能、优化了体验性能。总体功能包括：排行榜（榜一、榜二、榜三）、用户刷小心心等礼物会播报感谢（播报内容：感谢老铁送来的
·
之前写的文章是关于Tiktok抖音最新无人互动直播项目：猜成语V1版源代码解析，可以参考之前的文章https://blog.csdn.net/u010978757/article/details/124658753
今天要讲的是最新的V4版本源码解析，这个版本新增了语音播报和错题显示功能、优化了体验性能。
总体功能包括：排行榜（榜一、榜二、榜三）、用户刷小心心等礼物会播报感谢（播报内容：感谢老铁送来的小心心）、错误答案会显示❌。
V4版本内共有800道成语题目。用户可以自行配置自己的成语题目。
V4源码放到CSDN可下载：https://download.csdn.net/download/u010978757/85841069
代码后端采用JAVA、前端采用TypeScript、插件采用JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>看图猜成语V4</title>
<link rel="stylesheet" type="text/css" href="css/index.css" lang="scss"/>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
#bangdan {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 80px;
}
#bangdan .message {
font-size: 22px;
color: #FBF38C;
text-shadow: .2rem 0rem .5rem #FF8F42;
display: none;
}
#chengyu-img {
position: relative;
top: -100px;
width: 300px;
height: 200px;
border: 1px solid red;
}
#title {
text-align: center;
position: relative;
top: -110px;
color: #FFFFFF;
font-size: 40px;
font-weight: bold;
background-color: #FF8F42;
width: 95%;
padding: 8px;
text-shadow: .2rem 0rem .5rem #000000;
}
#answer {
z-index: 9999;
font-size: 100px;
font-weight: bolder;
color: #09090B;
position: absolute;
top: 0px;
text-shadow: .2rem 0rem .5rem #FFC730,-.2rem 0rem .5rem #FFC730,0rem .2rem .5rem #FFC730,0rem -.2rem .5rem #FFC730;
}
#refword {
position: relative;
top: -130px;
z-index: 99;
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
color: #f00;
font-size: 26px;
font-weight: bold;
}
#refword .answer {
display: inline-block;
min-width: 300px;
width: auto;
height: 35px;
line-height: 35px;
text-align: center;
font-size: 20px;
color: #223445;
font-weight: bolder;
margin: 3%;
background-color: aliceblue;
border: 1px solid #000;
}
#timeLeft {
font-size: 30px;
color: #FFFFFF;
position: relative;
top: -40px;
}
#errorAnswer {
font-size: 30px;
font-weight: bold;
color: #000;
}
.prizetitle {
font-size: 18px;
padding: 1px 6px;
background-color: #FFFFFF;
border: 1px solid #000000;
overflow-wrap: normal;
z-index: -1;
max-width: 120px;
}
</style>
</head>
<body style="padding: 0; margin: 0; width: 100%; height: 100vh; background-image: url(img/bg/bg.jpg); overflow: hidden;">
<div style="display: flex; flex-direction: column; height: 100vh; ">
<div title="上边部分" style="display: flex; flex-direction: column; ">
<div id="bangdan">
<p class="message">评论区回复答案，答对可上榜</p>
<div style="display: flex; flex-direction: row; justify-content: space-between; width: 350px;">
<div id="prize1" title="第1名" style="text-align: center; align-items: center; display: flex; flex-direction: column;">
<p class="info prizetitle">无人上榜</p>
<img src="img/head.gif" style="width: 60px; height: 60px; border-radius: 40px;" />
<p class="info animate rightnum" style="font-size: 32px; z-index: 2; font-weight: bold; color: #FFFF00; position: relative;top: -70px; right: -30px; text-shadow: .2rem 0rem .5rem #000000;">×0</p>
</div>
<div id="prize2" title="第2名" style="text-align: center; align-items: center; display: flex; flex-direction: column;">
<p class="info prizetitle">无人上榜</p>
<img src="img/head.gif" style="width: 60px; height: 60px; border-radius: 40px;" />
<p class="info animate rightnum" style="font-size: 32px; z-index: 2; font-weight: bold; color: #FBF38C; position: relative;top: -70px; right: -30px; text-shadow: .2rem 0rem .5rem #000000;">×0</p>
</div>
<div id="prize3" title="第3名" style="text-align: center; align-items: center; display: flex; flex-direction: column;">
<p class="info prizetitle">无人上榜</p>
<img src="img/head.gif" style="width: 60px; height: 60px; border-radius: 40px;" />
<p class="info animate rightnum" style="font-size: 32px; z-index: 2; font-weight: bold; color: #F6F4F2; position: relative;top: -70px; right: -30px; text-shadow: .2rem 0rem .5rem #000000;">×0</p>
</div>
</div>
</div>
<div style="width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; top: 10px;">
<div title="答案" id="answer"></div>
<p id="title">看图猜成语 你能对几个</p>
<div id="refword" title="参考文字"></div>
<div style="display: flex; flex-direction: row; justify-content: space-around;">
<img id="chengyu-img" class="animate" />
</div>
<font id="timeLeft">12 秒</font>
<font id="errorAnswer"></font>
</div>
</div>
<div title="下边部分" id="user-area" style="width: 100%; display: none;">
</div>
</div>
<div style="display: none;" id="model">
<div class="aPersonModel" style=" position: absolute; width: 60px; text-align: center; align-items: center; display: flex; flex-direction: column; flex-wrap: wrap; z-index: 999;">
<p class="info" style="background-color: #FFFFFF; font-size: 12px; width: 100px; border: 1px solid #000000; overflow-wrap: normal; position: absolute; top: -40px; z-index: -1;"></p>
<img class="headimg" style="width: 60px; height: 60px; border-radius: 60px; z-index: 9;" src="img/head.gif" />
<p class="animate rightnum" style="display: none; font-size: 32px; z-index: 2; font-weight: bold; color: #F6F4F2; z-index: 100000000; position: relative;top: -70px; right: -30px; text-shadow: .2rem 0rem .5rem #FFC730,-.2rem 0rem .5rem #FFC730,0rem .2rem .5rem #FFC730,0rem -.2rem .5rem #FFC730;">×0</p>
</div>
</div>
<div id="audio">
<audio src="audio/def.wav" id="audioDef"></audio>
<audio src="audio/welcome.wav" id="audioWelcome"></audio>
<audio src="audio/what.wav" id="audioWhat"></audio>
<audio src="audio/two.wav" id="audioTwo"></audio>
<audio src="audio/comment.wav" id="audioComment"></audio>
<audio src="audio/xiaoxinxin.wav" id="audioXiaoXinXin"></audio>
<audio src="audio/meiguihua.wav" id="audioMeiGuiHua"></audio>
<audio src="audio/pijiu.wav" id="audioPiJiu"></audio>
<audio src="audio/gift.wav" id="audioGift"></audio>
</div>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/v4.js"></script>
</body>
</html>
技术共进，成长同行——讯飞AI开发者社区
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)