likes
comments
collection

三年前帮朋友写的七夕表白网页

作者站长头像
站长
· 阅读数 10

体验地址:xeblog.cn/demo/love/3…

前言

三年前的七夕前夕,有个朋友找到我说:你是程序员,那你肯定会写表白程序吧,能不能帮我写一个?

三年前帮朋友写的七夕表白网页

我只是个后端啊,写啥写啊,无语子...

三年前帮朋友写的七夕表白网页

之后,我想出了一个表白创意,这个创意可不得了,没有250的智商真就想不到,嘻嘻~

这个创意就是,打开网页,并不会立即表达出自己的表白意向,只有当时间到达“5:20”分时,这个意向才会出现!

说实话,这个表白页有亿点土,哈哈哈,而且最后的粒子效果还是我从网上复制过来的,嘻嘻~

三年前帮朋友写的七夕表白网页

代码实现

首页代码

代码非常的简单,就是显示一行文字。

不过,需要埋点东西:

  • 渲染粒子效果的画布
  • 背景音乐
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>告诉你一个秘密</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-size: 0px;
            background: #333333;
        }

        canvas {
            background: #FFD2FF;
            width: 100vw;
            height: 100vh;
            display: none;
        }

        .content {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 15%;
            text-align: center;
        }

        .content p {
            font-size: 35px;
            color: #AA3C3C;
        }
    </style>
</head>
<body>
<div class="content">
    <p>
        <span class="out">当时间走到</span>
        <span id="i">5</span>
        <span class="out">:</span>
        <span id="love">2</span>
        <span id="you">0</span>
        <span class="out">分时,我会告诉你一个秘密哦!</span>
    </p>
</div>
<canvas id="scene"></canvas>
<audio id="bgm" src="https://oss.xeblog.cn/prod/69d2bf107ba24b8c1df9f50dff02406d.mp3" loop></audio>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

JavaScript 核心代码

当时是用的 JQuery 写的,哈哈哈。

就是有个定时器一直在定时调用 show() 方法,这个方法会获取当前的系统时间,然后判断当前时间是否是 5:20 分,当条件满足时,会播放背景音乐,并将 5:20 替换为 I Love You,首页的其它文字全部消失,最后会调用 showName() 方法用粒子效果显示对方的名字,嘿嘿~

function show() {
    if (flag) {
        return;
    }

    var nowDate = new Date();
    var h = nowDate.getHours();
    var m = nowDate.getMinutes();
    if (h == 5 && m == 20) {
        flag = true;
        document.getElementById('bgm').play();
        $('.out').fadeOut(5000, function () {
            $('#scene').fadeIn(2000, function () {
                $('#i').text('I');
                $('#love').text('Love');
                $('#you').text('You');
                count++;
                showName();
            });
        });
    }

    setTimeout(show, 1500);
}

url 上获取名字,参数是 for=名字

$(function () {
    var val = getParam('for');
    name = val == null || val.trim().length < 1 ? name : val;
    show();
});

function getParam(key) {
    var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return decodeURI(r[2]);
    }

    return null;
}

完整代码:github.com/anlingyi/lo…

体验地址:xeblog.cn/demo/love/3…

最后

朋友表白失败,原因:女方起的没这么早,没有看到后面的表白效果!

哎呀~ 这可不怪我哦!

三年前帮朋友写的七夕表白网页