♥ 七夕七夕 ♥ - 怎么给女朋友送礼物攻略

最新推荐文章于 2025-06-01 14:38:30 发布
最新推荐文章于 2025-06-01 14:38:30 发布
阅读量358 收藏
点赞数 3
分类专栏： 日常 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45137565/article/details/126152875
版权

相爱本来就有一定的概率会分开，不要因为害怕分离而不敢去爱。如果你总是计较结果，你就会忽略这个过程中，对方给你带来的快乐和感动。

又是一年一度七夕，没有了小时候的仰着脖，看月圆，期待见证鹊桥幽会；多了的，是怎么买礼物给女朋友的烦恼；

什么 ？

不会吧？

不会吧！

你不会连女朋友都没有吧



一、表白篇

折下一段代码给你，暗语是真心喜欢

在这里插入图片描述


1. 方案一

<!DOCTYPE html>
<html>
<head>
    <title>七夕表白</title>
    <meta charset="UTF-8">
</head>
<body> <canvas id="c"></canvas>
    <script>
        var b = document.body;
        var c = document.getElementsByTagName('canvas')[0];
        var a = c.getContext('2d');
</script>
    <script>
        // 爱你动图(可以将'爱你'改成你喜欢的人名字)
        eval('var M=Math,n=M.pow,i,E=2,F="rgba(233,61,109,",d=M.cos,z=M.sin,L=1,u=30,W=window,w=c.width=W.innerWidth,h=c.height=W.innerHeight,r=_1){return M.random()*2-1},y="px Arial",v="爱你",q="♥",X=w/2,Y=h/2,T=4,p=_1){var e=this;e.g=_1){e.x=X;e.y=Y;e.k=0;e.l=0;e.t=M.random()*19000;e.c=e.t};e.d=_1){a.fillStyle=F+(e.c/e.t)+")";a.fillText(q,e.x,e.y);e.c-=50;e.x+=e.k;e.y+=e.l;e.k=e.k+r();e.l=e.l+r();if(e.c<0||e.x>w||e.x<0||e.y>h||e.y<0){e.g()}};e.g()},A,B;a.textAlign="center";a.strokeStyle="#000";a.lineWidth=2;for(i=0;i<350;i++){M[i]=new p()}setInterval(_1){a.clearRect(0,0,w,h);a.font=u+y;X=(w/6*n(z(T),3)+w/2);Y=0.8*(-h/40*(13*d(T)-5*d(2*T)-2*d(3*T)-d(4*T))+h/2.3);T+=(z(T)+3)/99;for(i=0;i<350;i++){with(M[i]){A=(x/w-0.5)*2,B=-(y/h-0.5);if(L&&(A*A+2*n((B-0.5*n(M.abs(A),0.5)),2))>0.11){k=l=0}d()}}a.font=120+y;if(E>0.1){if(E<1){a.fillStyle=F+E+")";a.fillText("Click",w/2,h/2)}E-=0.02}a.fillStyle="#E93D6D";a.fillText(v,X,Y+u);a.strokeText(v,X,Y+u)},50);b.bgColor="#FFEFF2";c.οnmοuseup=_1){L=(L)?0:1}'
            .replace(/(_1)/g, 'function('))
</script>
    <audio autoplay="autopaly" loop="loop" id="audios" preload="auto">
        <!-- 链接是 偏偏喜欢你的 mp3 -->
        <source src="http://www.ihaoge.net/kw/antiserver.kuwo.cn/anti.s?rid=MUSIC_28409674&response=res&format=mp3|aac&type=convert_url&br=128kmp3&agent=iPhone&callback=getlink&jpcallback=getlink.mp3" />
    </audio>
</body>
</html>

效果预览：
在这里插入图片描述



2. 方案二

emmm… ，会不会太炙热的情感可能会适得其反，擦掉再来


