情人节搞笑表白程序

编辑:谯胜平      分类:web      标签:web      发布时间:2019-02-17      浏览次数:2614

一、效果

使用html写的一个有趣的表白页面,鼠标始终点击不到“不同意”按钮。对方只能“同意”做你的女朋友。

预览页面:https://www.qsp.net.cn/extend/biaobai/demo.html

二、原理

新建一个div作为弹出窗口,分别为“同意”按钮绑定onclick事件和为“不同意”按钮绑定onmousemove事件;并设置“不同意”按钮的position属性为absolute,当鼠标靠近“不同意”按钮时,通过js随机设置按钮的位置,即可实现鼠标点击不到按钮了。

三、代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>傻瓜,我喜欢你很久了!</title>
    <link rel="icon" href="./heart.ico" type="image/x-icon"/>
</head>
<body>
</body>
<script type="text/javascript">

    msgbox('表白信','做我女朋友好吗?','msgbox(\'操作提示\',\'谢谢媳妇!\',\'\',null,0,\'./after.gif\', 0)',1,1,"./before.gif", 1);
    
    /*        
    参数列表说明
    title:弹出对话框的标题,标题内容最好在25个字符内,否则会导致显示图片的异常                   
    text:弹出对话框的内容,可以使用HTML代码,例如<font color='red'>删除么?</font>,如果直接带入函数,注意转义
    func:弹出对话框点击确认后执行的函数,需要写全函数的引用,例如add(),如果直接带入函数,注意转义。
    cancel:弹出对话框是否显示取消按钮,为空的话不显示,为1时显示
    focus:弹出对话框焦点的位置,0焦点在确认按钮上,1在取消按钮上,为空时默认在确认按钮上
    icon:弹出对话框的图标
    */ 
    function msgbox(title,content,func,cancel,focus,icon, agree){   
        create_mask();
        var temp = null;
        //width:800px是对话框的宽度,高度由图片的高度加上标题高度决定
        //如果点击了同意之后,则重新生成mmsgbox,新的msgbox只显示图片和字体,不显示“同意”和“不同意”按钮
        if(agree){
            temp="<div style=\"width:800px;border: 2px solid pink;"
            +"background-color: #fff; "
            +"font-weight: bold;font-size: 12px;\" >"
            +"<div style=\"line-height:60px; padding:0px 10px;"
            +"background-color: pink;font-size:30px;\">"
            +title+"</div>"
            +"<table  cellspacing=\"0\" border=\"0\"><tr><td><img src=\""
            +icon+"\" width=\"400\" height=\"400\"></td>"
            +"<td ><div style=\"background-color: #fff;font-weight: bold;"
            +"font-size: 25px;margin-top:-20px;margin-left:50px;"
            +"padding:20px 20px ; text-align:left;\">"
            +content
            +"</div></td></tr></table>"
            +"<div style=\"padding:0px 0px 20px;margin-top:-80px;"
            +"margin-bottom:20px;margin-left:440px;\">"
            +"<input type='button'  style=\"border:1px solid pink; background-color:pink; "
            +"outline:none;cursor:pointer;border-radius:5px; "
            +"width:100px; height:40px;font-weight:bold;"
            +"font-size:25px;\" value='同意'id=\"msgconfirmb\" "
            +"onclick=\"remove();"+func+";\" >";
        }
        else{
            //第一次打开显示的内容
            temp="<div style=\"width:800px;border: 2px solid pink;background-color: "
            +"#fff; font-weight: bold;font-size: 12px;\" >"
            +"<div style=\"line-height:60px; padding:0px 10px;"
            +"background-color: pink;font-size:30px;\">"
            +title+"</div>"
            +"<table  cellspacing=\"0\" border=\"0\"><tr><td><img src=\""
            +icon+"\" width=\"400\" height=\"400\"></td>"
            +"<td ><div style=\"background-color: #fff; font-weight: bold;font-size: 25px;"
            +"margin-top:-20px;margin-left:50px;padding:20px 20px ; text-align:left;\">"
            +content
            +"</div></td></tr></table>";
        }
        //“不同意”按钮
        if(null!=cancel){
            temp+="   <div style=\"position:absolute;top:386px;left:570px;\""
            +" id=\"notagree\"><input type='button' "
            +"style=\"border:1px solid pink; background-color:pink; outline:none;"
            +"cursor:pointer;border-radius:5px; "
            +"width:100px;height:40px;font-weight:bold;font-size:25px;\""
            +"value='不同意'  id=\"msgcancelb\" "
            +"onmousemove='move()' > </div>";
        }
        temp+="</div></div>";
        create_msgbox(800,500,temp);
        if(focus==0||focus=="0"||null==focus){
            document.getElementById("msgconfirmb").focus();
        }
        else if(focus==1||focus=="1"){
            document.getElementById("msgcancelb").focus();
        }            
    }
    function get_width(){
        return (document.body.clientWidth+document.body.scrollLeft);
    }
    function get_height(){
        return (document.body.clientHeight+document.body.scrollTop);
    }
    function get_left(w){
        var bw=document.body.clientWidth;
        var bh=document.body.clientHeight;
        w=parseFloat(w);
        return (bw/2-w/2+document.body.scrollLeft);
    }
    function get_top(h){
        var bw=document.body.clientWidth;
        var bh=document.body.clientHeight;
        h=parseFloat(h);
        return (bh/2-h/2+document.body.scrollTop);
    }
    function create_mask(){//创建遮罩层的函数
        var mask=document.createElement("div");
        mask.id="mask";
        mask.style.position="absolute";
        mask.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=25)";//IE的不透明设置
        mask.style.opacity=0.4;//Mozilla的不透明设置
        mask.style.background="black";
        mask.style.top="0px";
        mask.style.left="0px";
        mask.style.width=get_width();
        mask.style.height=get_height();
        mask.style.zIndex=1000;
        document.body.appendChild(mask);
    }
    function create_msgbox(w,h,t){//创建弹出对话框的函数
        var box=document.createElement("div")    ;
        box.id="msgbox";
        box.style.position="absolute";
        box.style.width=w;
        box.style.height=h;
        var wid = document.documentElement.clientWidth;
        var hei = document.documentElement.clientHeight;

        //设置主体对话框的位置
        box.style.top=(hei - 600) / 2 + "px"; 
        box.style.left=(wid - 800) / 2 + "px"; 

        box.style.overflow="visible";
        box.innerHTML=t;
        box.style.zIndex=1001;
        document.body.appendChild(box);
        re_pos();
    }
    function re_mask(){
        /*
        更改遮罩层的大小,确保在滚动以及窗口大小改变时还可以覆盖所有的内容
        */
        var mask=document.getElementById("mask")    ;
        if(null==mask)return;
        mask.style.width=get_width()+"px";
        mask.style.height=get_height()+"px";
    }
    function re_pos(){
        /*
        更改弹出对话框层的位置,确保在滚动以及窗口大小改变时一直保持在网页的最中间
        */
        var box=document.getElementById("msgbox");
        if(null!=box){
            var w=box.style.width;
            var h=box.style.height;
            box.style.left=get_left(w)+"px";
            box.style.top=get_top(h)+"px";
        }
    }
    function remove(){
        /*
        清除遮罩层以及弹出的对话框
        */
        var mask=document.getElementById("mask");
        var msgbox=document.getElementById("msgbox");
        if(null==mask&&null==msgbox)return;
        document.body.removeChild(mask);
        document.body.removeChild(msgbox);
    }
    
    function re_show(){
        /*
        重新显示遮罩层以及弹出窗口元素
        */
        re_pos();
        re_mask();    
    }
    function load_func(){
        /*
        加载函数,覆盖window的onresize和onscroll函数
        */
        window.onresize=re_show;
        window.onscroll=re_show;    
    }
    function move(){
        /**
        鼠标放上去之后按钮位置发生变化;
        */
        var button=document.getElementById("notagree");
        var siteX = Math.random()*(700-0)+0;
        var siteY = Math.random()*(360-60)+60;
        button.style.top=siteY + "px";
        button.style.left=siteX + "px";
    }
</script>
</html>

四、参考文献

https://www.cnblogs.com/IT-Bear/archive/2012/05/23/2514752.html



看不清?换一个