|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢乐中国年▪2025春节倒计时
</title>
</head>
<body>
<style type="text/css">
#papa { margin: 130px 0 30px calc(50% - 721px);width: 1280px; height: 720px; background-blend-mode:hue;background:url('https://pic.imgdb.cn/item/65bba435871b83018a4e2002.jpg')no-repeat center/cover;box-shadow: 0px 0px 0px 2px #fff,0px 0px 0px 4px #fff; overflow: hidden; z-index:2; position: relative; display: grid; place-items: center;animation: rotating 5s linear infinite var(--state); }
@keyframes rotating{50%{filter:hue-rotate(360deg)contrast(110%)brightness(100%);}}
#pic{width: 100%; height: 100%; position: absolute;top:0px; left:0px;z-index:3;mix-blend-mode: screen;}
#pic img{height: 100%;width: 100%;}
#btnFs {
position: absolute;
left: 20px;
top: 20px;
padding: 6px;
background: green;
color: white;
border: 2px solid white;
border-radius: 8px;
cursor: pointer;
pointer-events: auto;
z-index: 8;
}
#vid1 {
position: absolute;
left:0px;
top:-90px;
width: 100%;
height:130%;
mix-blend-mode:screen;
opacity: 0.8;
object-fit: cover;
z-index:3;
}
#vid2 {
position: absolute;
left:0px;
top:-90px;
width: 100%;
height:130%;
mix-blend-mode:screen;
opacity: 0.8;
object-fit: cover;
z-index:4;
}
#player {
position: absolute;z-index: 20;
right: 3%; bottom:5%;
width: 50px;
height: 50px;
border: 3px solid #cccccc;
border-radius: 50%;
opacity: 1;
cursor: pointer;
pointer-events: auto;
z-index:8;
}
#djs {position: absolute;
left: 1%; bottom: -57%;
width:100%;
height:100%;
mix-blend-mode:screen;
opacity: 0.8;
background-blend-mode: darken;
z-index:6;
}
.lrc{
width: 100%;
height: 120px;
overflow: hidden;
display: block;position: absolute;
top:12%;
left:-20%;z-index: 7;
margin: 0 auto;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:华文隶书;
font-size: 0px;
color: #000078;
font-weight: bold;
transition: .3s all ease;
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 55px;
text-align: center; color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen) 50%/100px 80px; -webkit-background-clip: text; filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px 0);
}
. tz{ position: absolute; display: grid; place-items: center;
}
h1 {font-size: 2em;margin-bottom: 20px;
}
#countdown {font-size:1.5em;margin-bottom: 20px;
}
.container {display: inline-block; padding: 20px;border-radius: 10px;background:#1E90FF;color:#7CFC00;margin:30px auto;
}
.time-box { display: inline-block;margin: 0 10px;padding: 10px;background: #FF3030;color: #FFD700;border-radius: 5px;
}
.time-box span {display: block;font-size: 1.5em;
}
.time-box b {font-size: 1.8em;
}
</style>
<div id="papa" >
<div id="djs"><div class="container" class="tz">
<h1>2025春节大年初一倒计时</h1>
<div id="countdown">
<div class="time-box"><span>天</span><b id="days"></b></div>
<div class="time-box"><span>时</span><b id="hours"></b></div>
<div class="time-box"><span>分</span><b id="minutes"></b></div>
<div class="time-box"><span>秒</span><b id="seconds"></b></div>
</div>
</div>
</div>
<span id="btnFs"></span>
<div id="pic" ><img id="Img" src="https://wimg.588ku.com/gif620/22/01/07/57eef3f535fb1ea56925950f32f58a5d.gif" alt="" /></div>
<video id="vid1" src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c05d86785e.mp4" autoplay loop muted></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2418175/00/08/42/5d2228836b4e9.mp4" autoplay loop muted></video>
<img id="player" alt="" src="https://xlaj.cn/upfile/202411/30/07.gif" title="播放/暂停" />
<div class="lrc">
<ul id="ullrc"></ul>
</div>
<audio id="aud" src="https://cccimg.com/view.php/c61b104506de5c4c3661bdff879437d8.mp3" loop autoplay></audio>
</div>
<script type="module">
import qp from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
qp.fs('papa','btnFs');
</script>
<script>
var mState = () => {
player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running')
aud.paused ? (vid1.pause(),vid2.pause(), image0.stop()) : (vid1.play(),vid2.play(), image0.play());
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</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;
// 透明度还原
image0.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 image0= document.getElementById("Img");
</script>
<script >
var lrc = `
[offset:0]
[00:00.21]欢乐中国年 - 孙悦
[00:03.90]词：张俊以
[00:06.26]曲：卞留念
[00:23.43]欢乐中国年
[00:25.40]欢乐欢乐中国年
[00:27.42]啦啦啦啦啦年
[00:31.10]欢乐欢乐中国年
[00:34.87]欢乐中国年
[00:38.34]金风送喜来
[00:40.18]紫荆花已开
[00:42.07]二月大地春雷
[00:43.91]锣鼓敲起来
[00:45.78]百年梦已圆
[00:47.64]千年手相牵
[00:49.45]中国走进新时代
[00:53.13]金风送喜来
[00:55.04]紫荆花已开
[00:56.98]二月大地春雷
[00:58.77]锣鼓敲起来
[01:00.60]百年梦已圆
[01:02.49]千年手相牵
[01:04.34]中国走进新时代
[01:07.94]欢乐欢乐中国年
[01:11.74]欢乐欢乐中国年
[01:15.43]欢乐欢乐中国年
[01:21.95]中国年
[01:22.93]恭喜恭喜中国年
[01:26.59]五谷丰登笑开颜
[01:30.30]恭喜恭喜中国年
[01:34.06]歌声万里连成片
[01:37.72]欢乐欢乐中国年
[01:41.46]欢歌笑声连成片
[01:45.16]欢乐欢乐中国年
[01:48.87]红红火火到永远
[02:07.40]金风送喜来
[02:09.36]紫荆花已开
[02:11.21]二月大地春雷
[02:13.07]锣鼓敲起来
[02:14.91]百年梦已圆
[02:16.75]千年手相牵
[02:18.60]中国走进新时代
[02:22.28]金风送喜来
[02:24.14]紫荆花已开
[02:26.08]二月大地春雷
[02:27.90]锣鼓敲起来
[02:29.72]百年梦已圆
[02:31.61]千年手相牵
[02:33.45]中国走进新时代
[02:37.20]恭喜恭喜中国年
[02:40.93]五谷丰登笑开颜
[02:44.64]恭喜恭喜中国年
[02:48.32]歌声万里连成片
[02:52.05]欢乐欢乐中国年
[02:55.76]欢歌笑声连成片
[02:59.45]欢乐欢乐中国年
[03:03.15]红红火火到永远
[03:06.90]恭喜恭喜中国年
[03:10.59]五谷丰登笑开颜
[03:14.32]恭喜恭喜中国年
[03:18.05]歌声万里连成片
[03:21.77]欢乐欢乐中国年
[03:25.52]欢歌笑声连成片
[03:29.21]欢乐欢乐中国年
[03:32.89]红红火火到永远
[03:36.62]恭喜恭喜中国年
[03:40.35]五谷丰登笑开颜
[03:44.05]恭喜恭喜中国年
[03:47.77]歌声万里连成片
[03:51.47]欢乐欢乐中国年
[03:55.23]欢歌笑声连成片
[03:58.90]欢乐欢乐中国年
[04:02.63]红红火火到永远
[04:06.31]红红火火到永远
[04:08.45]欢乐中国年
[04:10.08]欢乐欢乐中国年
`;
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;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
var top = index * lrc_li_height + lrc_li_height / 3 - lrc_ul_height / 3;
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;
</script >
<script>
function updateCountdown() {
const targetDate = new Date('January 29, 2025 00:00:00').getTime(); // 修改为2025年新年
const now = new Date().getTime();
const timeDifference = targetDate - now;
const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
document.getElementById('days').innerText = days;
document.getElementById('hours').innerText = hours;
document.getElementById('minutes').innerText = minutes;
document.getElementById('seconds').innerText = seconds;
}
setInterval(updateCountdown, 1000);
updateCountdown();
</script>
</body>
</html>
| 
|Archiver|小黑屋|纳兰音画网
( 蜀ICP备2021011087号 )
窥视卡
雷达卡
发表于 
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
发表于 
