HTML-告白程序

今天身为单身狗的自己突然之间心血来潮,写了个告白程序,或许是内心的躁动吧,自己虽然是用不上了,但是还是希望与众多的单身汪分享一下。希望全世界都不再有单身狗了,尤其是程序员偷笑。废话不多,下面跟着我一起做来送给心爱的女生吧!


<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的烟花效果,只要一点接受,那么就会弹出放烟花,如果你在他旁边的话,还可以说以后一辈子都陪你看烟花的诺言,女孩肯定泪奔的(个人观点,有点理想化)。如果是拒绝了你,那么就弹出一个二哈出来,可以说是开玩笑的,我就是这个二哈,哈哈哈。(或许你此时应该是想哭的)。


HTML-告白程序3

HTML-告白程序4


拒绝:

HTML-告白程序5

HTML-告白程序6


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>




就这样子,这个程序就做完了。如果有两个程序猿同时用这个方法来表白的话,那么只能说:程序相同不可怕,但是谁丑谁尴尬。

上一篇: Javascript变量作用域详解

下一篇: 前端常见bug系列1:容易被误解的:last-child 和 :first-child

分享到: 更多