提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

HTML情人节表白代码，给女朋友的电子情书代码，女朋友表白代码

HTML 代码
2023-03-31 10:35:28 时间

HTML情人节表白代码，给女朋友的电子情书代码，女朋友表白代码,可更换照片及表白内容。
使用方法
1、表白对话在assets/dialog.json

2、女朋友照片放在img中，直接替换即可

3、代码包需要放在WEB服务器里运行，本地用浏览器直接打开index.html无法从json文件里读取相应的照片及表白的话。
运行效果
在这里插入图片描述
完整代码下载地址：HTML情人节表白代码，给女朋友的电子情书代码，女朋友表白代码
index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=100%, initial-scale=1">
        <title>与宝贝聊天中</title>
        <link href="css/main.min.css" rel="stylesheet" type="text/css">
        <link rel="Shortcut Icon" href="favicon.ico"/>
        <link rel="preload" href="img/love-the-girl.jpg" as="image">
        <link rel="preload" href="img/news-wuhanfeiyan.jpg" as="image">
        <link rel="preload" href="img/separate.jpeg" as="image">
        <link rel="preload" href="img/in-sichuan.jpeg" as="image">
        <link rel="preload" href="img/lucky-me.jpg" as="image">
        <link rel="preload" href="img/breakfast.jpg" as="image">
        <link rel="preload" href="img/exercise-together.jpg" as="image">
        <link rel="preload" href="img/travel.jpg" as="image">
        <link rel="preload" href="img/foot.jpg" as="image">
        <link rel="preload" href="img/marry-me.png" as="image">
        <link rel="preload" href="img/kiss-my-princess.png" as="image">
    </head>
    <body>
        <div id="mobile" :class="{ 'has-prompt': hasPrompt }">
            <div id="mobile-head">
                <div id="mobile-head-title">与宝贝聊天中</div>
            </div>
            <div id="mobile-body">
                <div id="mobile-body-bg"></div>
                <div id="mobile-body-content">
                    <div id="mock-msg-row" class="msg-row">
                        <div id="mock-msg" class="msg" v-html="latestMsgContent"></div>
                    </div>
                    <div class="msg-row"
                        v-for="(msg, index) in messages"
                        :key="index"
                        :class="msg.author === 'author' ? 'msg-author' : 'msg-me'">
                        <div class="msg"
                            :class="'msg-bounce-in-' + (msg.author === 'author' ? 'left': 'right')"
                            :style="msg.width && msg.height && {width: msg.width - 26 + 'px', height: msg.height - 18 + 'px'}"
                            v-html="msg.content"></div>
                    </div>
                </div>
            </div>
            <div id="mobile-foot">
                <div id="prompt">
                    <div id="prompt-head">
                        <div class="say-something">我想说……</div>
                        <a href="javascript:;" class="close-btn"
                            v-on:click="togglePrompt(false)"></a>
                    </div>
                    <div id="prompt-body">
                        <ul class="responses" v-if="lastDialog">
                            <li v-for="res in lastDialog.responses">
                                <a href="javascript:;" v-on:click="respond(res)">{{ res.content }}</a>
                            </li>
                        </ul>
                        <div class="next-topic"
                            v-if="!lastDialog || !lastDialog.responses">
                            <ul class="topics">
                                <li v-for="topic in nextTopics">
                                    <a href="javascript:;" v-on:click="ask(topic)">{{ topic.brief }}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="input-hint" class="say-something"
                    v-on:click="togglePrompt(true)"
                    :class="{'clickable': !isTyping }">
                    <span v-if="!isTyping">我想说……</span>
                    <span v-if="isTyping">江叔叔正在输入中</span>
                </div>
            </div>
            <div id="prompt-bg" v-on:click="togglePrompt(false)"></div>
        </div>

        <div class="extra-link" id="meta-link">
            <a class="letters" href="https://blog.csdn.net/weixin_42756970" target="_blank">
                源码
            </a>
        </div>

        <script src="//cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
        <script src="//cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>

        <script src="js/index-min.js"></script>
    </body>
</html>

dialog.json

{
    "fromMe": [{
        "id": "0000",
        "details": [
            [
                "💐💐💐情人节快乐💐💐💐",
                "我的宝贝😘",
                "🌹🌹🌹送你花花🌹🌹🌹",
                "<pre>🍀🍀🍀🌹🍀🍀🍀🌹🍀🍀🍀 
🍀🍀🌹🌹🌹🍀🌹🌹🌹🍀🍀 
🍀🌹🌹🌹🌹🌹🌹🌹🌹🌹🍀 
🍀🌹🌹🌹🌹🌹🌹🌹🌹🌹🍀 
🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹 
🍀🌹🌹🌹🌹🌹🌹🌹🌹🌹🍀 
🍀🍀🌹🌹🌹🌹🌹🌹🌹🍀🍀 
🍀🍀🍀🌹🌹🌹🌹🌹🍀🍀🍀 
🍀🍀🍀🍀🍀🌹🍀🍀🍀🍀🍀</pre>",
                "几日不见📅",
                "十分想念😘",
                "<img src='img/love-the-girl.jpg'>",
                "你说你讨厌异地恋🤔",
                "一场全国性的新肺炎😷",
                "<img src='img/news-wuhanfeiyan.jpg'>",
                "让咱们不得不来一场异地恋😂",
                "<img src='img/separate.jpeg'>",
                "稍等一下🙂",
                "让我再看一眼你的照片😘",
                "<img src='img/in-sichuan.jpeg'>",
                "跟你在一起的每一天📅",
                "都让我感到十分想念📬",
                "<img src='img/lucky-me.jpg'>",
                "想念你做的早餐🍲",
                "<img src='img/breakfast.jpg'>",
                "想念跟你一起锻炼🛹",
                "<img src='img/exercise-together.jpg'>",
                "想念跟你一起旅游的时候🚂",
                "<img src='img/travel.jpg'>",
                "我们的脚印能一起出现🎠",
                "<img src='img/foot.jpg'>",
                "永远在一起的誓言💑",
                "我想再重复一遍😍",
                "<img src='img/marry-me.png'>",
                "嫁给我吧💍"
            ]
        ],
        "responses": [{
            "content": "我愿意",
            "nextAuthor": ["0001"]
        }]
    }, {
        "id": "0001",
        "details": [
            [
                "<img src='img/kiss-my-princess.png'>",
                "宝贝我好开心呀😁",
                "今后每一天的相见😍",
                "你都是我的初恋😘",
                "给你的那些承诺😙",
                "我都会一一兑现😉"
            ]
        ]
    }],
    "fromUser": []
}

完整代码下载地址：HTML情人节表白代码，给女朋友的电子情书代码，女朋友表白代码

相关文章