标签搜索

抖音圣诞树代码HTML

十五
2021-12-18 / 2 评论 / 973 阅读 / 正在检测是否收录...
广告
温馨提示:
本文最后更新于2022年01月17日,已超过121天没有更新,若内容或图片失效,请留言反馈。

抖音圣诞树代码HTML

今天我分享一个抖音超火热的圣诞树代码,圣诞树的颜色会随着音乐的节奏而变化; 音乐的选择有多种方式,可以自己修改下文中对应的代码,也可以上传自己喜欢的音乐进行播放;这款代码也是我从CodePen这个在线前端代码编写网站上发现的,原作者是[Dilum Sanjaya]

直接上体验地址: 圣诞树

Christmastree

使用:

index.html

  • 文章最后我会放上下载地址
  • 解压后使用HBuilderX或者上传至自己的云服务器运行打开(直接打开index.html是无法成功加载的)
  • 首页选择音乐,然后等待一段时间,此过程是在加载(本地或云端)音乐
  • 或者OR选择上传自己喜欢的音乐

配置:

  1. 音乐配置:在script.js中修改对应的音乐地址,大家可以选择自己喜欢的添加上去
    musci
  1. function loadAudio(i) {
      document.getElementById("overlay").innerHTML =
        '<div class="text-loading">加载音乐需要一段时间Please Wait...</div>

';

 const files = [
   "./music/Simon_Panrucker_-_01_-_Snowflakes_Falling_Down.mp3",
   "./music/Dott_-_01_-_This_Christmas.mp3",
   "./music/TRG_Banks_-_12_-_No_room_at_the_inn.mp3",
   "./music/Jingle_Bell_Swing.mp3",
   "./music/2.mp3"
 ];



3. index.html首页选择音乐的button按钮
![button按钮](https://cloud.dushiwu.cn/2021/12/651793084.jpg)

4. ```html
        <div id="overlay">

<ul>
                <li class="title">选择音乐 Select Music</li>
                <li><button class="btn" id="btnA" type="button">雪花飘落西蒙·潘鲁克 Snowflakes Falling Down by Simon
                        Panrucker</button></li>
                <li><button class="btn" id="btnB" type="button">Dott的这个圣诞节 This Christmas by Dott</button></li>
                <li><button class="btn" id="btnC" type="button">TRG Banks旅馆没有房间 No room at the inn by TRG Banks</button>
                </li>
                <li><button class="btn" id="btnD" type="button">Mark Smeby 的《铃儿响叮当》Jingle Bell Swing by Mark
                        Smeby</button></li>
                <li><button class="btn" id="btnD" type="button">《铃儿响叮当》</button></li>
                <li class="separator">或者 OR</li>
                <li>
                    <input type="file" id="upload" hidden />
                    <label for="upload">上传自己喜欢的音乐 Upload File</label>
                </li>
            </ul>

</div>

最后放上下载链接

下载的文件中只有一首音乐,大家可以行按照文章中的方法添音乐

10

评论 (2)

取消
  1. 头像
    求知
    Windows 10 · Google Chrome

    为什么我的打开之后就是请等待 然后等了很久也没有反应

    回复
    1. 头像
      十五 作者
      Windows 10 · Google Chrome
      @ 求知

      这个代码需要服务器才能跑起来,可以下载个HBuilderX,把代码放进去运行就OK了

      回复