WEB前端开发人员交流社区

搜索
查看: 1577|回复: 3

[JavaScript] 分享一个优雅的约妹子的方法 保准成功

[复制链接]

94

主题

150

帖子

148

积分

管理员

会在前端的道路上一直走下去!

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

积分
148

社区QQ达人

发表于 2016-3-15 18:27:25 | 显示全部楼层 |阅读模式
昨天好像是什么劳什子的白色情人节吧,作为一名code dog 我真不知道啊!

在群里,我看见大姐说,要弄一个页面,看了下,是一个约妹子的页面,如果妹子不同意的话,需要点击关闭!

否则就答应约,那么有人肯定会问了,一个页面,能关闭不了吗?

哼哼,关闭浏览器,那肯定能关闭了啊,但是这不是我们设计计划的所在啊!

要想拒绝,必须点击页面内的一个拒绝按钮,才算拒绝成功哦!

下面,我们来看看实现过程吧!

首先,我们看看css吧


[CSS] 纯文本查看 复制代码
 html,body{
        background-color: #FF6A6A;
        height: 100%;
        position: relative;
    }
    .love_me {
        width: 200px;
        height: 100px;
        font-size: 18px;
        text-align: center;
        color: white;
        line-height: 50px;
        position: fixed;
        top: 0;
        left: 0;
    }
    h1{
        color: #fff;
        font-size: 16px;
        background-color: #FF016F;
        cursor: pointer;
        width: 150px;
        height: 60px;
        margin: 20px auto;
        line-height: 60px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }


css 很简单,就是布局效果,这些没啥说的,HTNL也很简单哦!
[HTML] 纯文本查看 复制代码
<div class="love_me">
    <h1>点击这里拒绝我</h1>
</div>


重要的都会在后面做压轴的!
来吧,首先我们先引入jQuery吧!
[HTML] 纯文本查看 复制代码
<script src="http://cdn.code.fedte.cc/libs/jquery/jquery-1.11.3.min.js"></script>


来上程序的关键代码吧
[JavaScript] 纯文本查看 复制代码
$(function(){
        //1.我们获取窗口的宽高,为了不让红方框出去,备用
        var browserWidth = $(window).innerWidth();
        var browserHeight = $(window).innerHeight();
        //2.鼠标移入到元素的事件,hover有两个参数,写上第一个function,第二个空着就好
        $(".love_me").mousemove(function() {
            //3.循环啊
            while (true) {
                //4.循环的时候随机一个top和left
                var randomTop = parseInt(Math.random() * (browserHeight - 200) );
                var randomLeft = parseInt(Math.random() * (browserWidth - 400) );
                //5.获取元素的位置
                var eventY = $(this).offset().top;
                var eventX = $(this).offset().left;
                //6.设定两个条件 元素和随机数的关系
                var top = randomTop > eventY && randomTop < eventY ;
                var left = randomLeft > eventX && randomLeft < eventX ;
                //7.如果条件都正确结束循环
                if (top && left) {
                    continue;
                    //8.否则就给元素赋新都随机值
                } else {
                    $(this).css({top: randomTop + "px", left: randomLeft + "px"});
                    break;
                }
            }
            console.log("randomTop:"+randomTop +"  randomLeft:"+randomLeft);
            console.log("eventX:"+eventX+"  eventY:"+eventY)
        });
        //如果真被点击上了,那就天意啊,老实的做一个单身汪吧
        $(".love_me h1").click(function(){
           confirm("你真的要拒绝吗?")
        })
    });


代码的功能,已经注释进去了

如果这还是被妹子点上了,只能说你运气差了,千万别放弃,说不定妹子已经答应你了,只是想玩玩这个页面而已,加油吧!

最后,贴上在线演示地址:http://demo.fedte.cc/libs/2016-03-15/loveme.html

@psgr  
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复

使用道具 举报

0

主题

4

帖子

1

积分

前端入门

Rank: 1

积分
1
发表于 2016-3-30 23:16:29 | 显示全部楼层
    我 竟然点进去看了
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复 支持 反对

使用道具 举报

0

主题

4

帖子

1

积分

前端入门

Rank: 1

积分
1
发表于 2016-3-30 23:17:06 | 显示全部楼层
好神奇
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复

使用道具 举报

94

主题

150

帖子

148

积分

管理员

会在前端的道路上一直走下去!

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

积分
148

社区QQ达人

 楼主| 发表于 2016-3-30 23:41:03 | 显示全部楼层

然后 你关闭了吗
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



Archiver|手机版|小黑屋|前端开发技术交流

Copyright © 2009-2015 前端开发技术交流 http://www.fedte.cn 版权所有 All Rights Reserved.

免责声明: 本社区不承担任何由社区会员所提供的信息和工具所引起的争议和法律责任。

GMT+8, 2020-7-5 03:21

快速回复 返回顶部 返回列表