<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            html,body{
                margin:0;
                padding:0;
                width:100%;
                height:100%;
            }
            #box{
                width:1200px;
                height:700px;
                position: absolute;
                top:50%;
                left:50%;
                margin-top:-350px;
                margin-left:-600px;
            }
            span{
                display:block;
                width:300px;
                height:60px;
                line-height: 60px;
                font-size:30px;
                color:#FF0000;
                position: absolute;
                top:50%;
                left:50%;
                margin-top:-30px;
                margin-left:-150px;
            }
            input{
                width:40px;
                height:20px;
            }
            #btnY{
                position: absolute;
                top:400px;
                left:500px;
            }
            #btnN{
                position: absolute;
                top:400px;
                left:580px;
            }
        </style>
    </head>
    <body>
        <div id= "box">
            <span>Do you love me ?</span>
            <input type="button" value="yes" id="btnY"/>
            <input type="button" value="no" id="btnN"/>
        </div>
    </body>
</html>
<script>
    var oBtnY = document.getElementById("btnY");
    var oBtnN = document.getElementById("btnN");
    oBtnY.onclick = function(){
        alert( "哈哈，我也喜欢你" )
    }
oBtnN.onmouseover = function(){
oBtnN.style.left = Math.floor(Math.random()*700)+"px";
oBtnN.style.top = Math.floor(Math.random()*700)+"px";
}
    function haha(){
oBtnN.style.left = Math.floor(Math.random()*700)+"px";
oBtnN.style.top = Math.floor(Math.random()*700)+"px";
}
</script>

随机推荐

  1. java中四种访问修饰符

    Java中的四种访问修饰符:public.protected.default(无修饰符,默认).private. 四种修饰符可修饰的成分(类.方法.成员变量)   public protected d ...

  2. attr()、prop()、css() 的区别

    .attr( ) 可以设置元素的属性(也就是给元素新增加一个原来并不存在的属性)也可以获取元素的本来就有的属性以及额外设置的属性.如果要获取的属性没有设置,那么获取到的结果是 undefined; . ...

  3. centos7上为什么不使用libcgroup进行资源限制

    不使用libcgroup的原因 centos7上使用libcgroup进行资源限制可参考 https://blog.csdn.net/lanyang123456/article/details/814 ...

  4. 由于未能创建Visual C# 2015编译器，因此未能打开项目xxx。请重新安装Visual Studio。

    解决方案1: 清除如下文件夹里的内容. %AppData%\Local\microsoft\VisualStudio\14.0\ComponentModelCache or  C:\Users\DEL ...

  5. 关于div

    <article id="a"> <div class="a1"></div> <div class="a2 ...

  6. js switch 函数类型 序列化 转义

    switch(name){ case '1': age = 123; break; case '2': age = 456; break; default : age = 777; } 函数 func ...

  7. JS 动态加载脚本的4种方法

    有时候我们需要动态的加入适合的js,因为有时候不需要将所有的js都加载进来,以来提高效率,但这种方法比较适合单个js文件比较大的情况 如果js文件都比较小,还是一个js好,这样可以减少连接数.下面是4 ...

  8. Python单元测试框架之pytest 2 -- 生成测试报告

    From: https://www.cnblogs.com/fnng/p/4768239.html Python单元测试框架之pytest -- 生成测试报告 2015-08-29 00:40 by ...

  9. TCP/IP学习20180627-数据链路层-ethernet

    ifconfig :查看主機支持的網絡協議eth0:以太網接口lo:loopback接口 以太网(Ether-net)的定是指数字设备公司( Digital Equipment Corp.).英特尔公 ...

  10. bzoj4980: 第一题

    Description 神犇xzyo听说sl很弱,于是出了一题来虐一虐sl.一个长度为2n(可能有前缀0)的非负整数x是good的,当且仅当 存在两个长度为n(可能有前缀0)的非负整数a.b满足a+b ...