功能简介
- 总结图片展示
- 新年倒计时
- 烟花文字展示
- 支持电脑端和手机端
效果图
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<style>
.square-item {
position: relative;
overflow: hidden;
width: 100%;
padding-bottom: 100%; /* 设置容器的上内边距为100%，使其高度与宽度相等 */
background-color: #fff;
}
.square-item img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover; /*根据父容器的尺寸裁剪和缩放图片，以填充整个容器，并保持长宽比例不变。*/
object-position: center; /*指定对象的位置，如果不设置，则默认是center*/
background-size: cover; /*背景图片的大小，如果不设置，则默认是auto*/
background-position: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /*将元素移动到中心*/
}
</style>
</head>
<body>
<div class="container">
<audio autoplay="autopaly" loop="loop" id="audios" preload="auto" hidden>
<source src="./file/zhaopian.mp3"/>
</audio>
<div style="width: 100%;height: 60px;line-height: 60px;text-align: center; font-size: 20px; font-weight: bold">
<p>总结</p>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-2 row-cols-xl-4 mt-5">
<div class="col mb-3">
<div class="square-item">
<img src="images/photo/1.png"/>
</div>
</div>
<div class="col mb-3">
<div class="square-item">
<img src="images/photo/2.png"/>
</div>
</div>
<div class="col mb-3">
<div class="square-item">
<img src="images/photo/3.png"/>
</div>
</div>
<div class="col mb-3">
<div class="square-item">
<img src="images/photo/4.png"/>
</div>
</div>
</div>
<div style="width: 100%;height: 60px;line-height: 40px;text-align: center; font-size: 20px; font-weight: bold">
<button style="border-radius: 5px;"><a href="xinnian.html"
style="text-decoration: none;color: brown;">前往倒计时》</a></button>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2024倒计时</title>
<script src="js/jquery.js" type="text/javascript"></script>
<style>
/* devanagari */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
/* pc端 */
@media screen and (min-width: 1025px) {
body {
background: url("./images/bg.jpg") no-repeat center;
background-attachment: fixed;
background-blend-mode: hard-light;
}
.container {
width: 100%;
margin: 18% auto;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.container h2 {
text-align: center;
font-size: 6em;
line-height: 0.7em;
color: red;
margin-top: -80px;
}
.container h2 span {
display: block;
font-weight: 400;
letter-spacing: 6px;
font-size: 0.2em;
}
.countdouwn {
display: flex;
margin-top: 50px;
}
.countdouwn div {
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: #5b508b;
color: #ffffff;
margin: 0 15px;
font-size: 3em;
font-weight: 500;
}
.countdouwn div:before {
content: "";
position: absolute;
bottom: -30px;
left: 0;
width: 100%;
height: 35px;
background: #fff;
color: #333;
font-size: 0.35em;
line-height: 35px;
font-weight: 300;
}
.countdouwn #day:before {
content: "天";
}
.countdouwn #hour:before {
content: "时";
}
.countdouwn #minute:before {
content: "分";
}
.countdouwn #second:before {
content: "秒";
}
}
/* 手机端 */
@media screen and (max-width: 1024px) {
* {
margin: 0;
padding: 0;
}
body {
background: url("./images/bg1.jpg") no-repeat center;
background-attachment: fixed;
background-blend-mode: hard-light;
}
.container {
width: 100%;
margin: 45% 0;
padding: 0%;
}
.container div {
margin: 0;
color: red;
line-height: normal;
}
.container h2 span {
color: red;
display: block;
text-align: center;
font-size: 1em;
}
.container h2:first-child div {
font-size: 2.2em;
text-align: center;
margin: 10% 0;
}
.countdouwn {
display: flex;
justify-content: space-around;
margin: 0;
border-radius: 15px;
}
.countdouwn div {
width: 20%;
height: 13vw;
margin: 0 10px;
line-height: 13vw;
font-size: 2.3em;
position: relative;
text-align: center;
background: #5b508b;
color: #ffffff;
font-weight: 500;
border-radius: 5px 5px 0 0;
}
.countdouwn div:before {
content: '';
position: absolute;
bottom: -30px;
left: 0;
width: 100%;
height: 30px;
background: #fff;
color: #333;
font-size: .35em;
line-height: 30px;
font-weight: 300;
border-radius: 0 0 5px 5px;
}
.countdouwn #day:before {
content: '天';
border-radius: 5px;
}
.countdouwn #hour:before {
content: '时';
}
.countdouwn #minute:before {
content: '分';
}
.countdouwn #second:before {
content: '秒';
}
}
.bubble-container {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
top: 0;
left: 0;
}
.bubble-container .bubble {
position: absolute;
bottom: -10rem;
width: 4rem;
height: 4rem;
background-color: #f1f1f1;
border-radius: 50%;
opacity: .5;
animation: rise 10s infinite ease-in;
}
.bubble-container .bubble-1 {
width: 4rem;
height: 4rem;
left: 10%;
animation: 8s;
}
.bubble-container .bubble-2 {
width: 2rem;
height: 2rem;
left: 20%;
animation-duration: 5s;
animation-delay: 1s;
}
.bubble-container .bubble-3 {
width: 5rem;
height: 5rem;
left: 35%;
animation-duration: 7s;
animation-delay: 2s;
}
.bubble-container .bubble-4 {
width: 8rem;
height: 8rem;
left: 50%;
animation-duration: 11s;
animation-delay: 0s;
}
.bubble-container .bubble-5 {
width: 3.5rem;
height: 3.5rem;
left: 55%;
animation-duration: 6s;
animation-delay: 1s;
}
.bubble-container .bubble-6 {
width: 4.5rem;
height: 4.5rem;
left: 65%;
animation-duration: 8s;
animation-delay: 3s;
}
.bubble-container .bubble-7 {
width: 9rem;
height: 9rem;
left: 75%;
animation-duration: 12s;
animation-delay: 2s;
}
.bubble-container .bubble-8 {
width: 2.5rem;
height: 2.5rem;
left: 80%;
animation-duration: 6s;
animation-delay: 2s;
}
@keyframes rise {
0% {
bottom: -10rem;
transform: translateX(0);
}
50% {
transform: translate(10rem);
}
100% {
bottom: 1080px;
transform: translateX(-20rem);
}
}
</style>
</head>
<body>
<audio autoplay="autopaly" loop="loop" id="audios" preload="auto" hidden>
<source src="file/xinnian.mp3"/>
</audio>
<div class="bubble-container">
<div class="bubble bubble-1"></div>
<div class="bubble bubble-2"></div>
<div class="bubble bubble-3"></div>
<div class="bubble bubble-4"></div>
<div class="bubble bubble-5"></div>
<div class="bubble bubble-6"></div>
<div class="bubble bubble-7"></div>
<div class="bubble bubble-8"></div>
</div>
<div class="container">
<h2>
<div id="Year">2024</div>
</h2>
<div class="countdouwn">
<div id="day">00</div>
<div id="hour">00</div>
<div id="minute">00</div>
<div id="second">00</div>
</div>
</div>
<script>
var Y = 2024;
// 自动为下一年
function newYear() {
var newDay = Y + '/1/1 00:00:00'
var countDate = new Date(newDay);
var now = new Date().getTime()
gap = countDate - now;
var second = 1000
var minute = second * 60
var hour = minute * 60
var day = hour * 24
var d = Math.floor(gap / day)
var h = Math.floor((gap % day) / hour)
var m = Math.floor((gap % hour) / minute)
var s = Math.floor((gap % minute) / second)
// 此处可删除
d = addZero(d)
h = addZero(h)
m = addZero(m)
s = addZero(s)
// func end
// 显示的年
document.getElementById('Year').innerText = '距离' + Y;
if (gap < 0) {
setTimeout(function () {
location.href = "yanhua.html";
}, 1000);
return;
}
// 倒计时
document.getElementById('day').innerText = d
document.getElementById('hour').innerText = h
document.getElementById('minute').innerText = m
document.getElementById('second').innerText = s
}
// 数字小于10前面就加0
function addZero(num) {
return num < 10 ? '0' + num : num
}
setInterval(() => {
newYear()
}, 1000)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>💥给你的专属烟花🎆</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" type="image/png"
href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<link rel="icon" type="image/png"
href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<link rel="apple-touch-icon-precomposed"
href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage"
content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<link rel="stylesheet" href="./css/style.css">
<style>
.canvas-container {
background-size: cover;
background-position: center;
}
</style>
<script src="./js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<audio id="audioDom" src="https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/7170534431801838367.mp3" preload="auto" loop="loop"></audio>
<!-- App -->
<div class="container">
<div class="stage-container remove">
<div class="page_two hide">
<div class="type_words" id="contents"></div>
<div id="wish_text" />
</div>
<div class="canvas-container">
<canvas id="trails-canvas"></canvas>
<canvas id="main-canvas"></canvas>
<canvas id="snow-canvas" style="opacity: 0.5;"></canvas>
</div>
</div>
</div>
<!-- partial -->
<script type="text/javascript" src="./js/common.js"></script>
<script type="text/javascript" src="./js/script.js"></script>
<script type="text/javascript">
// 遇到问题微信公众号:程序员晨光 后台留言你的问题，会为你解答
// 或者直接加微信添加 effortPP
function musicPlay(isPlay) {
var media = document.querySelector('#audioDom');
if (isPlay && media.paused) {
media.play();
}
if (!isPlay && !media.paused) {
media.pause();
}
}
function musicInBrowserHandler() {
setTimeout(function () {
musicPlay(true)
}, 0)
}
document.body.addEventListener('touchstart', musicInBrowserHandler);
document.body.addEventListener('click', musicInBrowserHandler);
clickGift();
// 页面点击就执行
function clickGift() {
$('#yhBtn').hide()
setTimeout(() => {
start()
fireworks();
}, 100) // 这里的5000 是5s指烟花延时时间
setTimeout(() => {
function audioAutoPlay() {
var audio = document.getElementById('audioDom');
audio.play();
}
audioAutoPlay();
wishFun(); // 想要展示祝福语--取消注释
}, 3000)
console.log(updateConfig({ autoLaunch: true }));
}
function fireworks() {
$('.page_two').removeClass('hide');
$('.stage-container').removeClass('remove');
}
function start() {
// 遇到问题微信公众号:程序员晨光 后台留言你的问题，会为你解答
// 或者直接加微信添加 effortPP
var text = [
"xxx，新年快乐!",
"2024我们来了！！！"
]
var str = text.join('<br><br>')
var str_ = ''
var i = 0
var content = document.getElementById('contents')
var timer = setInterval(() => {
if (str_.length < str.length) {
str_ += str[i++]
content.innerHTML = '<p>' + str_ + '<span class="xx" style="opacity: 1;color: red;">❤</span></p>' //打印时加光标
} else {
clearInterval(timer)
content.innerHTML = '<p>' + str_ + '</p>'
}
}, 100)
}
</script>
<script>
// 遇到问题微信公众号:程序员晨光 后台留言你的问题，会为你解答
// 或者直接加微信添加 effortPP
function wishFun() {
const wish = [
"2024",
'xxx',
'新年快乐',
"Happy New Year",
"大吉大利",
"身体健康",
"万事顺遂"
];
const text = document.getElementById('wish_text');
text.style.height = '120px';
if (text.classList.contains('wish_text')) {
text.classList.remove("wish_text");
}
let i = -1;
var timer = null;
clearInterval(timer);
//开始定时器
timer = setInterval(() => {
if (Math.random() * 100 > 2) {
if (i < wish.length - 1) {
i += 1;
} else {
i = 0; // 循环播放文字打开这行注释
}
text.innerText = wish[i];
text.classList.add("wish_text");
}
}, 3000);
}
</script>
<script type="text/javascript" src="./js/other.js"></script>
</body>
</html>
1971
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
