先上效果图片,再上代码
效果
JS关键代码
//下雪效果
function snow(){
const canvas = document.getElementById("background");
const ctx = canvas.getContext("2d");
const width = window.innerWidth;
const height = window.innerHeight;
canvas.width = width;
canvas.height = height;
//Set number of snowflakes
let numberFlakes = 400;
let snowflakes = [];
for(let i = 0; i < numberFlakes; i++){
snowflakes.push({
x: Math.random()*width,
y: Math.random()*height,
r: Math.random()*3+1,
d: Math.random() + 2
})
}
//Draw the snowflakes
function drawFlakes(){
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "white";
ctx.beginPath();
for(let i = 0; i < numberFlakes; i++){
let sf = snowflakes[i];
ctx.moveTo(sf.x, sf.y);
ctx.arc(sf.x, sf.y, sf.r, 0, Math.PI*2, true);
}
ctx.fill();
moveFlakes();
}
//Move the snowflakes
function moveFlakes(){
for(let i = 0; i < numberFlakes; i++){
let sf = snowflakes[i];
sf.y += Math.pow(sf.d, 2) + 1;
if(sf.y > height){
snowflakes[i] = {
x: Math.random()*width, y: 0, r: sf.r, d: sf.d
};
}
}
}
//Snowflake animation
setInterval(drawFlakes, 26);
}
//新春倒计时
//11am on December 25th
const countDownDate = new Date("February 11, 2021, 00:00:00").getTime();
const x = setInterval(function(){
//Today's date + time
let now = new Date().getTime();
let distance = countDownDate - now;
//Calculations for days/hours/minutes/seconds
let days = Math.floor(distance / (1000*60*60*24));
let hours = Math.floor((distance % (1000*60*60*24)) / (1000*60*60));
let minutes = Math.floor((distance % (1000*60*60)) / (1000*60));
let seconds = Math.floor((distance % (1000*60)) / 1000);
document.getElementById("countdown").innerHTML = days + "天 " + hours + "时 " + minutes + "分" + seconds + "秒";
if(distance < 0){
clearInterval(x);
document.getElementById("message").innerHTML = "2021新年倒计时!";
document.getElementById("countdown").innerHTML = "- 0 - 0 - 0 - 0 -"
}
}, 1000);
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title> canvas 2021新年倒计时下雪背景</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body onload="snow()">
<canvas id="background" width="1872" height="909"></canvas>
<div class="container">
<div class="h1"><h1 id="message">2021新年倒计时</h1></div>
<div id="countdown">15天 12时 7分10秒</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
background-image: url("../img/214.jpg");
background-color: #FFFFFF;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow-x: hidden;
overflow-y: hidden;
}
.h1 {
font-family: 'Italianno', cursive;
color: #E1E1E1;
text-align: center;
font-size: 38px;
letter-spacing: 0.1em;
text-shadow: 3px 2px #333333;
width: 100%;
}
#countdown {
position: absolute;
left: 50%;
transform: translate(-50%);
font-family: arial;
font-size: 38px;
color: #E1E1E1;
text-shadow: 3px 2px #333333;
text-align: center;
padding: 15px;
border: 10px solid #E1E1E1;
width: 700px;
font-family: 'Lora', serif;
box-shadow: 3px 3px 3px #333333;
width: 55%;
}
.container {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
width: 66%;
height: 50vh;
}