七夕將至，我用代碼寫了一個表白神器！

七夕節馬上就要到了，又到了各位單身汪報復社會的時間了。今年的七夕節，各位單身汪們你們準備好了嗎？把電影院的單號座位都訂完？晚上去賓館敲門？用針扎TT？這些老掉牙的整蠱已經落伍啦！那麼如何在今年的七夕玩出花樣呢？俗話說以牙還牙，對於秀恩愛的人最好的反擊方式就是秀回去。作爲技術流程序員的我們，當然要用我們自己的方式來裝一下A+1，沒準你的女神就被你的詩意和才華迷住了喔~

先上效果圖

總體來說有以下幾個特點：

1. 好看的加載界面；
2. 全屏花雨+BGM；
3. I have loved you for 時間流逝（就是你喜歡上人家多長時間了）；
4. 3D旋轉畫廊；
5. 打字機效果；
6. 當然背景和輪廓也很好看啦 ~

具體配置

女神照片畫廊的配置：首頁 index.html 80 行開始：

<div id="perspective">
  <div id='wrap'>
    <img src="./images/lq1.jpg" />
    <img src="./images/lq2.jpg" />
    <img src="./images/lq3.jpg" />
    <img src="./images/lq4.jpg" />
    <img src="./images/lq5.jpg" />
    <img src="./images/lq6.jpg" />
    <img src="./images/lq7.jpg" />
    <img src="./images/lq8.jpg" />
    <img src="./images/lq9.jpg" />
    <img src="./images/lq10.jpg" />
  </div>
</div>

加載動畫插件配置：index.html 第 133 行：

$(".fakeloader").fakeLoader({
    timeToHide:4000, //動畫加載時間，單位毫秒
    bgColor:"#34495e", //背景顏色
    spinner:"spinner3" //加載動畫類型
});

打字機內容配置：romantic.js 配置文件第8行開始：

$("#curs").click(function(){
   var str = '「陸晴」，我喜歡你\n';
   str += '我知道我不會甜言蜜語\n';
   str += '但是我會用行動證明一切\n';
   str += '我相信，陪伴是最好的誓言\n';
   str += '往後餘生裏，風雪是你\n';
   str += '春華是你，秋黃是你\n';
   str += '四季冷暖是你\n';
   str += '目光所至\n';
   str += '都是\n';
   str += '你';
   Printer.init(str, {
        //speed: 90,  //文字速度
        selector: 'canvas',
        //lnStr: 'root@demo ~/ # ',
        //"curSpeed" : 50,
        "speed" : 400,  //文字速度
        // "selector" : 'canvas', //選擇器
        // "startIndex" : 0,   //從第幾個字符開始打印
        // "endIndex" : 0,    //打印到第幾個字符結束
        "hasCur" : true,   //是否顯示光標
         // "curId" : 'cur',   //光標的ID
         // "curStr" : '_', //光標字符
         // "curStyle" : 'font-weight: bold;',  //光標的樣式（CSS樣式）
         "curSpeed" : 800, //光標速度（ms）
         // "lnStr": "" //行首字符
   }).print();
        $("#curs").attr("disabled","disabled");
        $(".contact").css('display','none');
 });

時間流逝的起始時間配置，然後就自動計算你暗戀人家多長時間了哦~：romantic.js 配置文件 51 行開始：

//timer
    function SetTime(){
        var oDay = document.getElementById("t_d");
        var oHours = document.getElementById("t_h");
        var oMinutes = document.getElementById("t_m");
        var oSeconds = document.getElementById("t_s");
        var date1=new Date("Tus Dec 25 2018 00:00:00 GMT+0800"); //開始時間
        var date2=new Date(); //結束時間
        console.log(date2);
        var date3=date2.getTime()-date1.getTime() ;//時間差的毫秒數
		//計算出相差天數
        var days=Math.floor(date3/(24*3600*1000));
		//計算出小時數
        var leave1=date3%(24*3600*1000); //計算天數後剩餘的毫秒數
        var hours=Math.floor(leave1/(3600*1000));
		//計算相差分鐘數
        var leave2=leave1%(3600*1000); //計算小時數後剩餘的毫秒數
        var minutes=Math.floor(leave2/(60*1000));
		//計算相差秒數
        var leave3=leave2%(60*1000); //計算分鐘數後剩餘的毫秒數
        var seconds=Math.round(leave3/1000);
        //alert(" 相差 "+days+"天 "+hours+"小時 "+minutes+" 分鐘"+seconds+" 秒");
        var LoveDay = new Date();
        var ms=0;
        var sec=seconds;
        var min=minutes;
        var hour=hours;
        var day = days;
        timer=setInterval(function(){
            oDay.innerHTML = day;
            oHours.innerHTML = hour;
            oMinutes.innerHTML = min;
            oSeconds.innerHTML = sec;
            //oDiv.innerHTML=time;
            ms=ms+50;
            if(ms>999){
                ms=0;
                sec++;
            }
            if(sec>59){
                sec=0;
                min++;
            }
            if(min>59){
                min=0;
                hour++;
            }
            if(hour>23){
                hour=0;
                day++;
            }

        },50)
    };

網頁源碼

碼雲：https://gitee.com/geekadpt/express

公衆號

LAMPer 技術棧