基于HTML实现浪漫情人节表白代码(附源代码)

 

🤵‍♂️ 个人主页:@艾派森的个人主页

✍🏻作者简介:Python学习者
🐋 希望大家多多支持,我们一起进步!😄
如果文章对你有帮助的话,
欢迎评论 💬点赞👍🏻 收藏 📂加关注+


目录

前言

 项目介绍

1.项目结构

2.修改表白文字

3.修改时间

表白诗  

项目源码


前言


        情人节,又称圣瓦伦丁节或圣华伦泰节,日期在每年公历的2月14日,是西方国家的传统节日之一,起源于基督教。如今已经成为全世界著名的浪漫节日,但是不同国家的人们表达爱意的方式却各不相同。
        情人节是一个关于爱、浪漫以及花、巧克力、贺卡的节日,男女在这一天互送礼物用以表达爱意或友好。情人节的晚餐约会通常代表了情侣关系的发展关键。
        情人节现已成为欧美各国青年人喜爱的节日,其他国家也已开始流行。中国将传统节日七夕节视作情人节。由于能表达共同的人类情怀,各国各地纷纷发掘了自身的“情人节”。据海外网2019年2月14日电,有美媒曝出,日本女性正在抵制本国情人节的一项独特传统。

        今天就是情人节了,不知道眼前的你脱单了没有,反正俺是没有。当然这都不是问题,不管你是否脱单,我相信今天的代码分享一定会对你有所帮助!

废话不多说,先看看最后的效果:

         首先映入眼帘的是一个小爱心,当鼠标点击的时候,爱心会变成一个小红种子落入大地,然后逐渐长成一颗大的爱心树,接着就是展示喜欢至今的时间,最后就是表白文字的撰写。

 项目介绍

1.项目结构

 本次项目主要使用到html、css、js语言。

2.修改表白文字

要修改项目中的表白文字,打开index.html代码,找到下面代码位置进行修改即可。

<div id="code">

    <font color="#FF0000">
        <span class="say">我的心中充满了爱,</span><br>
        <span class="say">对你的情感无限真诚。</span><br>
        <span class="say">我希望你能感受到,</span><br>
        <span class="say">这份深深的爱情。</span><br>
        <span class="say"> </span><br>
        <span class="say">你是阳光中的一道亮丽,</span><br>
        <span class="say">是我生命中不可或缺的部分。</span><br>
        <span class="say">我想要陪伴你,</span><br>
        <span class="say">在你身边永远微笑。</span><br>
        <span class="say"> </span><br>
        <span class="say">我知道,我可能不是最完美的人,</span><br>
        <span class="say">但我会努力去爱你,</span><br>
        <span class="say">用一生去宠爱你,</span><br>
        <span class="say">用最真诚的心爱你。</span><br>
        <span class="say"> </span><br>
        <span class="say">亲爱的悦悦,我爱你,永远爱你,</span><br>
        <span class="say">愿你能接受我的爱,</span><br>
        <span class="say">和我一起走进幸福的未来。</span><br>
        <span class="say"> </span><br>
        <span class="say"><span class="space"></span> -- 爱你的森森--</span>
    </font>
</div>

</div>

<div id="clock-box">

<span class="STYLE1"></span>
<font color="#33CC00">亲爱的悦悦,我喜欢你</font>

<span class="STYLE1">已经是……</span>

<div id="clock"></div>

</div>

3.修改时间

要修改时间进入index.html代码,翻到最下面,找到以下代码位置进行修改(默认开始时间是2020年1月15日16小时53分0秒)

        var textAnimate = eval(Jscex.compile("async", function () {
		    var together = new Date();
		    together.setFullYear(2020,1 , 15); 			//时间年月日
		    together.setHours(16);						//小时	
		    together.setMinutes(53);					//分钟
		    together.setSeconds(0);					//秒前一位
		    together.setMilliseconds(0);				//秒第二位
		    $("#code").show().typewriter();
            $("#clock-box").fadeIn(500);
            while (true) {

                timeElapse(together);

                $await(Jscex.Async.sleep(1000));

            }

        }));

