七夕将至，我用代码写了一个表白神器！

七夕节马上就要到了，又到了各位单身汪报复社会的时间了。今年的七夕节，各位单身汪们你们准备好了吗？把电影院的单号座位都订完？晚上去宾馆敲门？用针扎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 技术栈