今天身为单身狗的自己突然之间心血来潮,写了个告白程序,或许是内心的躁动吧,自己虽然是用不上了,但是还是希望与众多的单身汪分享一下。希望全世界都不再有单身狗了,尤其是程序员。废话不多,下面跟着我一起做来送给心爱的女生吧!
<html> <head> <meta charset="utf-8"> <style> </style> </head> <body> </body> <script> </script> </html>
首先我们的基础框架如上图,写好这个还是没有东西显示的,毕竟是基本框架而已。之后我们就添加一个背景图给它吧。这个背景图其实是在网上找的一个风景图,然后用ps来p些文字上去的。
css代码:
body{ margin: 0; padding: 0; background-image: url(res/1.jpg); background-size: 100% 100%; width: 100%; height:100%; }
看到这么美丽的风景,而且这么大的表白文字,敢问有多少女生是不为之心动呀!但是这只是第一步,仅仅靠这一步还是不够的,接下来在将浪漫升级。
在这个环境里,当然是要有优美的歌曲才能更加浪漫呀。
html代码:
<video src="res/1.mp3" autoplay="autoplay">您的浏览器不支持 video 标签。</video>
所有的浪漫环境都创造出来了,所以我们就应该要让女生选择了。毕竟增加一些互动是非常重要的。(虽然我也没试过,嘻嘻)
css代码:
#btn1{ position: absolute; top:40%; left:40%; background-size: 100% 100%; } #btn2{ position: absolute; top:60%; left:40%; background-size: 100% 100%; }
html代码:
<input id="btn1" type="image" src="res/2.png" onclick="a1();" /> <input id="btn2" type="image" src="res/3.png" onclick="a2();"/>
接下来的话,那就是为点击事件添加一个反应吧,毕竟没有人会傻到喜欢点击按钮后没有反应吧,这里我们使用一个网上找到的一个代码,那就是canvas的烟花效果,只要一点接受,那么就会弹出放烟花,如果你在他旁边的话,还可以说以后一辈子都陪你看烟花的诺言,女孩肯定泪奔的(个人观点,有点理想化)。如果是拒绝了你,那么就弹出一个二哈出来,可以说是开玩笑的,我就是这个二哈,哈哈哈。(或许你此时应该是想哭的)。
拒绝:
css代码:
img{ position: absolute; top:40%; left:35%; width: 30%; height:25%; background-size: 100% 100%; display: none; z-index: 2; }
js代码:
<script> function a1(){ alert('你好!我的女朋友!'); window.open("1/index.html"); } function a2(){ alert('你好!我的好朋友!'); document.getElementById("img").style.display = "block"; } </script>
就这样子,这个程序就做完了。如果有两个程序猿同时用这个方法来表白的话,那么只能说:程序相同不可怕,但是谁丑谁尴尬。