表白诗  

本次项目中的诗词是我用csdn自带的ChatGPT自动生成的,在手机APP端【我的】-->【更多服务】-->【ChatGPT】,用起来还不错。最后再帮大家找到一些唯美爱情的古诗词:

       1、问世间,情是何物,直教生死相许。
  2、恨君不似江楼月,南北东西,南北东西,只有相随无别离。
  3、当时明月在,曾照彩云归。
  4、春蚕到死丝方尽,蜡炬成灰泪始干。
  5、浮生长恨欢娱少,肯爱千金轻一笑。为君持酒劝斜阳,且向花间留晚照。
  6、天与短因缘,聚散常容易。
  7、满院落花帘不卷,断肠芳草远。
  8、何处合成愁,离人心上秋。
  9、重叠泪痕缄锦字,人生只有情难死。
  10、无缘何生斯世,有情能累此生。
  11、江州司马,青衫泪湿,同是天涯。
  12、红烛背,绣帘垂,梦长君不知。
  13、唯将终夜长开眼,报答平生未展眉。
  14、惟将终夜长开眼,报答平生未展眉。
  15、妾身悔作商人妇,妾命当逢薄幸夫。
  16、相思树底说相思,思郎恨郎郎不知。
  17、名播兰簪妃后里,晕生莲脸君王侧。
  18、君安游兮西入秦,愿为影兮随君身。
  19、花红易衰似郎意,水流无限似侬愁。
  20、教人无处寄相思,落花芳草过前期,没人知。
  21、锺情怕到相思路。盼长堤,草尽红心。动愁吟,碧落黄泉,两处难寻。
  22、红豆生南国,春来发几枝,愿君多采撷,此物最相思。
  23、莫道佳人总是痴,惺惺怜俐没便宜。只因会尽人间事,惹得闲愁满肚皮。
  24、还始觉、留情缘眼,宽带因春。
  25、宜有词仙,拥素云黄鹤,与君游戏。
  26、泪雨问花花不语,又见散花落满地。步雨深夜夜不许,再盼长夜破晓时。
  27、妆罢低声问夫婿,画眉深浅入时无。
  28、诚知此恨人人有,贫贱夫妻百事哀。
  29、千万恨,恨极在天涯。山月不知心里事,水风吹落眼前花,摇曳碧云斜。
  30、细腰争舞君沉醉,白日秦兵天下来。
  31、恨到归时方始休,月明人倚楼。
  32、相思莫共花争发,一寸相思一寸灰。
  33、寻寻觅觅,冷冷清清,凄凄惨惨戚戚。
  34、看朱成碧思纷纷,憔悴支离为忆君。
  35、红颜未老恩先断,从此箫郎是路人。
  36、取次花丛懒回顾,半缘修道半缘君。
  37、静水流深,沧笙踏歌;三生阴晴圆缺,一朝悲欢离合。
  38、三杯两盏残淡酒,怎敌他晚来风急。
  39、荆州麦熟茧成蛾,缲丝忆君头绪多。
  40、明月楼高休独倚,酒入愁肠,化作相思泪。
  41、凡事皆有代价,快乐的代价便是痛苦。
  42、云淡风高叶乱飞,小庭寒雨绿苔微,深闺人静掩屏帷。
  43、凄凉别后两应同,最是不胜清怨月明中。
  44、俏丽若三春之桃,清素若九秋之菊。 

项目源码

链接:https://pan.baidu.com/s/1hlgbFYsxzaCp1q_YwyOQ6Q 
提取码:50rw

        短信筑起城堡,文字开出玫瑰,问候散发甜蜜,新年触动精彩。在新的一年,祝福你的爱情,全年旅途愉快,幸福依然。情人节快乐!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/36.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java每日一练(20230312)

目录 1. 两数之和 II ★ 2. 反转链表 ★★ 3. 二叉树的层序遍历 II ★★★ &#x1f31f; 每日一练刷题专栏 C/C 每日一练 ​专栏 Python 每日一练 专栏 Java 每日一练 专栏 1. 两数之和 II 给定一个已按照 非递减顺序排列 的整数数组 numbers &#xff0c;请你从数…

