浪漫情怀的灵魂·520表白源码

我就不思

已于 2022-05-19 17:04:47 修改

阅读量277

点赞数

分类专栏：臭味相投 CSS 文章标签： javascript css3 css

于 2022-05-12 17:57:19 首次发布

本文链接：https://blog.csdn.net/weixin_45788691/article/details/124736539

版权

CSS 同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

臭味相投

2 篇文章 0 订阅

订阅专栏

看到一堆人写这东西还收费，我就佛了，特喵我直接弄了一个，代码都差不多，各位朋友拿去用！

目录概览

- 来打我呀！
- 520表白源码

来打我呀！

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
</head>
<body>
    <div class="container">
        <div id="p1">
            <h1>来打我呀</h1>
            <div class="bd">
                傻乎乎的XXX: <img src="https://img1.baidu.com/it/u=3462519819,4249726035&fm=26&fmt=auto" width="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">XXX</span>
                </div>
            </div>
        </div>
        <div id="p2">
            <h2 class="red">
                就说你打不到我吧，还不信！</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>
</body>
</html>

520表白源码

一年一度的520就是明天了！兄弟们，你们准备好了吗？用代码表白的浪漫不是每个人的会的哦！！！有的人用鲜花，有的人用戒指，有的人写情书。。。。但是情书也有情书的格式的，不只只是单调的文字，但是用了代码的情书就是截然不同的哈！！！浪漫与情调相结合，制造出专属于你们两个人独有的浪漫气氛，这是金钱都买不到的！！！如果是有情调的书写人，记录这他（她）对于你的专属的记忆和怀念。

如果是偷偷暗恋你的人写的话，就更加有一点羞涩的味道了，他（她）会更加会对于你的点点滴滴记录得发自内心的情怀之语；

如果是老夫老妻的话，他（她）肯为你写这的话，柴米油盐的生活下，绝对是恩爱的真心，生活的压迫下还能这样留意这你的生活，毋庸置疑的真爱；

如果只是想玩玩的人，其实他（她）没必要劳眼劳肺得写这东西的，互联网时代，手机看一遍的东西，一般不会看第二遍的了，还不如直接520红包，1314转账，99朵玫瑰花。。。

所以，被接收这文件的人，记得好好珍惜发文件的人哈！发文件的人，你是好样的，这虽然没有金钱的味道，但是这比金钱更加有味道，青春羞涩的味道，一起经历风风雨雨的酸甜苦辣的味觉！！！！！！！！！！！！！！！！！！！！！！！！！

520表白源码，绝对干货（去下载）

不用谢！！！
程序员不仅仅只有代码，还有诗和远方！谁说程序员就是闷葫芦了！
更多有趣的灵魂更新中…