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

待我称王封你为后i 2021-11-09 01:42 556阅读 0赞

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

*   *  先上效果图
     *  总体来说有以下几个特点：
     *  具体配置
     *   *  女神照片画廊的配置：首页 index.html 80 行开始：
         *  加载动画插件配置：index.html 第 133 行：
         *  打字机内容配置：romantic.js 配置文件第8行开始：
         *  时间流逝的起始时间配置，然后就自动计算你暗恋人家多长时间了哦~：romantic.js 配置文件 51 行开始：
         *  网页源码
     *  公众号

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtzb2Fyc2t5_size_16_color_FFFFFF_t_70]

> 七夕节马上就要到了，又到了各位单身汪报复社会的时间了。今年的七夕节，各位单身汪们你们准备好了吗？把电影院的单号座位都订完？晚上去宾馆敲门？用针扎TT？这些老掉牙的整蛊已经落伍啦！那么如何在今年的七夕玩出花样呢？俗话说以牙还牙，对于秀恩爱的人最好的反击方式就是秀回去。作为技术流程序员的我们，当然要用我们自己的方式来装一下A+1，没准你的女神就被你的诗意和才华迷住了喔~

## 先上效果图 ##

![在这里插入图片描述][20190806214500164.gif]  
![在这里插入图片描述][20190806215905968.gif]  
![在这里插入图片描述][2019080621452231.gif]

## 总体来说有以下几个特点： ##

1.  好看的加载界面；
2.  全屏花雨+BGM；
3.  I have loved you for 时间流逝（就是你喜欢上人家多长时间了）；
4.  3D旋转画廊；
5.  打字机效果；
6.  当然背景和轮廓也很好看啦 ~

## 具体配置 ##

### 女神照片画廊的配置：首页 index.html 80 行开始： ###

### 加载动画插件配置：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)
        };

### 网页源码 ###

[码云][Link 1]：[https://gitee.com/geekadpt/express][Link 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtzb2Fyc2t5_size_16_color_FFFFFF_t_70 1]

## 公众号 ##

LAMPer 技术栈  
![在这里插入图片描述][20190806215457374.gif]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtzb2Fyc2t5_size_16_color_FFFFFF_t_70]: /images/20211108/0a0cae48a5574f6aa1d22778eece4b35.png
[20190806214500164.gif]: /images/20211108/022180a533364848adbd31ef40279cfc.png
[20190806215905968.gif]: /images/20211108/959b54f9c2c44b349a3434704490108c.png
[2019080621452231.gif]: /images/20211108/4222b9c2379f439c982454b22b6c122b.png
[Link 1]: https://gitee.com/geekadpt/express
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtzb2Fyc2t5_size_16_color_FFFFFF_t_70 1]: /images/20211108/1736effe7f7b459d9131e91375a2945d.png
[20190806215457374.gif]: /images/20211108/36b493f351c0425b9698b62d44c320a7.png