YOLOv7、YOLOv5改进之打印热力图可视化:适用于自定义模型,丰富实验数据

💡该教程为改进YOLO高阶指南,属于《芒果书》📚系列,包含大量的原创改进方式🚀 💡更多改进内容📚可以点击查看:YOLOv5改进、YOLOv7改进、YOLOv8改进、YOLOX改进原创目录 | 唐宇迪老师联袂推荐🏆 💡🚀🚀🚀内含改进源代码 按步骤操作运行改进后的代码即可�…

Python每日一练(20230309)

目录 1. 删除有序数组中的重复项 ★ 2. 二叉树的最小深度 ★★ 3. 只出现一次的数字 II ★★ &#x1f31f; 每日一练刷题专栏 C/C 每日一练 ​专栏 Python 每日一练 专栏 1. 删除有序数组中的重复项 给你一个有序数组 nums &#xff0c;请你原地删除重复出现的元素…

裸辞两个月还能不能找到工作?亲身经历告诉你结果·····

这是我在某论坛看到的一名网友的吐槽&#xff1a; 软件测试四年&#xff0c;主要是手动测试&#xff08;部分自动化测试和性能测试&#xff0c;但是用的是公司内部自动化工具&#xff0c;而且我自动化方面是弱项。&#xff09;现在裸辞两个月了&#xff0c;面试机会少而且面试…

总结:电容在电路35个基本常识

1 电压源正负端接了一个电容&#xff0c;与电路并联&#xff0c;用于整流电路时&#xff0c;具有很好的滤波作用&#xff0c;当电压交变时&#xff0c;由于电容的充电作用&#xff0c;两端的电压不能突变&#xff0c;就保证了电压的平稳。 当用于电池电源时&#xff0c;具有交流…

自学前端,你必须要掌握的3种定时任务

当你看到这篇博客的时候&#xff0c;一定会和狗哥结下不解之缘&#xff0c;因为狗哥的博客里不仅仅有代码&#xff0c;还有很多代码之外的东西&#xff0c;如果你可以看到最底部&#xff0c;看到投票环节&#xff0c;我相信你一定感觉到了&#xff0c;狗哥的真诚&#xff0c;狗…

数据结构——第4章 数组与广义表(2)

矩阵1.特殊矩阵的压缩存储1.1对称矩阵1.2.三角矩阵1.2.1.下三角矩阵1.2.2. 上三角矩阵1.3 带状矩阵2.稀疏矩阵2.1. 稀疏矩阵的三元组表存储2.1.1. 稀疏矩阵的转置1.特殊矩阵的压缩存储 矩阵与二维数组具有很好的对应关系&#xff0c;因此在进行科学计算时&#xff0c;常常用二…

两年外包生涯做完,感觉自己废了一半....

先说一下自己的情况。大专生&#xff0c;17年通过校招进入湖南某软件公司&#xff0c;干了接近2年的点点点&#xff0c;今年年上旬&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落&#xff01;而我已经在一个企业干了五年的功能测试…

Leetcode. 88合并两个有序数组

合并两个有序数组 文章目录归并思路二归并 核心思路&#xff1a; 依次比较&#xff0c;取较小值放入新数组中 i 遍历nums1 &#xff0c; j 遍历nums2 &#xff0c;取较小值放入nums3中 那如果nums[i] 和nums[j]中相等&#xff0c;随便放一个到nums3 那如果nums[i] 和nums[j]中相…

Form Generator扩展 文本 组件

一、form-generator是什么?✨ ⭐️ 🌟 form-generator的作者是这样介绍的:Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中;也可导出JSON表单,使用配套的解析器将JSON解析成真实的表单。 但目前它提供的组件并不能满足我们在项目中的…

2023年再不会Redis,就要被淘汰了

