情人节程序员用HTML网页表白【告白动画】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

原创

dw静态网页设计 2022-08-08 15:45:23 ©著作权

文章标签 html ide 插入图片 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者dw静态网页设计的原创作品，请联系作者获取转载授权，否则将追究法律责任

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。

(文章目录)

一、网页介绍

1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用

2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

一、网页效果

在这里插入图片描述

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LOVE YOU测试QQ5456429</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" >
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js" ></script>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="container">
    <div class="row col-md-3"></div>
    <div class="row col-md-6" >
        <div class="row question">
            <div class="col-md-6 col-xs-12">
                <p style="line-height: 50px;font-size: 10px;">“小姐姐，我观察你很久了”</p>
                <p style="line-height: 50px;font-size: 20px;">做我女朋友好不好？</p>
            </div>
            <div class="col-md-6 col-xs-12">
                <img src="1.png" alt="" style="height: 200px;">
            </div>
        </div>
        <div class="row question" style="margin-top: 20px;">
            <div class="col-md-6 col-xs-6" style="text-align: center;">
                <button type="button" class="btn btn-success" style="width: 80%" id="no">好</button>
            </div>
            <div class="col-md-6 col-xs-6" style="text-align: center;">
                <button type="button" class="btn btn-danger" style="width: 80%" id="ok">不好</button>
            </div>
        </div>
        <div class="col-md-12 col-xs-12 hide" id="success">
            <img src="666.jpg" alt="" style="width: 100%;">
        </div>
    </div>

    <div class="row col-md-3"></div>

</div>
<script type="text/javascript">
   window.onbeforeunload = function() { 
       return "确认离开当前页面吗？";
   }
    var i=1;
    var ok=false;
    $(document).ready(function(){
        $("#no").click(function(){
            alert("真的吗？你答应了？");
            alert("给我发消息吧，爱你");
            $(".question").addClass('hide');
            $("#success").removeClass('hide');
            ok=true;
        });
        $("#ok").click(function(){
            switch(i){
                case 1:
                    alert("工资上交");
                    break;
                case 2:
                    alert("家务全包");
                    break;
                case 3:
                    alert("房产证写你的名字");
                    break;
				case 4:
                    alert("保大");
                    break;
                case 5:
                    alert("我妈会游泳");
                    break;
                case 6:
                    alert("不跟你吵架，会撒娇 会卖萌");
                    break;
                default:
                    alert("答应我吧");
            }
            i++;
        });
    });
</script>
</body>
</html>