Tiktok抖音最新无人互动直播项目：猜成语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>

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

2023 抖音最新无人直播变现全国重名查询项目
抖音目前刚火的快速变现项目全国重名查询开播需求一部直播手机一台电脑配置不限越高越好如何选择开播模式 1:0粉开播(手机)模式适用于粉丝不到1000并且没有直播伴侣开播权限的账号 2:千粉开播 ...
【最近抖音上元宇宙虚拟项目猜成语，互动无人直播游戏挤地铁】
最近抖音上元宇宙虚拟项目猜成语,直播游戏,用户进入直播间可以发送弹幕互动,模拟真实多人互动场景,可能因为疫情大家憋在家无聊,直播间人数有5000多人,抖音一直不鼓励无人直播,没想到在抖音做猜成语直播居 ...
最新抖音简单无人直播教程
在目前的市场行情下,如果是新手项目应该做轻松的,尽可能地做大流量项目.不要碰产品,要尽可能保持灵活性,才能适应这个多变的市场.无人直播具备所有这些特点,适合大家研究无人直播! 下载地址:最新价值198 ...
电商直播抖音短视频运营创业项目商业计划书
电商直播抖音短视频运营创业项目商业计划书何挖掘游戏的付费点?为了方便大家,为了方便你理解,我们还是从工作中比较常见的场景开始.老大觉得游戏里面的付费点太少了,让小王去调研竞品游戏,找自己的游戏还能挖 ...
服务器升级中暂不可修改怎么回事,抖音服务器升级中，暂不支持本地区开播抖音怎么在法国直播？...
抖音服务器升级中,暂不支持本地区开播抖音怎么在法国直播? 除了餐饮,腾讯自主研发的各种跨界开发节目也无人问津.至于年初腾讯app项目和资源,还没有整体发布,不过,神似的行业信息也有公布.这其中对爆红的 ...
揭秘抖音最新玩法“抖音两元店”背后的套路。丨国仁网络资讯
既然选择了抖音直播这个行业,就要对直播这个行业有一份新的认知.你要把它当成你的一份职业,一份可以养活自己的工作.既然是工作就要全身心的投入进去,学习和总结做直播的技巧和经验.还有就是要有自己的定位 ...
《抖音小店无货源项目玩法特训》线上第九期
Hi 大家好我是醒醒, 好久不见,着实让人想念 <抖音小店无货源项目玩法特训>线上第九期原本计划着三月份安排一部分学员线下来公司坐坐,因为很多小伙伴已经认识一两年了,都是老伙计了,到了 ...
抖音运营如何提升直播间留存率（短视频老司机为您分享5个要素）
抖音直播如今可以说如火如荼,这些主播的带货能力令人惊叹,也激发了更多人想要在抖音直播中分一杯羹的想法,然而却发现不知从何下手,所以今天小编要分享的就是抖音直播的运营流程和技巧. 抖音运营如何提升直播间 ...
抖音快手短视频直播带货法则
不论是以抖音快手平台为代表的短视频平台,还是长视频平台,选择平台和选择生态都很重要.将电商与短视频内容结合,结合平台生态特点,实现直播带货营收变现才是最重要的.由于抖音快手带有极强的人的属性,如何持续 ...

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

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

最新文章

热门文章