程序员html5表白网页 html表白小程序

标题今天就写一个差不多最近特别火的类似辞职报告的小程序，不过我这个表白小程序哈！

HTML文件的：

<title>表白信</title>
<style>
<meta charset="UTF-8">
<title>表白信</title>
<style>
    html, body {
        margin: 0;
        padding: 0;
        background: #f2f1f6;
    }
    .container {
        position: relative;
        width: 500px;
        height: 300px;
        background: #f2f1f6;

    }
    .container h1 {
        margin-top: 0;
        text-align: center;
    }
    .container img {
        vertical-align: -70px;
    }
    .bd {
        padding-left: 30px;
    }
    .ft {
        position: absolute;
        width: 100%;
        bottom: 20px;
        padding: 0 30px;
        line-height: 30px;
        box-sizing: border-box;
    }
    .btn-group {
        float: left;
    }
    .fr {
        float: right;
    }
    button {
        cursor: pointer;
    }
    #p1 {
    }
    .not-allow {
        position: relative;
    }
    #p2 {
        display: none;
    }
    .red {
        margin: 0;
        font-size: 24px;
        padding: 30px 40px;
        color: red;
        letter-spacing: 4px;
    }
    .wavy {
        text-decoration: underline;
        text-decoration-style: wavy;
    }
    .name {
        padding-left: 10px;
    }
    .btn {
        padding: 6px 12px;
    }
</style>

内容

<div class="container">
    <div id="p1">
        <h1>表白信</h1>
        <div class="bd">
            致某某某小朋友: <img  src="自己找想要放置的图片"  swidth="120"/>
        </div>
        <div class="ft">
            <div class="btn-group">
                <button class="btn allow">同意</button>
                <button class="btn not-allow" id="not-allow">不同意</button>
            </div>
            <div class="fr">
                 <span class="name">  </span>
            </div>
        </div>
    </div>
    <div id="p2">
        <h2 class="red">
            恭喜<span class="wavy">你</span>已经是我的人啦！！！<br/>
            哈哈哈哈哈哈哈
        </h2>
        <div class="ft">
            <button class="btn fr exit">退出</button>
        </div>
    </div>
</div>
<script>
    (function(){
        function $(selector) {
            return document.querySelector(selector);
        }
        var $p1 = document.getElementById('p1');
        var $p2 = document.getElementById('p2');
        var $container = $('.container');
        var $btn = $('#not-allow');
        var isBlockClose = true;

        var maxX = $container.clientWidth - 1, maxY = $container.clientHeight - 1;
        var originPos = $btn.getBoundingClientRect();

        $('.allow').addEventListener('click', function() {
            $p1.style.display = 'none';
            $p2.style.display = 'block';
        });
        $btn.addEventListener('mouseover', function() {
            this.style.left = Math.floor(Math.random() * maxX - originPos.left) + 'px';
            this.style.top = Math.floor(Math.random() * maxY - originPos.top) + 'px';
            //console.log(this.style.left, this.style.top);
        });
        $('.exit').addEventListener('click', function() {
            isBlockClose = false;
            window.close();
        });
        window.addEventListener('beforeunload', function(e) {
            if (isBlockClose) {
                alert("此路不通");
                e.returnValue = false;
                e.preventDefault();
                return "此路不通";
            }
        });
    })();
</script>

结束啦！需要给大家参考参考！我还是一个学生哈，如有不足，欢迎大家前来指教！