HTML生日快乐代码

前几天一个朋友找到我,说他女朋友马上过生日,于是想问问我能不能写一个生日祝福代码。好兄弟的请求当然不能拒绝,直接安排!!于是我用html写了一个简单的页面:点开后会显示来到这个世界多长时间和祝福话语,下滑后是自转相册(有背景音乐)。
本文完整项目地址—>>>html生日快乐代码(基础效果)
扫码支付成功会得到百度网盘链接和提取码,下载解压到本地就可以了。

最新生日快乐祝福代码可以查看演示:生日快乐网页演示地址
高级效果请看视频—>>>女朋友生日祝福零点有烟花
这两个是可以代做的(加qq1975728171),把需求发给我然后我做完放服务器上,再给你一个链接就可以在手机或者电脑上访问了。

本文效果如下:(gif的效果看的不是很完整)

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

下滑后有自转照片:


照片可以自己换哦。

完整项目地址—>>>html生日快乐代码(基础效果)

核心代码(不是完整代码):

#head
			{
				width:100%;
				height:100%;
				position: absolute;
				-webkit-transform-style: preserve-3d;
				-webkit-animation:donghua 15s linear 0s infinite;
				-moz-transform-style: preserve-3d;
				-moz-animation:donghua 15s linear 0s infinite;
				-ms-transform-style: preserve-3d;
				-ms-animation:donghua 25s linear 0s infinite;
			}
		#head div
			{	
				position: absolute;
				top:0;
				left:0;
				width:300px;
				height:400px;
				border:1px solid #000
				text-align: center;
				line-height:100px;
			}
		#head div:nth-child(1)
			{
				-webkit-transform:rotateY(0deg) translateZ(400px);
				-moz-transform:rotateY(0deg) translateZ(400px);
				-ms-transform:rotateY(0deg) translateZ(400px);
				background:url(images/01.png);
				background-size:cover;
			}
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--;
    }
  }
}

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;
    }

补充:

很多朋友想手机端发送文件,那就需要换图片的地址和音频的地址,此时只需要发html文件就可以用手机浏览器打开了。

1、图片地址换成图片的链接(一共十个)。
你可以发一个仅自己可见的说说,然后就可以生成图片的链接地址了。
HTML生日快乐代码_第2张图片

2、音乐地址换成音频的链接。
HTML生日快乐代码_第3张图片
对于音频文件,我这里提供一个链接(可能过期):http://music.163.com/song/media/outer/url?id=1337065812.mp3(生日快乐2-李雪莱)
如何换自己喜欢的音乐可以去看我的另一篇博客–>>>怎么获取音乐的链接地址

如果是特定的音频录音,可以用这个方法:利用邮箱附件的形式,比如QQ邮箱,给自己发一封邮件,把音乐以附件的形式附带在上面,收信的时候用来下载附件的那个地址,就是歌曲的下载链接了。
3、生日倒计时怎么改?
HTML生日快乐代码_第4张图片
把这个改成futruetime-nowtime即可。

完整项目:
HTML生日快乐代码_第5张图片

里面有我自己找的十张照片和两个背景音乐(可以换成自己的录音),另外还有详细使用说明
HTML生日快乐代码_第6张图片
这些步骤看起来比较复杂,但是用心弄完之后发现还是很简单的。给女朋友的生日礼物,用心才好呀!觉得复杂或者不会做的可以找我代做,发需求给我就行,做完我放服务器上,给你一个链接就可以访问了。 QQ1975728171

完整项目地址—>>>html生日快乐代码(基础效果)
附带html表白代码大全—>>>html表白代码大全
html女朋友相册代码大全—>>>网页相册代码大全

你可能感兴趣的:(html实例,表白,html,生日快乐,生日祝福,源代码,css)