跨年倒计时他来了

Aic山鱼

已于 2023-02-01 23:53:14 修改

阅读量798

点赞数 25

分类专栏：小嘎鱼前端特效文章标签： html 前端 javascript

于 2022-12-28 18:14:08 首次发布

本文链接：https://blog.csdn.net/zhaochen1127/article/details/128472225

版权

小嘎鱼前端特效专栏收录该内容

5 篇文章

订阅专栏

直接看效果（样式可以改的哦）

html代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>新年快乐</title>
    <link rel="stylesheet" href="./newYear.css">
</head>
<body>
    <h1 id="h1"></h1>
    <canvas id="mycanvas"></canvas>
    <script src="./newYear.js"></script>
</body>
</html>

css代码：

*{
    margin: 0;
    padding: 0;
}
body {
    overflow: hidden;
    margin: 0;
    cursor: pointer;
    font-size: 30px;
    background: url("https://bpic.588ku.com/back_pic/05/98/90/085f0e6a78030dd.jpg") no-repeat;
    background-size: 100% 100%;
}

h1 {
    position: fixed;
    top: 50%;
    left: 30%;
    width: 40%;
    text-align: center;
    box-shadow: 10px 5px 5px rgb(255, 255, 255);
    border-radius: 10px;
    background-color: rgba(255, 177, 74, 0.603);
    transform: translateY(-50%);
    font-family: 'Love Ya Like A Sister', cursive;
    font-size: 60px;
    color: #ffffff;
    text-shadow: rgb(255, 136, 0) 1px 0 10px;
    padding: 100px 20px;
}
h1 span {
    position: fixed;
    left: 0;
    width: 100%;
    border-radius: 10px;
    text-align: center;
    margin-top: 30px;
    font-size: 40px;

}

js代码：


window.requestAnimationFrame = (function () {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000)
        }
})();

var area = document.getElementById("mycanvas");
area.width = document.documentElement.clientWidth;
area.height = document.documentElement.clientHeight;

var ctx = area.getContext("2d");

hue = 120;
timerTick = 0;
timerTotal = 5;
fireworks = [];
particles = [];

function random(min, max) {
    return Math.random() * (max - min) + min;
}

function distans(sx, sy, tx, ty) {
    var xdistan = sx - tx;
    var ydistan = sy - ty;
    return Math.sqrt((Math.pow(xdistan, 2) + Math.pow(ydistan, 2)));
}

function Firework(sx, sy, tx, ty) {
    this.x = sx;
    this.y = sy;
    this.sx = sx;
    this.sy = sy;
    this.tx = tx;
    this.ty = ty;

    this.targetDistances = distans(sx, sy, tx, ty);

    this.distancesc = 0;

    this.guiji = [];
    this.guijicount = 3;
    while (this.guijicount--) {
        this.guiji.push([this.x, this.y]);
    }

    this.angle = Math.atan2(ty - sy, tx - sx);
    this.speed = 2;
    this.jiasudu = 1.05;
    this.brightness = random(50, 70);
    this.targetRad = 5;
}

Firework.prototype.update = function (index) {
    this.guiji.pop();
    this.guiji.push([this.x, this.y]);

    if (this.targetRad < 8) {
        this.targetRad += 0.3;
    } else {
        this.targetRad = 1;
    }

    this.speed *= this.jiasudu;
    var vx = Math.cos(this.angle) * this.speed;
    var vy = Math.sin(this.angle) * this.speed;

    this.distancesc = distans(this.sx, this.sy, this.x + vx, this.y + vy);

    if (this.distancesc >= this.targetDistances) {

        createparticals(this.tx, this.ty);

        fireworks.splice(index, 1)
    } else {
        this.x += vx;
        this.y += vy;
    }
}


Firework.prototype.draw = function () {
    ctx.beginPath();

    ctx.moveTo(this.guiji[this.guiji.length - 1][0], this.guiji[this.guiji.length - 1][1]);

    ctx.lineTo(this.x, this.y);

    ctx.strokeStyle = 'hsl(' + hue + ',100%,' + this.brightness + '%)';
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(this.tx, this.ty, this.targetRad, 0, Math.PI * 2);
    ctx.stroke();
}

function Particle(x, y) {
    this.x = x;
    this.y = y;
    this.guiji = [];
    this.guijicount = 10;
    while (this.guijicount--) {
        this.guiji.push([this.x, this.y]);
    }

    this.angle = random(0, 2 * Math.PI);
    this.speed = random(1, 10);
    this.mocal = 0.95;
    this.gravity = 0.98;
    this.hue = random(hue - 20, hue + 20);
    this.brightness = random(50, 80);
    this.alpha = 1;
    this.decay = random(0.015, 0.03);
}

Particle.prototype.update = function (index) {
    this.guiji.pop();
    this.guiji.unshift([this.x, this.y]);
    this.speed *= this.mocal;
    this.x += Math.cos(this.angle) * this.speed;
    this.y += Math.sin(this.angle) * this.speed + this.gravity;
    this.alpha -= this.decay;
    if (this.alpha <= this.decay) {
        particles.splice(index, 1)
    }
}
Particle.prototype.draw = function () {
    ctx.beginPath();
    ctx.moveTo(this.guiji[this.guiji.length - 1][0], this.guiji[this.guiji.length - 1][1]);
    ctx.lineTo(this.x, this.y);
    ctx.strokeStyle = 'hsl(' + hue + ',100%,' + this.brightness + '%)';
    ctx.stroke();
}

function createparticals(x, y) {
    var particalcount = 500;
    while (particalcount--) {
        particles.push(new Particle(x, y))
    }
}

var clientw = document.documentElement.clientWidth;
var clienth = document.documentElement.clientHeight;
function loop() {
    requestAnimationFrame(loop);
    hue += 0.5;
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillRect(0, 0, clientw, clienth);
    ctx.fillStyle = 'rgb(0,0,0,0.5)';
    ctx.globalCompositeOperation = 'lighter';
    var i = fireworks.length;
    while (i--) {
        fireworks[i].draw();
        fireworks[i].update(i);
    }
    var i = particles.length;
    while (i--) {
        particles[i].draw();
        particles[i].update(i);
    }
    if (timerTick >= timerTotal) {
        fireworks.push(new Firework(clientw / 2, clienth, random(0, clientw), random(0, clienth)));
        timerTick = 0;
    }
    else {
        timerTick++;
    }
}
window.οnlοad = loop();
window.onload = function starttime() {
    time(h1, '2023/1/1');
    ptimer = setTimeout(starttime, 1000);
}
function time(obj, futimg) {
    var nowtime = new Date().getTime();
    var futruetime = new Date(futimg).getTime();
    var msec = futruetime - nowtime;
    var time = (msec / 1000);
    var day = parseInt(time / 86400);
    var hour = parseInt(time / 3600) - 24 * day;
    var minute = parseInt(time % 3600 / 60);
    var second = parseInt(time % 60);
    obj.innerHTML = "<p>🐇年大吉</p><br>距离春节还有：<br>" + day + "天" + hour + "小时" + minute + "分" + second + "秒" + "<br><span>玉兔跳，送福到，吉祥如意鸿运照。</span>"
    return true;
}
if (day == 0 && hour == 0 & minute == 0 & second == 0) {
    clearInterval(ptimer);
}

祝您新年
生活如意，事业高升。
前程似锦，美梦成真。
年年今日，岁岁今朝。
事事顺利，万事如意。
愿与同僚，共分此乐。
事业有成，幸福快乐。
生日快乐，幸福安康。
幸福快乐，与君同在。