2022跨年-跨年倒计时（烟花）

前言

2022 HAPPY NEW YEAR
马上都是新的一年了，岁末已至，是结束也是开始，不管这一年好和坏，都将结束，愿来年有趣有盼，无灾无难，你我都要平安才好，善良勇敢

跨年倒计时制作步骤
步骤一：
首先在电脑桌面新建txt文本文档，如下

步骤二：
在文本文档添加如下代码：其中倒计时界面会显示愿来年有趣有盼，无灾无难，你我都要平安才好等祝福语，同时会有背景音乐

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新年快乐</title><!-- 这是网页标题 -->
<style>
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;
}
</style></head>
<body>
<h1 id="h1"></h1>
<canvas></canvas> <!--canvas 画布-->
<script>
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 = "red";
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,'2022/2/1');     // 2022年春节时间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*1000 var 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="<br>现在距离2022年还有：<br>"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"<br><span>一列跨年小火车欢快的驶来，<br>秃秃秃秃秃秃秃秃秃秃<br>原来年有趣有盼，无灾无难， <br>你我都要平安才好</span>"return true;}
</script>
<audio autoplay="autoplay" loop="loop" preload="auto"     src=" http://music.163.com/song/media/outer/url?id=1851244378.mp3">
</audio>
</body>
</html>

步骤三：
将txt文本文档修改为html文档，如下

步骤四：
最后双击打开，就会有如下界面

注意：
跨年倒计时可以使用360浏览器，qq浏览器以及其他打开，跨年链接可以手机电脑打开，在代码里添加音乐链接时注意链接正确，完成制作后通过微信，QQ发送好友，好友便可以和你一起跨年咯

2022跨年-跨年倒计时（烟花）相关推荐

2022 新年倒计时烟花HTML源码
新年跨年倒计时源码,你们要的跨年源码他来了!!! 2022 新年倒计时烟花HTML源码...........................
从普本到北大：我的跨校跨专业考研经验
首先做一个我考研情况的简介. 经历了2013年考研的混战,据说是史上考研人数顶峰的年份,因为2014改革,不再有自费生之后,人民群众对于所谓学术硕士的需求量激减,继而投奔价格费用相当,读书年份较少的 ...
Zabbix监控实现跨区域跨网络监控数据
Zabbix监控实现跨区域跨网络监控数据环境: 公司现有服务器10台,其中5台服务器有一台安装了zabbix,并且这5台服务器处于一个网络,只有一台服务器有公网ip, 另外的5台处于另一个网络,仅有 ...
sql语句跨服务器跨数据库执行
加为好友发送私信在线聊天 wuyi8808 空军等级: 可用分等级:富农总技术分:47189 总技术分排名:187 发表于:2009-04-15 21:38:422楼得分:0 sql语句跨服 ...
2020年跨行业跨领域工业互联网平台
2020年跨行业跨领域工业互联网平台来源:工信部 2020年12月,工信部信发司公示"2020年跨行业跨领域工业互联网平台".公示的双跨平台共15家,比2019年十大双跨平台增长 ...
跨湖跨仓场景下如何实现海量数据分钟级分析
本文分享自华为云社区<华为云FusionInsight MRS跨湖跨仓场景下如何实现海量数据分钟级分析>,原文作者:沙漏. 华为开发者大会2021(Cloud)于2021年4月24日-26 ...
国际旅游管理专业跨专业考计算机,第二年跨校跨专业考旅游管理公费成功，一点经验给大家...
两年的摸索,对一个跨校跨专业的我来讲考上了名校的旅游管理公费生,我有话要讲,希望能帮上大家. 旅游管理很强的学校有:二外,中山 ,南开,上海交大-- 比较强的学校有:厦门大学,东北财经 ,北京林业,北 ...
update关联其他表批量更新数据-跨数据库-跨服务器Update时关联表条件更新
1.有时在做项目时会有些期初数据更新,从老系统更新到新系统.如果用程序循环从老系统付给新系统. 2.有时在项目中需要同步程序,或者自动同步程序时会有大量数据更新就可能用到如下方法了. 3.为了做分析, ...
MQTT跨ip/跨机访问
这几天,遇到了需要用到MQTT的时候,而且还需具备跨iP/跨机的,百度了很久都没有解决问题,后来还是自己联想到rabbitmq管理页面的特点才解决的,这个特点就是:http://127.0.0.1:1 ...
dnf跨5无限连接服务器,DNF：跨5跨6被特殊“服务”，请问：会不会有补偿，制裁怎么解决...
原标题:DNF:跨5跨6被特殊"服务",请问:会不会有补偿,制裁怎么解决地下城与勇士这个游戏它是一个画面特别让很多玩家难受的一个游戏,而且它的服务器也确实存在很大的修补空间.有很 ...

2022跨年-跨年倒计时（烟花）

2022跨年-跨年倒计时（烟花）相关推荐

最新文章

热门文章