*2022年圣诞节到来啦，很高兴这次我们又能一起度过~

文章目录

  • 前言
  • 效果展示
    • 一、夜景烟花绽放动画效果
      • HTML源码
  • 2023年(新年)春节倒计时代码
    • 源码
  • 2023除夕倒计时
    • 效果展示
    • 源码
  • 宇宙星空-效果展示
    • 1.源码
    • 2.思路
    • 3.步骤(js部分)
  • 更多干货

前言

时光荏苒，白驹过隙。
2022这一年又在忙碌中度过了，过去的一年，我们同努力，我们共欢笑，每一次成功都蕴藏着我们辛勤的劳动。
新的一年即将来到，我们不能停滞不前，一味只是骄傲。愿大家与时俱进，拼搏不懈，共创新的辉煌！
借着新年到来的喜庆，给大家分享一个新年烟花的前端代码，快拿着代码展示给你的朋友们看吧！！
转眼间已经到了2022的尾巴，这一年对于国家来说丰富充实,冬奥会在北京举行、中国共产党第二十次全国代表大会召开、社会共同抗击疫情的第三年、我国完成天宫空间站建造……对于我们每一个个体，2022也承载着我们的快乐与悲伤，它是无法替代的。
新的一年马上就要到了，让我们告别2022，迎接2023！
希望2023,全糖去冰。

效果展示

一、夜景烟花绽放动画效果

HTML源码

