HTML生日快乐代码

最新推荐文章于 2024-03-28 22:35:14 发布

玖疯子

最新推荐文章于 2024-03-28 22:35:14 发布

阅读量1.1k

点赞数

文章标签： html chrome 前端

本文链接：https://blog.csdn.net/2201_75482500/article/details/131541888

版权

写在前面

前几天一个朋友找到我，说他女朋友马上过生日，于是想问问我能不能写一个生日祝福代码。好兄弟的请求当然不能拒绝，直接安排！！于是我用html写了一个简单的页面：点开后会显示来到这个世界多长时间和祝福话语，下滑后是自转相册（有背景音乐）。

基础效果
基础效果如下：（gif的效果看的不是很完整）

这里面的文字可以自行修改，并且时间是会一直走动的。比如你修改代码的出生时间为2000/1/1，那么用现在的时间减去出生时间就会显示来到这个世界多少天。当然你也可以生日改成倒计时，用生日的时间减去现在的时间。

下滑后有自转照片：

照片可以自己换哦。

核心代码（无法运行，需要去下载资源）：

<!doctype html>
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <title>happy birthday!</title>
       <style>
       body
           {
               margin:0;
               background:#000;
           }
h1{
position:absolute;
width: 100%;
top:50%;
text-align: center;
transform:translateY(-50%);
font-family: 'Love Ya Like A Sister', cursive;
font-size: 40px;
color: #c70012;
padding: 0 20px;
}
h1 span{
font-size:30px;
}
h1 p{
font-size:30px;
position:absolute;
}
       </style>
   </head>
   <body>
<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)";

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.οnlοad=function starttime(){

time(h1,'2000/1/1'); // 生日时间
ptimer = setTimeout(starttime,1000); // 添加计时器
}

function time(obj,futimg){
var nowtime = new Date().getTime(); // 现在时间转换为时间戳
var futruetime = new Date(futimg).getTime(); // 未来时间转换为时间戳
var msec = nowtime-futruetime; // 毫秒未来时间-现在时间
var time = (msec/1000); // 毫秒/1000
var 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>你已经来到这个世界：<br>"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"了<br><span>今日是你的生日，愿所有的快乐、所有的幸福、所有的温馨、所有的好运围绕在你身边。生日快乐！</span><p>下<br>滑<br>有<br>惊<br>喜</p>"

return true;
}
</script>
<audio autoplay="autoplay" loop="loop" preload="auto"
src="http://music.163.com/song/media/outer/url?id=1337065812.mp3">
</audio>
   </body>
</html>

玖疯子

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML生日快乐代码

写在前面前几天一个朋友找到我，说他女朋友马上过生日，于是想问问我能不能写一个生日祝福代码。好兄弟的请求当然不能拒绝，直接安排！！于是我用html写了一个简单的页面：点开后会显示来到这个世界多长时间和祝福话语，下滑后是自转相册（有背景音乐）。基础效果基础效果如下：（gif的效果看的不是很完整）这里面的文字可以自行修改，并且时间是会一直走动的。比如你修改代码的出生时间为2000/1/1，那么用现在的时间减去出生时间就会显示来到这个世界多少天。当然你也可以生日改成倒计时，用生日的时间减去现
复制链接

扫一扫