目录专栏导读一、同样是缓存&#xff0c;用map不行吗&#xff1f;二、Redis为什么是单线程的&#xff1f;三、Redis真的是单线程的吗&#xff1f;四、Redis优缺点1、优点2、缺点五、Redis常见业务场景六、Redis常见数据类型1、String2、List3、Hash4、Set5、Zset6、BitMap7、Bi…

英雄算法学习路线

文章目录零、自我介绍一、关于拜师二、关于编程语言三、算法学习路线1、算法集训1&#xff09;九日集训2&#xff09;每月算法集训2、算法专栏3、算法总包四、英雄算法联盟1、英雄算法联盟是什么&#xff1f;2、如何加入英雄算法联盟&#xff1f;3、为何会有英雄算法联盟&#…

【Linux修炼】16.共享内存

每一个不曾起舞的日子&#xff0c;都是对生命的辜负。 共享内存一.共享内存的原理二.共享内存你的概念2.1 接口认识2.2演示生成key的唯一性2.3 再谈key三.共享资源的查看3.1 如何查看IPC资源3.2 IPC资源的特征3.3 进程之间通过共享内存进行关联四.共享内存的特点五.共享内存的内…

10个最频繁用于解释机器学习模型的 Python 库

文章目录什么是XAI&#xff1f;可解释性实践的步骤技术交流1、SHAP2、LIME3、Eli54、Shapash5、Anchors6、BreakDown7、Interpret-Text8、aix360 (AI Explainability 360)9、OmniXAI10、XAI (eXplainable AI)XAI的目标是为模型的行为和决定提供有意义的解释&#xff0c;本文整理…

C++基础算法①——高精度加减法计算

高精度算法1.导论2.高精度低精度3.高精度高精度4.高精度减法1.导论 当我们利用计算机进行数值计算&#xff0c;有时候会遇到这样的问题&#xff1a; n&#xff01;的精确结果是多少&#xff1f; 当n小于30的时候&#xff0c;我们当然可以通过电脑自带的计算器计算出来。但是当…

「Vue面试题」动态给vue的data添加一个新的属性时会发生什么?怎样去解决的?

一、直接添加属性的问题 我们从一个例子开始 定义一个p标签&#xff0c;通过v-for指令进行遍历 然后给botton标签绑定点击事件&#xff0c;我们预期点击按钮时&#xff0c;数据新增一个属性&#xff0c;界面也 新增一行 <p v-for"(value,key) in item" :key&q…

学习 Python 之 Pygame 开发坦克大战(一)

学习 Python 之 Pygame 开发坦克大战&#xff08;一&#xff09;Pygame什么是Pygame?初识pygame1. 使用pygame创建窗口2. 设置窗口背景颜色3. 获取窗口中的事件4. 在窗口中展示图片(1). pygame中的直角坐标系(2). 展示图片(3). 给部分区域设置颜色5. 在窗口中显示文字6. 播放音…

如何在CSDN中使用ChatGPT

本篇文章致力于帮助大家理解和使用ChatGPT&#xff08;现在CSDN改成”C知道“了&#xff09;。简介ChatGPT是OpenAI公司开发的一种大型语言模型。它是一种基于Transformer架构的深度学习模型&#xff0c;可以对语言进行建模和生成。它可以处理问答、对话生成、文本生成等多种任…

1.认识网络爬虫

1.认识网络爬虫网络爬虫爬虫的合法性HTTP协议请求与响应(重点)网络爬虫 爬虫的全名叫网络爬虫&#xff0c;简称爬虫。他还有其他的名字&#xff0c;比如网络机器人&#xff0c;网络蜘蛛等等。爬虫就好像一个探测机器&#xff0c;它的基本操作就是模拟人的行为去各个网站溜达&am…

TCP/IP协议

✏️作者&#xff1a;银河罐头 &#x1f4cb;系列专栏&#xff1a;JavaEE &#x1f332;“种一棵树最好的时间是十年前&#xff0c;其次是现在” 目录TCP/IP协议应用层协议自定义应用层协议DNS传输层协议端口号UDP协议UDP协议端格式TCP协议TCP协议段格式TCP工作机制确认应答(安…
最新文章