Code：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>选择题</title>
</head>
<body>
  <div class="container">
    <div class="top">
      <h1 style="position:absolute; left:280px; top:155px; width:auto; height:210px;">你喜欢我吗?</h1>
      <div id="By" style="position:absolute; left:285px; top:235px;">
        <input type="button" value=" 是的！" onclick="f1()">
      </div>
      <div id="Bn" style="position:absolute; left:360px; top:235px;">
        <input type="button" value=" 喜欢个锤子！" onmouseover="f()" onclick="f2()">
      </div>
    </div>
    <script>
      function f1() {
        // 写下你暖心的情话吧
        alert("单单就是喜欢  因为真的很喜欢  所以有很多废话想和你讲  我们在一起吧")
      }
      var flag = 1;
      function f() {
        var Bn = document.getElementById('Bn');
        var aWidth = document.body.clientWidth || document.documentElement.clientWidth;
        var aHeight = document.body.clientHeight || document.documentElement.clientHeight;
        var sJs1 = Math.floor(Math.random() * aHeight);
        var sJs2 = Math.floor(Math.random() * aWidth);
        if (flag == 1) {
          Bn.style.top = sJs1 + 'px';
          Bn.style.left = sJs2 + 'px';
          flag = 2;
        } else if (flag == 2) {
          Bn.style.top = sJs1 + 'px';
          Bn.style.left = sJs2 + 'px';
          flag = 3;
        } else if (flag == 3) {
          Bn.style.top = 235 + 'px';
          Bn.style.left = 286 + 'px';
          flag = 4;
        } else if (flag == 4) {
          Bn.style.top = 235 + 'px';
          Bn.style.left = 360 + 'px';
          flag = 1;
        }
      }
      function f2() {
        alert('这不是你的真心话！');
      }
</script>
  </div>
</body>
</html>

效果预览：
在这里插入图片描述

当鼠标移动到拒绝按钮，按钮就会跑掉，不给拒绝的机会；调皮中尽显霸道，最后给一句暖心的情话；




二、礼物篇

直接送红包显得敷衍，礼物不知道挑什么，问的话又没有惊喜，什么都不送…那你就凉了。

这里小编给你些推荐：

1. 万能的某宝

在这里插入图片描述
呐，一大堆，让爱情永不停歇、大钻戒、29.8 的水晶鞋都可以让女朋友感动到哭呢



2. DIY礼物

在这里插入图片描述

自己做的礼物当然是最有心意的，不过没有这手艺就算了吧



3. 口红

在这里插入图片描述

女孩子口红也不贵啊，有 21、28、32 的，还有个 9 块钱的，不买 1966 块的那个就行了



4. 生活用品

错误清单： 泡 jio 桶、捶背器、泡枸杞的保温杯、印有推销 logo 的雨伞 等等

正确清单： 吹发器（首选戴森）、小夜灯、香薰；

在这里插入图片描述

也可以买个游戏机送给女朋友（我们自己），等女朋友不喜欢了，再拿过来帮他玩




三、 3D 音乐盒

效果预览：
在这里插入图片描述

3D 音乐相册已经做好了，浪漫吧，不过别做梦了，快把照片换成自己女朋友照片吧


Code：

<!DOCTYPE html>
<html>
​
<head>
    <title>七夕表白</title>
    <!-- 做一个背景音乐吧(部分浏览器不会自动播放) -->
    <embed
        src="http://www.ihaoge.net/kw/antiserver.kuwo.cn/anti.s?rid=MUSIC_28409674&response=res&format=mp3|aac&type=convert_url&br=128kmp3&agent=iPhone&callback=getlink&jpcallback=getlink.mp3"
        hidden="true" autostart="true" loop="true">
    <meta charset="UTF-8">
</head>
​
<body>
    <!--/*外层容器*/-->
    <div class="wrap">
        <!--/*包裹所有元素的容器*/-->
        <div class="cube">
            <!--前图 -->
            <div class="out_front">
                <img src="img/07.jpg" class="pic" />
            </div>
            <!--后图 -->
            <div class="out_back">
                <img src="img/11.jpg" class="pic" />
            </div>
            <!--左图 -->
            <div class="out_left">
                <img src="img/03.jpg" class="pic" />
            </div>
            <div class="out_right">
                <img src="img/04.jpg" class="pic" />
            </div>
            <div class="out_top">
                <img src="img/05.jpg" class="pic" />
            </div>
            <div class="out_bottom">
                <img src="img/06.jpg" class="pic" />
            </div>
            <!--小正方体 -->
            <span class="in_front">
                <img src="img/08.jpg" class="in_pic" />
            </span>
            <span class="in_back">
                <img src="img/09.jpeg" class="in_pic" />
            </span>
            <span class="in_left">
                <img src="img/10.jpg" class="in_pic" />
            </span>
            <span class="in_right">
                <img src="img/12.jpg" class="in_pic" />
            </span>
            <span class="in_top">
                <img src="img/13.jpg" class="in_pic" />
            </span>
            <span class="in_bottom">
                <img src="img/13.jpg" class="in_pic" />
            </span>
        </div>
    </div>
    <script>
        var b = document.body;
        var c = document.getElementsByTagName('canvas')[0];
        var a = c.getContext('2d');
