Tiktok抖音最新无人互动直播项目：猜成语V4版（带语音感谢用户送礼物功能）源代码解析

最新推荐文章于 2024-07-25 20:26:51 发布

DATA5U

最新推荐文章于 2024-07-25 20:26:51 发布

阅读量3.8k

点赞数

分类专栏：小程序源码文章标签： tiktok无人直播抖音无人直播抖音猜成语猜成语源码抖音挤地铁

本文链接：https://blog.csdn.net/u010978757/article/details/125549836

版权

小程序源码专栏收录该内容

9 篇文章 5 订阅

订阅专栏

之前写的文章是关于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>

DATA5U

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
2
评论
Tiktok抖音最新无人互动直播项目：猜成语V4版（带语音感谢用户送礼物功能）源代码解析

之前写的文章是关于Tiktok抖音最新无人互动直播项目：猜成语V1版源代码解析，可以参考之前的文章https://blog.csdn.net/u010978757/article/details/124658753今天要讲的是最新的V4版本源码解析，这个版本新增了语音播报和错题显示功能、优化了体验性能。总体功能包括：排行榜（榜一、榜二、榜三）、用户刷小心心等礼物会播报感谢（播报内容：感谢老铁送来的小心心）、错误答案会显示❌。V4版本内共有800道成语题目。用户可以自行配置自己的成语题目。V4源码放到CSDN
复制链接

扫一扫