master

分支 (1)

管理

管理

master

jl
/
index.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="language" content="zh-CN">
    <meta name="title" content="爱心代码">

    <title>💗生日快乐💗</title>

    <link rel="stylesheet" href="./style/main.css">
    <style type="text/css">
        body {
            margin: 0;
            height: 100vh;
            overflow: hidden;
            background: rgb(4, 4, 22);
        }

        #contents {
            color: #f584b7;
            font-size: 1.5em;
            text-align: center;
            width: 100%;
            height: 100px;
            text-transform: none;
        }
        .type_words{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:180px;height:180px;color:#f1dadb;padding:20px;text-transform:lowercase;}
    </style>
</head>

<body onclick="bodyPlayMusic()">


    <div class="type_words" id="contents">给你的爱心</div>
    <canvas id="pinkboard" width="1707" height="868"></canvas>
    <canvas id="heart" width="700" height="500"></canvas>

    <audio id="audio" src="https://music.163.com/song/media/outer/url?id=27130317.mp3" preload="auto"
        loop="loop"></audio>
    <script>
        var shouci = true;
        console.log(shouci);
        function bodyPlayMusic() {
            if (shouci) {
                shouci = false;
                audio.play();
                console.log(shouci);
            }
        };
    </script>
    <script src="./js/lxheart.js"></script>
    <script src="./js/filltext.js"></script>
    <script>
        var texts = ['❤️','我爱你', '三生有幸遇见你', '❤️'];

        var params = new URLSearchParams(window.location.search);
        var text = params.get('text');
        var word = params.get('word');
        if (text) {
            texts = text.split(',')
        }
        document.getElementById('contents').innerHTML = word || '张佳丽, 生日快乐！';

        renderLxHeart(document.getElementById('heart'), '#f584b7');
        fillText(document.getElementById('pinkboard'), texts)
    </script>
</body>

</html>