</script>
</body>
<style>
    html {
        background: transparent;
        /*背景颜色*/
        height: 100%;
        background-image: url(img/bg.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
    }
​
    /*外层容器样式*/
    .wrap {
        position: relative;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 200px;
        height: 200px;
        margin: auto;
    }
​
    /*包裹所有容器样式*/
    .cube {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        transform-style: preserve-3d;
        transform: rotateX(-30deg) rotateY(-80deg);
        -webkit-animation: rotate 20s infinite;
        /*匀速*/
        animation-timing-function: linear;
    }
​
    @-webkit-keyframes rotate {
        from {
            transform: rotateX(0deg) rotateY(0deg);
        }
​
        to {
            transform: rotateX(360deg) rotateY(360deg);
        }
    }
​
    .cube div {
        position: absolute;
        width: 200px;
        height: 200px;
        opacity: 0.8;
        transition: all .4s;
    }
​
    /*定义所有图片样式*/
    .pic {
        width: 200px;
        height: 200px;
    }
​
    .cube .out_front {
        transform: rotateY(0deg) translateZ(100px);
    }
​
    .cube .out_back {
        transform: translateZ(-100px) rotateY(180deg);
    }
​
    .cube .out_left {
        transform: rotateY(90deg) translateZ(100px);
    }
​
    .cube .out_right {
        transform: rotateY(-90deg) translateZ(100px);
    }
​
    .cube .out_top {
        transform: rotateX(90deg) translateZ(100px);
    }
​
    .cube .out_bottom {
        transform: rotateX(-90deg) translateZ(100px);
    }
​
    /*内层小正方体样式*/
    .cube span {
        display: bloack;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 50px;
    }
​
    .cube .in_pic {
        width: 100px;
        height: 100px;
    }
​
    .cube .in_front {
        transform: rotateY(0deg) translateZ(50px);
    }
​
    .cube .in_back {
        transform: translateZ(-50px) rotateY(180deg);
    }
​
    .cube .in_left {
        transform: rotateY(90deg) translateZ(50px);
    }
​
    .cube .in_right {
        transform: rotateY(-90deg) translateZ(50px);
    }
​
    .cube .in_top {
        transform: rotateX(90deg) translateZ(50px);
    }
​
    .cube .in_bottom {
        transform: rotateX(-90deg) translateZ(50px);
    }
​
    /*鼠标移入后样式*/
    .cube:hover .out_front {
        transform: rotateY(0deg) translateZ(200px);
    }
​
    .cube:hover .out_back {
        transform: translateZ(-200px) rotateY(180deg);
    }
​
    .cube:hover .out_left {
        transform: rotateY(90deg) translateZ(200px);
    }
​
    .cube:hover .out_right {
        transform: rotateY(-90deg) translateZ(200px);
    }
​
    .cube:hover .out_top {
        transform: rotateX(90deg) translateZ(200px);
    }
​
    .cube:hover .out_bottom {
        transform: rotateX(-90deg) translateZ(200px);
    }
</style>
​
</html>


无论对爱人、亲人、还是朋友，永远心存感恩，享受当下的幸福，也及时给对方回馈；最后祝愿：

是有情人终成眷属，是前生注定事，莫错过姻缘

送给女朋友的小礼物（程序员）
不想当老板的程序员不是好码农
08-16 1万+
送给女朋友的小礼物程序员还有女朋友？（没错，就是有）四个模块一、主页1.导航栏2.轮播图3.页面锚点4.部分内容展示二、照片墙三、我想对她说的话四、历程相关代码 程序员还有女朋友？（没错，就是有） 这是我们在一起的第一个七夕，曾经也想过自己写一个东西送给她（一直认为亲手做礼物是最有意义的），现在终于实现了。虽然不是还有很多不足的地方。但女朋友看了还是很开心的。不过她第一反应居然是问我怎么写的hhh...
七夕祝福网页制作_程序员怎么过七夕？
weixin_39795116的博客
12-06 242
不少人对程序员刻板的印象常常是性格木讷、不善交际、不解风情等，仿佛就如他们整天打交道的机器一般精准而冷漠。但程序员也是人啊，也有温柔浪漫的一面。今天是七夕，咱就来看看程序员都是怎么表达爱意的。1.前谷歌工程师Colin McMillen 用一段 perl 代码向他的女友 Kristen Stubbs 求婚：#!/usr/bin/perl -wuse strict; my$f=...
七夕到了，程序员怎么过七夕
penggerhe的博客
08-13 807
不少人对程序员刻板的印象常常是性格木讷、不善交际、不解风情等，仿佛就如他们整天打交道的机器一般精准而冷漠。 但程序员也是人啊，也有温柔浪漫的一面。今天是七夕，咱就来看看程序员都是怎么表达爱意的。 1. 前谷歌工程师 Colin McMillen 用一段 perl 代码向他的女友 Kristen Stubbs 求婚： #!/usr/bin/perl -wuse strict; my$f= $[;my $ch=0;sub l{length} sub..
2022七夕程序员必备的表白黑科技（七夕限定款）
热门推荐
人生若只初相见@的博客
08-04 4万+
表白的话有千万种，我们却不懂得像作家那样开口表达，村上春树的表达是，希望你下辈子不要改名，这样我会好找你一点。
程序员怎么过七夕？
weixin_40190310的博客
08-07 249
不少人对程序员刻板的印象常常是性格木讷、不善交际、不解风情等，仿佛就如他们整天打交道的机器一般精准而冷漠。但程序员也是人啊，也有温柔浪漫的一面。今天是七夕，咱就来看看程序员都是怎么表达爱意的。 1. 前谷歌工程师 Colin McMillen 用一段 perl 代码向他的女友 Kristen Stubbs 求婚：#!/usr/bin/perl -w use strict; my$f= ...
七夕表白攻略：教你用自己的专业说情话，成功率100%，我只能帮你们到这里了啊~（程序员系列）
顾木子吖的博客
06-29 3223
导语 哈喽！大家好~我是木木子????啦！自从写了一些表白类型的一些小脚本、小程序之后，越发不可收 拾了，哈哈哈。 常常会有小粉丝说：这......小程序不够啊！刚表白去了，但是被拉黑了。 那我不答应了，我得努努力：多多益善给大家开发一些更有趣的各种各样的适合表白的小程序！ 让每个人都争取过年带着对象回家过年~嘿嘿嘿???????? 今天，木木子推荐一个定制表白恋爱的项目：恋爱对话小程序 这个简单的项目，居然还蛮有趣的——如何操作？快来了解下。???? ​ 正文 一、小简介
matlab从flove,Matlab玩出新高度，变身表白女友神器_善良995的博客-CSDN博客
weixin_34920313的博客
03-26 540
原文作者：善良995原文标题：Matlab玩出新高度，变身表白女友神器发布时间：2021-03-19 13:36:02Matlab还可以这样玩儿？每逢节日愁哭程序员，不知道该送什么给女朋友，在这里教你用Matlab玩儿出属于程序员的浪漫，送给她一整天的惊喜^^一、效果图先来看看效果图：怎么样，这礼物是不是很用心？是不是很特别？是不是很程序猿？(斜眼笑~)二、完整模板代码当然，我怎么忍心让好男孩们千...
程序员的 100款代码表白特效，一个比一个浪漫
网页设计与制作
10-17 1335
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面：可使用任意HTML编辑软件（如： 等任意html编辑软件进行运行及修改编辑等操作）。 其中： （1）📜html文件包含：其中index.html是首页、其他html为二级页面； （2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等 （3）📄 js文件包含：页面炫酷效果实现86-520爱心背景3D相册 五、🎁更多源码 1.如果我的博客对你有帮助 一键三连哦！
我俩的故事(*^_^*)
weixin_48733383的博客
01-27 347
是我们的故事啊
国芯思辰| 国产四通道24位生理电采集模拟前端AFE全面替换ADS1294R，心电贴性能再飞跃
weixin_38427020的博客
05-29 670
国芯思辰，国产芯片替代
vue组件和插件的区别
u014642921的博客
05-28 515
只要有install方法并且接受Vue构造函数作为参数，就能够被Vue.use使用。可以是第三方库，也可以是自己编写的组件。
el-table-column如何获取行数据的值
LoveYouQueena的博客
05-29 673
一旦你获取到了当前行的数据，就可以根据需要进行后续的操作或展示，比如删除、编辑当前行的数据等。的模板中定义一个按钮，并为该按钮添加一个点击事件处理器。在Vue 2.x中，你可以使用。属性（在Vue 3.x中）来获取当前行的数据。点击事件处理器会接收到一个参数（在Vue 2.x中是。如果你使用的是Vue 3.x，代码将略有不同，主要是将。中获取当前行的数据，并通过点击事件处理器进行后续操作。在Vue 3.x中，则使用。），该参数包含了当前行的数据。属性（在Vue 2.x中）或者。，在Vue 3.x中也是。
优雅草最新实战项目技术Discuz X3.5电子签约插件开发项目实施方案优雅草·卓伊凡
一颗优雅草科技-央千澈的CSDN博客~只想无穷无尽的学习~作息早8-晚8
05-27 1446
优雅草科技将为DiscuzX3.5系统开发电子签约插件，预算9,300元，工期35天。项目采用PHP7.4+e签宝SDK技术栈，实现合同发起、签署、模板管理等功能。包含UI设计、前端开发（响应式页面）、后端插件开发及文档培训。技术方案重点包括：集成e签宝API，新建签约记录数据表，开发后台管理界面，并确保与Discuz原生系统无缝集成。项目采用模块化开发，优先保障核心签约流程，提供3个月维护期。
异步上传石墨文件进度条前端展示记录（采用Redis中List数据结构实现）
舒一笑的博客
05-29 293
摘要：Redis存储异步任务状态的数据结构选择与实践 本文探讨了异步任务状态存储在Redis中String与List数据结构的优劣对比及实践方案。String结构存在历史记录缺失、并发处理复杂、功能局限等问题；而List结构更适合需要完整历史记录、顺序处理、分布式任务的场景。文章提出了一个基于List结构的实现方案，包括状态记录工具类设计、进度更新方法和清理机制，强调直接存储对象而非JSON以避免并发问题。通过Java的this引用特性简化对象存储操作，实现了高效可靠的任务状态管理。
网易 - 灵犀办公文档
葡萄城技术团队博客
05-30 525
网易 - 灵犀办公文档
day03-Vue-Element
最新发布
tokisaki_33的博客
06-01 509
前后台混合开发和前后台分离开发。前后台混合开发，顾名思义就是前台后台代码混在一起开发，如下图所示：这种开发模式有如下缺点：沟通成本高：后台人员发现前端有问题，需要找前端人员修改，前端修改成功，再交给后台人员使用分工不明确：后台开发人员需要开发后台代码，也需要开发部分前端代码。很难培养专业人才不便管理：所有的代码都在一个工程中不便维护和扩展：前端代码更新，和后台无关，但是需要整个工程包括后台一起重新打包部署。
前端面试题目-高频问题集合
huidoo888的博客
05-30 796
单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则用户体验不好，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来。在这个生命周期之间，进行初始化事件，进行数据的观测，可以看到在created的时候数据已经和data属性进行绑定（放在data中的属性当值发生改变的同时，视图也会改变）。栈在函数调用时，函数调用语句的下一条可执行语句的地址第一个进栈，然后函数的各个参数进栈，其中静态变量是不入栈的。
【第2章 绘制】2.7 路径、描边与填充
奋斗的小猪
05-28 341
大多数绘制系统，都是基于路径的。你需要先定义一个路径，然后再对其进行描边或填充，也可以在描边的同时进行填充。
Vue3实现一个拖拽加全屏功能的组件
m0_63779088的博客
05-28 343
本文介绍了如何使用Vue3实现一个支持拖拽和全屏功能的组件。组件通过监听鼠标事件实现拖拽功能，并通过动态样式切换实现全屏效果。文章详细展示了组件的核心代码，包括拖拽逻辑实现、全屏状态切换以及样式控制。该组件可应用于弹窗、图片预览等场景，并可根据需要进一步扩展功能，如添加动画效果或限制拖拽范围。实现过程简洁明了，为类似功能的开发提供了参考方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

后海 0_o

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值