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

我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

体验地址：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…

最后

朋友表白失败，原因：女方起的没这么早，没有看到后面的表白效果！

哎呀~ 这可不怪我哦！

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

前言

代码实现

最后

猜你喜欢