自动播放音乐代码：
<audio id="bgmusic" src="./HeartoftheOcean.mp3" autoplay="autoplay" loop="loop" style="display: block; width: 3%; height:3%;"></audio><script type="text/javascript">function toggleSound() {var music = document.getElementById("bgmusic");//获取IDconsole.log(music);console.log(music.paused);if (music.paused) { //判读是否播放music.paused=false;music.play(); //没有就播放}}setInterval("toggleSound()",1);
首先，代码中定义了一个音频元素 <audio>，并给它设置了id为"bgmusic"，音频文件的路径为"./HeartoftheOcean.mp3"，autoplay属性为"autoplay"表示自动播放，loop属性为"loop"表示循环播放。此外，还设置了音频元素的样式为"display: block; width: 3%; height:3%;"。
接下来，代码中定义了一个toggleSound()函数，用来切换音频的播放状态。在函数内部，首先通过getElementById()方法获取到id为"bgmusic"的音频元素，并将其赋值给变量music。然后通过console.log()方法打印出music和music.paused的值，用于调试和查看音频元素的状态。
在if语句中，判断音频元素的paused属性是否为true，如果为true表示音频暂停播放，那么将paused属性设置为false，然后调用play()方法播放音频。
最后，通过setInterval()方法每隔1毫秒调用一次toggleSound()函数，实现持续检测音频的播放状态并进行相应的操作。
灯笼代码：
<style>.deng-box {position: fixed;top: -40px;right: 150px;z-index: 9999;pointer-events: none;}.deng-box1 {position: fixed;top: -30px;right: 10px;z-index: 9999;pointer-events: none;}.deng-box2 {position: fixed;top: -40px;left: 150px;z-index: 9999;pointer-events: none;}.deng-box3 {position: fixed;top: -30px;left: 10px;z-index: 9999;pointer-events: none;}.deng-box1 .deng,.deng-box3 .deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216, 0, 15, .8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 5s infinite ease-in-out;box-shadow: -5px 5px 30px 4px #fc903d;}.deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216, 0, 15, .8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 3s infinite ease-in-out;box-shadow: -5px 5px 50px 4px #fa6c00;}.deng-a {width: 100px;height: 90px;background: #d8000f;background: rgba(216, 0, 15, .1);margin: 12px 8px 8px 8px;border-radius: 50% 50%;border: 2px solid #dc8f03;}.deng-b {width: 45px;height: 90px;background: #d8000f;background: rgba(216, 0, 15, .1);margin: -4px 8px 8px 26px;border-radius: 50% 50%;border: 2px solid #dc8f03;}.xian {position: absolute;top: -20px;left: 60px;width: 2px;height: 20px;background: #dc8f03;}.shui-a {position: relative;width: 5px;height: 20px;margin: -5px 0 0 59px;-webkit-animation: swing 4s infinite ease-in-out;-webkit-transform-origin: 50% -45px;background: orange;border-radius: 0 0 5px 5px;}.shui-b {position: absolute;top: 14px;left: -2px;width: 10px;height: 10px;background: #dc8f03;border-radius: 50%;}.shui-c {position: absolute;top: 18px;left: -2px;width: 10px;height: 35px;background: orange;border-radius: 0 0 0 5px;}.deng:before {position: absolute;top: -7px;left: 29px;height: 12px;width: 60px;content: " ";display: block;z-index: 999;border-radius: 5px 5px 0 0;border: solid 1px #dc8f03;background: orange;background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);}.deng:after {position: absolute;bottom: -7px;left: 10px;height: 12px;width: 60px;content: " ";display: block;margin-left: 20px;border-radius: 0 0 5px 5px;border: solid 1px #dc8f03;background: orange;background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);}.deng-t {font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif;font-size: 3.2rem;color: #dc8f03;font-weight: 700;line-height: 85px;text-align: center;}.night .deng-box,.night .deng-box1,.night .deng-t {background: 0 0 !important;}@-moz-keyframes swing {0% {-moz-transform: rotate(-10deg);}50% {-moz-transform: rotate(10deg);}100% {-moz-transform: rotate(-10deg);}}@-webkit-keyframes swing {0% {-webkit-transform: rotate(-10deg);}50% {-webkit-transform: rotate(10deg);}100% {-webkit-transform: rotate(-10deg);}}</style><div class="deng-box"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">快</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box1"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">乐</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box2"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">年</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box3"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">新</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><style>.page-template-user-sign {min-height: 500px;}.sign-page {min-height: 500px;padding-top: 70px;}.sign-row {height: 100%;}.sign-page .sign {width: 350px;}.sign-col {height: 100%;display: flex;justify-content: center;align-items: center;}.sign-col [] {display: none;}</style><script src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/yinghua/yinghua.js"></script>
可以将代码可以放在HTML文件的<head>标签内的<style>标签中，或者放在<body>标签内的任何位置。
素材背景图：
运行效果：
后台回复2024新年快乐获取文章素材以及完整代码
原文始发于微信公众号（蓝胖子之家）：“为你的网站增添新年喜庆氛围——2024新年快乐灯笼HTML代码”
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论