body{margin:0;padding:0;overflow: hidden;}.city{width:100%;position:fixed;bottom: 0px;z-index: 100;}.city img{width: 100%;}html5夜景放烟花绽放动画效果浏览器不支持canvas新年快乐合家幸福万事如意心想事成财源广进var canvas = document.getElementById("cas");var ocas = document.createElement("canvas");var octx = ocas.getContext("2d");var ctx = canvas.getContext("2d");ocas.width = canvas.width = window.innerWidth;ocas.height = canvas.height = 700;var bigbooms = [];window.onload = function(){initAnimate()}function initAnimate(){drawBg();lastTime = new Date();animate();}var lastTime;function animate(){ctx.save();ctx.fillStyle = "rgba(0,5,24,0.1)";ctx.fillRect(0,0,canvas.width,canvas.height);ctx.restore();var newTime = new Date();if(newTime-lastTime>500+(window.innerHeight-767)/2){var random = Math.random()*100>2" />=5? 1 : 2;var color;if(style===1){color = {a:parseInt(getRandom(128,255)),b:parseInt(getRandom(128,255)),c:parseInt(getRandom(128,255))}}var fanwei = parseInt(getRandom(300, 400));for(var i=0;i<fragNum;i++){if(style===2){color = {a:parseInt(getRandom(128,255)),b:parseInt(getRandom(128,255)),c:parseInt(getRandom(128,255))}}var a = getRandom(-Math.PI, Math.PI);var x = getRandom(0, fanwei) * Math.cos(a) + this.x;var y = getRandom(0, fanwei) * Math.sin(a) + this.y; var radius = getRandom(0 , 2)var frag = new Frag(this.x , this.y , radius , color , x , y );this.booms.push(frag);}},_shapBoom:function(){var that = this;putValue(ocas , octx , this.shape , 5, function(dots){var dx = canvas.width/2-that.x;var dy = canvas.height/2-that.y;for(var i=0;i=0){img.src = ele.getElementsByTagName("img")[0].src;imgload(img , function(){context.drawImage(img , canvas.width/2 - img.width/2 , canvas.height/2 - img.width/2);dots = getimgData(canvas , context , dr);callback(dots);})}else {var text = ele.innerHTML;context.save();var fontSize =200;context.font = fontSize+"px 宋体 bold";context.textAlign = "center";context.textBaseline = "middle";context.fillStyle = "rgba("+parseInt(getRandom(128,255))+","+parseInt(getRandom(128,255))+","+parseInt(getRandom(128,255))+" , 1)";context.fillText(text , canvas.width/2 , canvas.height/2);context.restore();dots = getimgData(canvas , context , dr);callback(dots);}}function imgload(img , callback){if(img.complete){callback.call(img);}else {img.onload = function(){callback.call(this);}}}function getimgData(canvas , context , dr){var imgData = context.getImageData(0,0,canvas.width , canvas.height);context.clearRect(0,0,canvas.width , canvas.height);var dots = [];for(var x=0;x
  
moon.png
 
 
 
2023年(新年)春节倒计时代码
 
2023年新年倒计时HTML源代码，2023年春节倒计时代码，直接运行index.html即可。
 
 
 
源码
 
NewYear.css
 
/*初始化*/* {padding: 0;margin: 0 auto;}/*背景色*/body,html {background: url(./img/newyear.png) no-repeat;background-size: 100% 100%;background-attachment: fixed;/* background-color: black; */}/*父盒子*/.fa {color:#6c5ce7;margin-top: 200px;background-color: rgba(0, 17, 17, 0.5);/*边框圆角*/border-radius: 80px;/*伸缩布局*/display: flex;/*改变主轴方向竖排*/flex-direction: column;}.fir {margin-left: 620px;margin-bottom: 100px;font-size: 80px;}.fa .sj {/*伸缩布局*/display: flex;/*改变主轴方向*/flex-direction: column;}.fa .sj div {width: 100%;/*伸缩布局*/display: flex;/*主轴排列方式*/justify-content: center;color: black;margin-bottom: 60px;/*多行侧轴排列方式*/align-content: space-around;color:#ff7675;font-size: 55px;}.fa .sj .zi {color:#d63031;}
index.html
新年倒计时距离2023春节(1-22)还有天时分秒
2023除夕倒计时
效果展示
源码
新年快乐body{overflow: hidden;margin: 0;}h1{position: fixed;top: 30%;left: 0;width: 100%;text-align: center;transform:translateY(-50%);font-family: 'Love Ya Like A Sister', cursive;font-size: 60px;color: #c70012;padding: 0 20px;}h1 span{position: fixed;left: 0;width: 100%;text-align: center;margin-top:30px;font-size:40px;} 
 var canvas = document.querySelector("canvas"),ctx = canvas.getContext("2d"); var ww,wh; function onResize(){ww = canvas.width = window.innerWidth;wh = canvas.height = window.innerHeight;} ctx.strokeStyle = "pink";ctx.shadowBlur = 25;ctx.shadowColor = "hsla(0, 100%, 60%,0.5)"; var precision = 100;var hearts = [];var mouseMoved = false;function onMove(e){mouseMoved = true;if(e.type === "touchmove"){hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));}else{hearts.push(new Heart(e.clientX, e.clientY));hearts.push(new Heart(e.clientX, e.clientY));}} var Heart = function(x,y){this.x = x || Math.random()*ww;this.y = y || Math.random()*wh;this.size = Math.random()*2 + 1;this.shadowBlur = Math.random() * 10;this.speedX = (Math.random()+0.2-0.6) * 8;this.speedY = (Math.random()+0.2-0.6) * 8;this.speedSize = Math.random()*0.05 + 0.01;this.opacity = 1;this.vertices = [];for (var i = 0; i < precision; i++) {var step = (i / precision - 0.5) * (Math.PI * 2);var vector = {x : (15 * Math.pow(Math.sin(step), 3)),y : -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))}this.vertices.push(vector);}} Heart.prototype.draw = function(){this.size -= this.speedSize;this.x += this.speedX;this.y += this.speedY;ctx.save();ctx.translate(-1000,this.y);ctx.scale(this.size, this.size);ctx.beginPath();for (var i = 0; i < precision; i++) {var vector = this.vertices[i];ctx.lineTo(vector.x, vector.y);}ctx.globalAlpha = this.size;ctx.shadowBlur = Math.round((3 - this.size) * 10);ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";ctx.shadowOffsetX = this.x + 1000;ctx.globalCompositeOperation = "screen"ctx.closePath();ctx.fill()ctx.restore();};function render(a){requestAnimationFrame(render); hearts.push(new Heart())ctx.clearRect(0,0,ww,wh);for (var i = 0; i < hearts.length; i++) {hearts[i].draw();if(hearts[i].size <= 0){hearts.splice(i,1);i--;}}}onResize();window.addEventListener("mousemove", onMove);window.addEventListener("touchmove", onMove);window.addEventListener("resize", onResize);requestAnimationFrame(render); window.onload=function starttime(){time(h1,'2023/1/21'); // 2023年春节时间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);// 毫秒/1000var day = parseInt(time/86400); // 天24*60*60*1000var hour = parseInt(time/3600)-24*day;// 小时 60*60 总小时数-过去的小时数=现在的小时数var minute = parseInt(time%3600/60); // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数var second = parseInt(time%60);// 以60秒为一整份 取余 剩下秒数obj.innerHTML="
2023年
除夕倒计时：
"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"
善良 勇敢 优秀 决不妥协
祝你也祝我
"return true;}document.addEventListener('DOMContentLoaded', function () {function audioAutoPlay() {var audio = document.getElementById('bgmusic');audio.play();document.addEventListener("WeixinJSBridgeReady", function () {audio.play();}, false); } audioAutoPlay(); });
宇宙星空-效果展示

 距离2023.1.1还有27天（天数我是乱写的，并不是按照文章发布时间来写的，大家可以自己修改源码）
1.源码
Documentvar count = document.getElementsByClassName('main');var times0 = document.getElementsByClassName('time');var inputtime = +new Date("2023/01/01 00:00:00");console.log(inputtime); var timer = null;clearInterval(timer)timer = setInterval(countdown,1000)function countdown(){var nowtime = +new Date();var times = parseInt((inputtime - nowtime ) / 1000);if(times >= 0){ var d = parseInt(times/60/60/24);d = d 
 New Year Countdown

00
days
00
hours
00
minutes
00
seconds
2.思路
创建一个计时器函数, 计算出当前时间和目标时间的距离.
利用"setInterval"方法不断调用计时器函数,达到数字变换, 也就是倒计时的效果.
3.步骤(js部分)
 var count = document.getElementsByClassName('main'); var times0 = document.getElementsByClassName('time'); var inputtime = +new Date("2023/01/01 00:00:00"); var nowtime = +new Date(); console.log(inputtime);var timer = null; clearInterval(timer) timer = setInterval(countdown,1000)
A."var"定义变量
 利用"document.getElementsByClassName()"方法提取中已经创建的元素作为js对象.
 类似的方法有:

 B. 获取时间
"+new Date()"方法可以获取当前时间距离"1970年1月1日0时0分0秒’的毫秒数, 利用这点可以获取当前时间.
 括号中若添加具体日期(写法: 年/月/日 时:分:秒 ), 则可以获取具体日期距离"1970年1月1日0时0分0秒’的毫秒数, 利用这点可以获取目标时间.
function countdown(){var times = parseInt((inputtime - nowtime ) / 1000);if(times >= 0){var d = parseInt(times/60/60/24);d = d  最后做一个总的判断:
 如果时间距离大于零, 则做计算, 展现倒计时效果.
 如果距离等于零, 则对函数的反复调用停止, 计时终止
 
if(times >= 0){}else{ clearInterval(timer)}
D.反复调用计时器函数
var timer = null;clearInterval(timer)timer = setInterval(countdown,1000)
var timer = null;clearInterval(timer)timer = setInterval(countdown,1000)
"setInterval()"方法中有两个参数:
 第一个: 将要调用的函数名;
 第二个: 调用的间隔时间, 单位为一毫秒, 自然, “1000"即代表"1秒钟调用一次”
 "clearInterval(timer)"指在调用之前将调用器归零
更多干货
  1. 如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “✍️评论” “收藏” 一键三连哦！
  2. 【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多
     前端 开发者，一起探讨 前端 Node 知识，互相学习」！