前幾天一個朋友找到我，說他女朋友馬上過生日，于是想問問我能不能寫一個生日祝福代碼。好兄弟的請求當然不能拒絕，直接安排！！于是我用html寫了一個簡單的頁面：點開後會顯示來到這個世界多長時間和祝福話語，下滑後是自轉相冊（有背景音樂）。
本文完整項目位址—>>>html生日快樂代碼（基礎效果）
掃碼支付成功會得到百度網盤連結和提取碼，下載下傳解壓到本地就可以了。
最新生日快樂祝福代碼可以檢視示範：生日快樂網頁示範位址
進階效果請看視訊—>>>女朋友生日祝福零點有煙花
這兩個是可以代做的（加qq1975728171），把需求發給我然後我做完放伺服器上，再給你一個連結就可以在手機或者電腦上通路了。
本文效果如下：（gif的效果看的不是很完整）
這裡面的文字可以自行修改，并且時間是會一直走動的。比如你修改代碼的出生時間為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、圖檔位址換成圖檔的連結（一共十個）。
你可以發一個僅自己可見的說說，然後就可以生成圖檔的連結位址了。
2、音樂位址換成音頻的連結。
對于音頻檔案，我這裡提供一個連結（可能過期）：http://music.163.com/song/media/outer/url?id=1337065812.mp3（生日快樂2-李雪萊）
如何換自己喜歡的音樂可以去看我的另一篇部落格–>>>怎麼擷取音樂的連結位址
如果是特定的音頻錄音，可以用這個方法：利用郵箱附件的形式，比如QQ郵箱，給自己發一封郵件，把音樂以附件的形式附帶在上面，收信的時候用來下載下傳附件的那個位址，就是歌曲的下載下傳連結了。
3、生日倒計時怎麼改？
把這個改成futruetime-nowtime即可。
完整項目：
裡面有我自己找的十張照片和兩個背景音樂（可以換成自己的錄音），另外還有詳細使用說明。
這些步驟看起來比較複雜，但是用心弄完之後發現還是很簡單的。給女朋友的生日禮物，用心才好呀！覺得複雜或者不會做的可以找我代做，發需求給我就行，做完我放伺服器上，給你一個連結就可以通路了。 QQ1975728171
完整項目位址—>>>html生日快樂代碼（基礎效果）
附帶html表白代碼大全—>>>html表白代碼大全
html女朋友相冊代碼大全—>>>網頁相冊代碼大全