|
|
发表于 2024-6-15 14:31:56
|
显示全部楼层
IP:亚太地区
快乐的节日代码：<style>
#bfqbg {margin: 100px -20px;
width: 960px;
height: 120px;
background:#000 url()no-repeat 0px -200px/cover;
border-radius:2px;
position: relative;overflow: hidden;
z-index: 123;
}
#tp{position:absolute;height:106px;width:106px;bottom:8px; left:8px;}
#tp img{height: 100%;width: 100%;}
#dt{position: absolute;bottom:100px; left:10%;width: 90%;height: 120px;opacity: .4;}
#dt img{height: 500px;width: 100%;}
#mplayer {z-index: 100;position:absolute;bottom:10px; left:80px;width:28px;height:28px;}
#tmsg {position: absolute;z-index: 91;
font: normal 12px sans-serif;
color: #ffffff;
bottom:10px; right:20px}
#prog {position: absolute;z-index: 91;
width: 730px;
height: 1%;
cursor: pointer;
bottom:14px;left:120px;
color: #cccccc;
}
#bt{ width: 500px; height: 50px; color: #ffffff; position: absolute; left:120px;top:10px; font-size: 16px; font-family:仿宋;z-index: 21; }
</style>
<div id="bfqbg">
<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/65f90c1f9f345e8d03991f15.gif" /></div>
<img id="tp" src="https://sirius.130014.xyz/2024/05/31/u2429853991957157171fm253fmtautoapp138fJPEG.webp.th.jpg" alt="" />
<div id="bt">快乐的节日-小蓓蕾组合</div>
<div ><img id="mplayer" src="http://image.hnol.net/c/2022-02/01/23/202202012325163161-5769293.png" alt="" /></div>
<div id="tmsg">00:00 /00:00</div>
<div id="prog"></div>
<div class="lrc">
<ul id="ullrc">
</ul>
</div>
</div>
<audio id="aud" src="https://file.uhsea.com/2405/73a93e671eabf4207129a8b927b141620P.mp3" loop autoplay></audio>
<style type="text/css">
.lrc{z-index: 20;
width: 700px;bottom:-18px; left:210px;
height: 100px;
overflow: hidden;
display: block;position: absolute;
margin: 0 auto;}
.lrc #ullrc{
width: 700px;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:仿宋;
font-size: 0px;
color: #000078;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 25px;
color: #ffffff;}
</style>
<script >
var lrc = `[00:00.000]快乐的节日 - 小蓓蕾组合
[00:06.06]小鸟在前面带路
[00:08.73]风啊吹向我们
[00:11.60]我们像春天一样
[00:14.40]来到花园里 来到草地上
[00:18.43]鲜艳的红领巾
[00:21.66]美丽的衣裳
[00:24.10]像许多花儿开放
[00:27.79]跳啊跳啊跳啊
[00:29.72]跳啊跳啊跳啊
[00:31.58]亲爱的叔叔阿姨们
[00:34.56]同我们一起过呀过这快乐的节日
[00:39.56]
[00:44.18]花儿向我们点头
[00:47.16]白杨树哗啦啦地响
[00:50.24]它们同美丽的小鸟
[00:53.11]向我们祝贺 向我们唱歌
[00:57.09]它们都说世界上
[01:00.10]有我们就更美丽
[01:03.10]世界上有我们就更美丽
[01:06.89]跳啊跳啊跳啊
[01:08.79]跳啊跳啊跳啊
[01:10.75]亲爱的叔叔阿姨们
[01:13.73]同我们一起过呀过这快乐的节日
[01:18.63]
[01:23.48]感谢亲爱的祖国
[01:26.20]让我们自由地成长
[01:29.24]我们像小鸟一样
[01:32.18]等身上的羽毛长得丰满
[01:36.11]就勇敢地向着高空去飞翔
[01:42.11]飞向我们的理想
[01:45.97]跳啊跳啊跳啊
[01:47.90]跳啊跳啊跳啊
[01:49.88]亲爱的叔叔阿姨们
[01:52.81]同我们一起过呀过这快乐的节日
[01:58.62]
[01:59.74]
`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts[index] = getLrcObj(parts[index]);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts[0].substr(1);
var timeParts = time.split(":");
var seconds = +timeParts[1];
var min = +timeParts[0];
seconds = min * 60 + seconds;
var words = twoParts[1];
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray[index].words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 70, lrc_ul_height = 60;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");}
$("ullrc").children[index].classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray[index].seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
(function() {
var aud = document.getElementById("aud");
var img = document.getElementById("mplayer");
var image= document.getElementById("Img");
img.onclick = function() {
if (aud.paused) {
aud.play();image.play();
} else {
aud.pause();image.stop();
}
}
aud.addEventListener("play", function (e) {
img.src="http://image.hnol.net/c/2022-02/01/23/202202012325163161-5769293.png";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://image.hnol.net/c/2022-02/01/23/202202012327333961-5769293.png";
}, false);})();
/*进度条 进度时间*/
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gra**nt(90deg, #00ff00, #00ff00, #00ff00 ' + aud.currentTime / aud.duration * 100 + '%, #cccccc 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' / ' + toMin(aud.duration);
});
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
};
/*结束*/
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
var image= document.getElementById("Img");
</script>
梦想起航的代码：<style>
#bfqbg {margin: 100px -20px;
width: 960px;
height: 120px;
background:#000 url()no-repeat 0px -200px/cover;
border-radius:2px;
position: relative;overflow: hidden;
z-index: 123;
}
#tp{position:absolute;height:106px;width:106px;bottom:8px; left:8px;}
#tp img{height: 100%;width: 100%;}
#dt{position: absolute;bottom:100px; left:10%;width: 90%;height: 120px;opacity: .4;}
#dt img{height: 500px;width: 100%;}
#mplayer {z-index: 100;position:absolute;bottom:10px; left:80px;width:28px;height:28px;}
#tmsg {position: absolute;z-index: 91;
font: normal 12px sans-serif;
color: #ffffff;
bottom:10px; right:20px}
#prog {position: absolute;z-index: 91;
width: 730px;
height: 1%;
cursor: pointer;
bottom:14px;left:120px;
color: #cccccc;
}
#bt{ width: 500px; height: 50px; color: #ffffff; position: absolute; left:120px;top:10px; font-size: 16px; font-family:仿宋;z-index: 21; }
</style>
<div id="bfqbg">
<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/65f90c1f9f345e8d03991f15.gif" /></div>
<img id="tp" src="https://sirius.130014.xyz/2024/06/04/66573747d9c307b7e96a2154.gif" alt="" />
<div id="bt">梦想起航-少儿童星</div>
<div ><img id="mplayer" src="http://image.hnol.net/c/2022-02/01/23/202202012325163161-5769293.png" alt="" /></div>
<div id="tmsg">00:00 /00:00</div>
<div id="prog"></div>
<div class="lrc">
<ul id="ullrc">
</ul>
</div>
</div>
<audio id="aud" src="https://www.kumeiwp.com/wj/217004/2024/05/31/377a9f09c7c80316f2096e7e9f766b0f.mp3" loop autoplay></audio>
<style type="text/css">
.lrc{z-index: 20;
width: 700px;bottom:-18px; left:210px;
height: 100px;
overflow: hidden;
display: block;position: absolute;
margin: 0 auto;}
.lrc #ullrc{
width: 700px;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:仿宋;
font-size: 0px;
color: #000078;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 25px;
color: #ffffff;}
</style>
<script >
var lrc = `[00:00.00]梦想起航 - 少儿童星
[00:08.34]词：小珂
[00:16.27]曲：继伟
[00:24.27]LRC：老谟深虑
[00:34.10]我奔跑在希望的田野上
[00:39.99]到处充满灿烂的阳光
[00:45.94]我要分享每一个愿望
[00:52.41]在每个有爱的地方
[00:58.65]我飞翔在蓝色的天空上
[01:04.63]到处都是仰望的目光
[01:10.72]我要做的很棒很棒
[01:13.48]在每个人生考场上
[01:20.01]我不愿做温室里的花朵
[01:26.04]我要像大人们一样坚强
[01:32.65]遇到困难勇敢面对
[01:38.32]不让泪水流过我的脸庞
[01:44.66]我不愿做笼子里的小鸟
[01:50.67]我要像海鸥一样翱翔
[01:57.15]穿过风雨越过风浪
[02:02.93]展开翅膀朝着梦想起航
[02:15.83]我奔跑在希望的田野上
[02:21.28]到处充满灿烂的阳光
[02:27.57]我要分享每一个愿望
[02:33.78]在每个有爱的地方
[02:39.89]我飞翔在蓝色的天空上
[02:45.98]到处都是仰望的目光
[02:52.25]我要做的很棒很棒
[02:54.95]在每个人生考场上
[03:01.32]我不愿做温室里的花朵
[03:07.63]我要像大人们一样坚强
[03:13.96]遇到困难勇敢面对
[03:19.81]不让泪水流过我的脸庞
[03:26.27]我不愿做笼子里的小鸟
[03:32.21]我要像海鸥一样翱翔
[03:38.54]穿过风雨越过风浪
[03:44.43]展开翅膀朝着梦想起航
[04:09.39]我不愿做温室里的花朵
[04:15.31]我要像大人们一样坚强
[04:21.75]遇到困难勇敢面对
[04:27.52]不让泪水流过我的脸庞
[04:33.87]我不愿做笼子里的小鸟
[04:39.91]我要像海鸥一样翱翔
[04:46.47]穿过风雨越过风浪
[04:52.14]展开翅膀朝着梦想起航
`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts[index] = getLrcObj(parts[index]);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts[0].substr(1);
var timeParts = time.split(":");
var seconds = +timeParts[1];
var min = +timeParts[0];
seconds = min * 60 + seconds;
var words = twoParts[1];
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray[index].words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 70, lrc_ul_height = 60;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");}
$("ullrc").children[index].classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray[index].seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
(function() {
var aud = document.getElementById("aud");
var img = document.getElementById("mplayer");
var image= document.getElementById("Img");
img.onclick = function() {
if (aud.paused) {
aud.play();image.play();
} else {
aud.pause();image.stop();
}
}
aud.addEventListener("play", function (e) {
img.src="http://image.hnol.net/c/2022-02/01/23/202202012325163161-5769293.png";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://image.hnol.net/c/2022-02/01/23/202202012327333961-5769293.png";
}, false);})();
/*进度条 进度时间*/
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gra**nt(90deg, #00ff00, #00ff00, #00ff00 ' + aud.currentTime / aud.duration * 100 + '%, #cccccc 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' / ' + toMin(aud.duration);
});
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
};
/*结束*/
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
var image= document.getElementById("Img");
</script>
|
|
