<!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. React V16.x 生命周期调整

    旧声明周期: table th:nth-of-type(5) { width: 400px; } 生命周期 属于阶段 调用次数 是否可以setState 作用 getDefaultProps 创建阶段 ...

  2. Jenkins进阶-用户权限管理(10)

    在版本发布的由于大家的分工不同,所以想通过控制用户的账号达到权限管理,对每个角色进行权限控制,最初通过"项目矩阵授权策略"的策略对每个项目进行单一的权限控制,当时也满足了效果,随着 ...

  3. NET设计模式 第二部分 创建型模式(4)：工厂方法模式（Factory Method）

    工厂方法模式(Factory Method) ——.NET设计模式系列之五 Terrylee,2004年1月2日 概述 在软件系统中,经常面临着“某个对象”的创建工作,由于需求的变化,这个对象的具体实 ...

  4. Spark应用HanLP对中文语料进行文本挖掘--聚类详解教程

    软件:IDEA2014.Maven.HanLP.JDK: 用到的知识:HanLP.Spark TF-IDF.Spark kmeans.Spark mapPartition; 用到的数据集:http:/ ...

  5. SQL2008：WITH MOVE 子句可用于重新定位一个或多个文件

    sql2008数据库 还原备份文件还原产生这个错误的原因是:还原目录下存在多个同名文件, 如图所示,只需要将第2个以及以后的mdf文件改成其它名字就行了,比如s.mdf,s1.mdf等等.

  6. 通过Hibernate API编写访问数据库的代码

    private Configuration config;// 1.声明私有配置对象类private ServiceRegistry serviceRegistry;// 2.声明私有服务注册对象类p ...

  7. Set up an SSH key with Sourcetree on macOS

    1. 打开 sourcetree,进入设置-账户: 2. 选择添加账户,托管主机选择 Bitbucket(或Github),再连接账号,登录已有的 Bitbucket 账号(或 Github 账号), ...

  8. 计算MySQL的内存峰值公式 （转)

    -- 计算MySQL的内存峰值公式,计算所有的连接满了的情况下: select (@@key_buffer_size + @@query_cache_size + @@tmp_table_size   ...

  9. 解决iScroll横向滚动区域无法拉动页面的问题

    近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件.这个体验是实在是无法接受,特别是页面中有多个横向滚动区域 ...

  10. codeblocks “can't find compiler executable in yourconfigured search ……”

    新安装的codeblocks 16.01,安装后打开提示如下,没法用..原因是编译器并没有找对自己安装的 mingw 的安装位置. 解决办法:如下图点击 Auto-detect 之后,会看到位置信息变 ...