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

分享到: 更多
有没有赚钱稳赚不赔 重庆时时计划手机软件 二人麻将技巧 玩通比牛牛有什么技巧 黑杰克21棋牌游戏 北京pk10一天多少期 重庆时时三星和值走势图 山东时时官方开奖 北京塞车计划网页版 时时彩组六全包稳赚 三d技巧 大乐透篮球从一到几 网上押龙虎怎么才能赢 看牌抢庄牛牛app 领头羊时时彩最新全天计划 助赢北京pk10app