马上就是是情人节啦!有没有准备怎么跟自己心仪的人渡过?
程序员们今天可以约妹子了,给她发个网页约她。如果她不同意,就把这个方框点没。
当然,你怎么能让她点没呢!当然是让她 点!不!到!
写个很贱很贱的代码给大家玩一玩吧!
html:
美女!和我约会吧
不同意请点击
css:
html,body{
background-color:yellow;
height:100%;
position:relative;
}
.love_me{
width:200px;
height:100px;
background-color:red;
font-size:18px;
text-align:center;
color:white;
line-height:50px;
position:fixed;
top:;
left:;
}
最重要的地方了!逻辑部分,我们不要让她的鼠标能触碰到那个红色的小方块。
$(function() {
//1.我们获取窗口的宽高,为了不让红方框出去,备用
varwindowWidth=$(window).innerWidth();
varwindowHeight=$(window).innerHeight();
vardivWidth=$(".love_me").outerWidth();
vardivHeight=$(".love_me").outerHeight();
//2.鼠标移入到元素的事件,hover有两个参数,
//写上第一个function,第二个空着就好
$(".love_me").hover(function() {
//1.循环
do{
//2.获取随机数
varrandomTo=parseInt(Math.random() *
(windowHeight-divHeight));
varrandomLeft=parseInt(Math.random()*
(windowWidth-divWidth));
//3.元素位置
vardivY=$(this).offset().top;
vardivX=$(this).offset().left;
//4.判断随机数是否在元素范围内
vartopInRange=randomTop>
divY&&randomTop
varleftInRange=randomLeft>
divX&&randomLeft
}while(topInRange&&leftInRange);
//如果在如果不在终止循环
//5.给元素的top和left赋值随机数
$(this).css({top:randomTop+"px",
left:randomLeft+"px"});
},function() {
});
});
在妹子抓狂之前点不到它,趁着她正关不上的时候,赶紧去约她吧!
领取专属 10元无门槛券
私享最新 技术干货