<!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. malloc的使用、用malloc动态分配内存以适应用户的需求的源代码实例

    int len; ; printf("please enter the size that you want: "); scanf("%d", &len ...

  2. Spring Cloud(Dalston.SR5)--Hystrix 断路器-合并请求

    在 Spring Cloud 中可以使用注解的方式来支持 Hystrix 的合并请求,缓存与合并请求功能需要先初始化请求上下文才能实现,因此,必须实现 javax.servlet.Filter 用于创 ...

  3. jQuery同一标签多个相同事件 return语句 表单提交实例

    如form表单的submit,a标签都自带一个鼠标单击事件,其实我们还可以额外填加单击事件 如:$(':submit').click();   则自定义的单击事件先执行,然后才是标签自带的单击事件(c ...

  4. 开发人员行走Unix的随身四艺

    Unix系统永远只会越来越多,开发人员就没必要特意学习它们的安装.配置和管理了,就全部交给集成人员吧.     但开发人员行走于Unix之间,依然有四样东西要熟练. 一.VI     虽然Unix上的 ...

  5. 查询某个SPID，session_id对应的执行sql.

    select er.session_id, CAST(csql.text AS varchar(255)) AS CallingSQL from master.sys.dm_exec_requests ...

  6. java取余%练习

    package ltb6w1; import java.io.*; public class TestMod { String st; int c; InputStreamReader is=new ...

  7. navigator 判断移动端是Android还是iOS

    let u = navigator.userAgent; let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > - ...

  8. 机器学习-Python中训练模型的保存和再使用

    模型保存 BP:model.save(save_dir) SVM: from sklearn.externals import joblib joblib.dump(clf, save_dir) 模型 ...

  9. 一个关于WCF调用远程链接返回405错误不允许使用此方法的问题

    最近在调试WCF的接口时一直返回“405不允许使用此方法”,这个问题困扰了大半天,网上查了各种办法,但是每个人遇到的问题不同还是不能解决. 最后无意之中发现问题所在,记录一下帮助后面的同学解决问题. ...

  10. vue父子组件（1.0）

    1.父子组件 在上一篇随笔中展示了vue的组件,当我们继续在组件中写组件,形成组件嵌套的时候,就是我们所说的父子组件了. <!DOCTYPE html> <html lang=&qu ...