愚人节用网页恶搞表白的小demo

javascript 2020-03-28 314 次浏览 次点赞

灵感来源

昨天刷到一个小视频,标题好像叫什么有个程序猿儿子。
原视频地址https://v.qq.com/x/page/w30633t4h4p.html
看完之后我一想,能不能用javascript脚本在web端实现呢。

核心代码
想完就开始干了,下面是核心代码。

var stylehide="display:none";
function tz1(){
document.getElementById("page1").style = stylehide;
document.getElementById("page2").style = "";
}
function tz2(){
document.getElementById("page2").style = stylehide;
document.getElementById("page3").style = "";
}
function an(){
var site = Math.round(Math.random()*(800-10)+10);
var top1 ="top:"+site+"px";
var left1 ="left:"+site+"px";
var wc =top1+";"+left1;
document.getElementById("an3").style="";
document.getElementById("an3").style=wc;
}

原理很简单,因为是三个页面所以我把三个页面都写到一个html里面,再用css的display:none来控制隐藏,当用户点击按钮时触发事件。
其次最关键的地方就是让有一个按钮实现鼠标一靠近就自动移动,我自然就想到了onmousemove事件。
最后再用html和css美化一下界面就完成了。
完整代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>启奏父皇demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
<style type="text/css">
body
    {
        margin:0;
    }
    .bgpic{
        position:absolute; margin:0 auto;height:900px;width:100%;background-image:url("bg.jpg");
    }
    .bgpic .mizou{margin:10% auto 10%; height:200px; width:20%;background-color: aliceblue; border-style: double;border-color: black;text-align: center;}
    .bgpic .mizou span{width:20%;line-height:200px;font-size:100px;font-family:隶书;}
    .bgpic .text p{margin:10% auto 10%;text-align: center;font-family:隶书;font-size:60px; }
    .bgpic .jiantou{margin:10% auto 10%;text-align: center;}
    .bgpic input{text-align:center;height:100px; width:10%; font-size:20px;}
    #an3{position:absolute;}
</style>
<script type="text/javascript">
var stylehide="display:none";
function tz1(){
document.getElementById("page1").style = stylehide;
document.getElementById("page2").style = "";
}
function tz2(){
document.getElementById("page2").style = stylehide;
document.getElementById("page3").style = "";
}
function an(){
var site = Math.round(Math.random()*(800-10)+10);
var top1 ="top:"+site+"px";
var left1 ="left:"+site+"px";
var wc =top1+";"+left1;
document.getElementById("an3").style="";
document.getElementById("an3").style=wc;
}
</script>
</head>
<body>
    <div class="bgpic" id="page1" style=" ">
    <div class="mizou">
    <span>密&nbsp;&nbsp;奏</span>
    </div>
    <div class="jiantou">
    <input type="button" id="an1" value="批阅" onClick="tz1();"/>
    </div>
    </div>
    <div class="bgpic" id="page2" style="display:none">
    <div class="text">
    <p>儿&nbsp;臣&nbsp;近&nbsp;日&nbsp;生&nbsp;活&nbsp;拮&nbsp;据&nbsp;,
        <br>望&nbsp;父&nbsp;皇&nbsp;封&nbsp;一&nbsp;千&nbsp;银&nbsp;两&nbsp;。</p>
    </div>
    <div class="jiantou">
    <input type="button" id="an2" value="准奏" onClick="tz2();"/>
    </div>
    <input type="button" id="an3" value="不准" style="top:520px;left:600px;" onmousemove="an();"/>
    </div>
    <div class="bgpic" id="page3" style="display:none">
    <div class="text">
    <p>谢<br>父<br>皇</p>
    </div>
    <div class="jiantou">
    <img src="thanks.gif" />
    </div>
    </div>
</body>
</html>

启奏父皇demo演示地址如下:http://blog.8wkj.com/demo/kingdemo.html
恶搞表白demo演示地址如下:http://blog.8wkj.com/demo/mlovedemo.html

后来又看到有人在求告白网站的源码,一想,又搞了一个表白版或者叫恶搞版,只能点喜欢。

然后搞完才发现恶搞表白移动端存在两个问题。
第一,移动端根本tm不用鼠标,所以触发不了事件,只有在用户点击不喜欢时才会随机移动。
第二,就是写的自适应页面有点小问题,所以当用户点击不喜欢的时候会跳出屏幕外。
所以就放弃挣扎了......


本文由 大古 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论