Qixi Festival is approaching, I wrote a confession artifact with code!

The Qixi Festival is coming soon, and it's time for singles to take revenge on society. Are you ready for this year’s Qixi Festival, singles? Have you booked all the single-number seats in the cinema? Knock at the hotel at night? Needle TT? These old-fashioned tricks are out of date! So how to play tricks in this year's Qixi Festival? As the saying goes, a tooth for a tooth, the best way to fight back against someone who shows affection is to show back. As technical flow programmers, of course, we have to install A+1 in our own way. Maybe your goddess will be fascinated by your poetry and talent~

First on the renderings

Generally speaking, it has the following characteristics:

1. Nice loading interface;
2. Full screen flower rain + BGM;
3. I have loved you for time goes by (how long have you been in love with others);
4. 3D rotating gallery;
5. Typewriter effect
6. Of course the background and outline are also very nice~

Specific placement

The configuration of the Goddess Photo Gallery: Home page index.html line 80 starts:

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

Load animation plug-in configuration: index.html line 133:

$(".fakeloader").fakeLoader({
    
    
    timeToHide:4000, //动画加载时间，单位毫秒
    bgColor:"#34495e", //背景颜色
    spinner:"spinner3" //加载动画类型
});

Typewriter content configuration: start from line 8 of the romantic.js configuration file:

$("#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');
 });

Configure the start time of the time lapse, and then automatically calculate how long you have a crush on ~: line 51 of the romantic.js configuration file starts:

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

Web source code

Code Cloud : https://gitee.com/geekadpt/express

the public

LAMPer technology stack