javascript做的100%表白成功特效，不成功

javascript做的100%表白成功特效，不成功我补你！

击查看520特效

由于上传图片大小有限制，所以效果不太好，实际效果比这炫酷很多！

520来了，我用javascript做了个表白背景，快祝福我吧！

这个特效是用HTML5/canvas配合javascript制作的，比较适合作为网站或者博客的背景，虽然录制的图片出来看起来很卡，但是实际上还是很顺畅的，520要来了，也可以单独做个表白的页面发给自己的暗恋的人哟！这个特效的javascript代码也不是很复杂，对于小白来说也可以慢慢理解，当然，知识作为一个背景而言还很单调，所以还需要各位自己去添加一些内容！我的头条上也有许多关于HTML5/javascript的特效和游戏，大家感兴趣的可以去看看！下面附上源码！

如果想要更多的企业求职加分项目，案例，学习方法可以来一下我的前端群570946165，每天都会精挑细选一个特效，项目出来详细讲解，分享！包括答疑解惑！

表白背景HTML5/javascript源码：

代码过长需要文档版源码来我的前端群570946165，已上传到群文件

头条号里有许多web前端学习视频/源码，企业常用特效/案例/项目，敬请关注！

你女票一定会这样的！

录

1. 直接表白：
2. 七夕节表白：
3. 猜心游戏：
4. 浪漫诗句：
5. 爱的方程式：
6. 爱心Python：
7. 心形图案JavaScript 代码：
8. 心形并显示表白信息HTML 页面：
9. Java七夕快乐：
10.爱的号码牌：

在七夕节这个充满爱意的日子里，用编程语言编写一些表白代码是个非常有趣的想法。以下是使用各种编程语言Python、Java、JavaScript、H5等编写的 10 种简单表白代码示例，以下只是抛砖引玉，还需要你用心修改，对方一定能理解你的真心。

1. 直接表白：

def direct_confession():
print("亲爱的，我喜欢你，愿意和你共度余生。")
answer=input("你愿意和我一起走下去吗？(yes/no) ")
if answer.lower()=="yes":
print("太好了！我会珍惜我们之间的感情，一起走向未来。")
else:
print("没关系，我会继续努力，争取赢得你的心。")
if __name__=="__main__":
direct_confession()

2. 七夕节表白：

def qixi_confession():
print("亲爱的，祝你七夕节快乐！")
print("在这个特殊的日子里，我想告诉你：我喜欢你，愿意和你共度余生。")
answer=input("你愿意和我一起走下去吗？(yes/no) ")
if answer.lower()=="yes":
print("太好了！我会珍惜我们之间的感情，一起走向未来。")
else:
print("没关系，我会继续努力，争取赢得你的心。")
if __name__=="__main__":
qixi_confession()

3. 猜心游戏：

import random
def guess_heart():
print("我们来玩一个猜心游戏吧！")
print("我已经想好了一个字，猜猜是什么字？")
answer=input("请输入你猜测的字：")
while answer!="爱":
answer=input("猜错了，请再试一次：")
print("恭喜你，猜对了！在这个特殊的日子里，我想告诉你：我喜欢你，愿意和你共度余生。")
answer=input("你愿意和我一起走下去吗？(yes/no) ")
if answer.lower()=="yes":
print("太好了！我会珍惜我们之间的感情，一起走向未来。")
else:
print("没关系，我会继续努力，争取赢得你的心。")
if __name__=="__main__":
guess_heart()

4. 浪漫诗句：

def romantic_poetry():
print("亲爱的，我要为你写一首诗。")
print("在银河的两岸，")
print("有一对相望的星，")
print("那就是我和你。")
print("我喜欢你，愿意和你共度余生。")
answer=input("你愿意和我一起走下去吗？(yes/no) ")
if answer.lower()=="yes":
print("太好了！我会珍惜我们之间的感情，一起走向未来。")
else:
print("没关系，我会继续努力，争取赢得你的心。")
if __name__=="__main__":
romantic_poetry()

5. 爱的方程式：

def love_equation():
print("亲爱的，你知道吗？")
print("我一直在寻找一个方程式，")
print("它可以表示我对你的喜欢，")
print("那就是：幸福=你 + 我")
print("我喜欢你，愿意和你共度余生。")
answer=input("你愿意和我一起走下去吗？(yes/no) ")
if answer.lower()=="yes":
print("太好了！我会珍惜我们之间的感情，一起走向未来。")
else:
print("没关系，我会继续努力，争取赢得你的心。")
if __name__=="__main__":
love_equation()

6. 爱心Python：

import matplotlib.pyplot as plt
import numpy as np
def main():
x=np.linspace(0, 2 * np.pi, 1000)
y1=16 * np.sin(x)**3
y2=13 * np.cos(x) - 5 * np.cos(2 * x) - 2 * np.cos(3 * x) - np.cos(4 * x)
plt.figure(figsize=(6, 6))
plt.plot(x, y1, color='red', linewidth=2)
plt.plot(x, y2, color='blue', linewidth=2)
plt.axis('equal')
plt.title("七夕节快乐！")
plt.show()
print("愿我们的爱情如同牛郎织女般美好！")
print("你是我的宇宙中最亮的星，愿永远陪伴在你身边。")
input("按回车键继续...")
if __name__=="__main__":
main()

这段代码使用 Python 的 Matplotlib 库绘制了一个心形图案，并显示“七夕节快乐！”的标题。

7. 心形图案JavaScript 代码：

function drawHeart() {
const canvas=document.createElement("canvas");
const ctx=canvas.getContext("2d");
canvas.width=300;
canvas.height=300;
ctx.beginPath();
ctx.moveTo(150, 180);
ctx.bezierCurveTo(150, 140, 110, 130, 75, 180);
ctx.bezierCurveTo(50, 250, 150, 250, 150, 180);
ctx.fillStyle="red";
ctx.fill();
ctx.stroke();
document.body.appendChild(canvas);
}
function main() {
drawHeart();
console.log("愿我们的爱情如同牛郎织女般美好！");
console.log("你是我的宇宙中最亮的星，愿永远陪伴在你身边。");
}
main();

这段代码使用 JavaScript 绘制了一个心形图案，并在浏览器中显示。

8. 心形并显示表白信息HTML 页面：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>七夕节表白</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
canvas {
display: block;
margin: 50px auto;
}
</style>
</head>
<body onload="main()">
<canvas id="heartCanvas" alt="心形图案"></canvas>
<script src="main.js"></script>
</body>
</html>

这段代码创建了一个 HTML 页面，其中包含一个画布元素，用于绘制心形图案。同时引入了 JavaScript 代码片段，用于绘制心形并显示表白信息。

9. Java七夕快乐：

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class ValentinesDay extends JFrame {
public static void main(String[] args) {
ValentinesDay frame=new ValentinesDay();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(300, 300);
frame.setLocationRelativeTo(null);
frame.setTitle("七夕节快乐！");
frame.setResizable(false);
frame.setVisible(true);
}
}
public class ValentinesDay extends JFrame implements ActionListener {
private JButton button;
private JLabel label;
public ValentinesDay() {
setLayout(new FlowLayout());
setTitle("七夕节快乐！");
setSize(300, 300);
setLocationRelativeTo(null);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setResizable(false);
}
private void createComponents() {
button=new JButton("点击发送祝福");
button.addActionListener(this);
label=new JLabel("请稍等...");
add(button);
add(label);
}
@Override
public void actionPerformed(ActionEvent e) {
if (e.getSource()==button) {
label.setText("祝福已发送！");
// 这里可以添加发送祝福的实际逻辑
}
}
public static void main(String[] args) {
ValentinesDay frame=new ValentinesDay();
frame.createComponents();
frame.setVisible(true);
}
}

10.爱的号码牌：

import random
def love_number():
print("亲爱的，我们来玩一个游戏吧！")
print("我已经想了一个数字，你来猜猜看！")
number=random.randint(1, 100)
while True:
try:
guess=int(input("请输入你猜测的数字："))
except ValueError:
print("请输入一个整数！")
continue
if guess < number:
print("猜小了！")
elif guess > number:
print("猜大了！")
else:
print("恭喜你，猜对了！")
print("我喜欢你，愿意和你共度余生。")
answer=input("你愿意和我一起走下去吗？(yes/no) ")
if answer.lower()=="yes":
print("太好了！我会珍惜我们之间的感情，一起走向未来。")
else:
print("没关系，我会继续努力，争取赢得你的心。")
break
if __name__=="__main__":
love_number()

在这个代码中，程序会随机生成一个 1 到 100 之间的数字，然后让用户猜测。用户每次猜测后，程序会给出提示，直到猜对为止。猜对后，程序会表达爱意并询问用户是否愿意一起走下去。

到程序员，就会出现许多关键词，诸如“直男，宅，不懂浪漫，枯燥，憨厚老实，有逻辑，人傻钱多…………”

说程序猿是直男，不可否认，大多数程序猿都挺直，因为我们没有那么多弯弯绕绕，有心思兜圈子，不如回去写几行代码………

雷军曾经说“我喜欢写代码，代码的世界很简单”

程序猿的大多数时间都是面对电脑，所以对待一份感情也会非常的认真。程序猿也许在生活中会比较宅，就比如本人，但是千万不要说程序猿不懂浪漫。当你不开心了，他可以分分钟做出一个玫瑰花、心形等告白小程序给你制造小惊喜…………

程序员一旦浪漫起来，就真没其他人啥事了！接下来就给大家介绍一下程序猿是如何表白收获爱情的………

一、制图表白

1.1玫瑰花

源码如下：

 1 import turtle as t
 2 
 3 def Curve_Draw(n,r,d=1):
 4   for i in range(n):
 5     t.left(d)
 6     t.circle(r,abs(d))
 7 
 8 s=0.2
 9 t.setup(450*5*s,750*5*s)
10 t.pencolor('black')
11 t.fillcolor('purple')
12 t.speed(100)
13 t.penup()
14 t.goto(0,900*s)
15 t.pendown()
16 
17 t.begin_fill()
18 t.circle(200*s,30)
19 Curve_Draw(60,50*s)
20 t.circle(200*s,30)
21 Curve_Draw(4,100*s)
22 t.circle(200*s,50)
23 Curve_Draw(50,50*s)
24 t.circle(350*s,65)
25 Curve_Draw(40,70*s)
26 t.circle(150*s,50)
27 Curve_Draw(20,50*s,-1)
28 t.circle(400*s,60)
29 Curve_Draw(18,50*s)
30 t.fd(250*s)
31 t.right(150)
32 t.circle(-500*s,12)
33 t.left(140)
34 t.circle(550*s,110)
35 t.left(27)
36 t.circle(650*s,100)
37 t.left(130)
38 t.circle(-300*s,20)
39 t.right(123)
40 t.circle(220*s,57)
41 t.end_fill()
42 
43 t.left(120)
44 t.fd(280*s)
45 t.left(115)
46 t.circle(300*s,33)
47 t.left(180)
48 t.circle(-300*s,33)
49 Curve_Draw(70,225*s,-1)
50 t.circle(350*s,104)
51 t.left(90)
52 t.circle(200*s,105)
53 t.circle(-500*s,63)
54 t.penup()
55 t.goto(170*s,-30*s)
56 t.pendown()
57 t.left(160)
58 Curve_Draw(20,2500*s)
59 Curve_Draw(220,250*s,-1)
60 
61 t.fillcolor('green')
62 t.penup()
63 t.goto(670*s,-180*s)
64 t.pendown()
65 t.right(140)
66 t.begin_fill()
67 t.circle(300*s,120)
68 t.left(60)
69 t.circle(300*s,120)
70 t.end_fill()
71 t.penup()
72 t.goto(180*s,-550*s)
73 t.pendown()
74 t.right(85)
75 t.circle(600*s,40)
76 
77 t.penup()
78 t.goto(-150*s,-1000*s)
79 t.pendown()
80 t.begin_fill()
81 t.rt(120)
82 t.circle(300*s,115)
83 t.left(75)
84 t.circle(300*s,100)
85 t.end_fill()
86 t.penup()
87 t.goto(430*s,-1070*s)
88 t.pendown()
89 t.right(30)
90 t.circle(-600*s,35)
91 t.done()

1.2爱心

源码如下：

 1 import turtle as t
 2 
 3 t.penup()
 4 t.seth(-90)
 5 t.fd(160)
 6 t.pendown()
 7 t.pensize(20)
 8 t.colormode(255)
 9 for j in range(10):
10   t.speed(1000)
11   t.pencolor(25*j,5*j,15*j)
12   t.seth(130)
13   t.fd(220)
14   for i in range(23):
15     t.circle(-80,10)
16   t.seth(100)
17   for i in range(23):
18     t.circle(-80,10)
19   t.fd(220)
20 t.done()

1.3 网页爱心树表白

代码过长，仅展示部分代码：

 1 <body>
 2 
 3 <audio autoplay="autopaly">
 4 
 5   <source src="renxi.mp3" type="audio/mp3" />
 6 
 7 </audio>
 8 
 9 <div id="main">
10 
11   <div id="wrap">
12 
13     <div id="text">
14 
15       <div id="code"> <font color="#FF0000"> <span class="say">浮世三千 吾爱有三 日月与卿</span><br>
16 
17         <span class="say"> </span><br>
18 
19         <span class="say">日为朝  月为暮  卿为朝朝暮暮</span><br>
20 
21         <span class="say"> </span><br>
22 
23         <span class="say">在这浮浮沉沉的大千世界里 我爱的只有三样</span><br>
24 
25         <span class="say"></span><br>
26 
27         <span class="say">太阳  月亮和我爱的你</span><br>
28 
29                 <span class="say"> </span><br>
30 
31         <span class="say">太阳带给我们白昼和希望 月亮带给我们夜幕和宁静  </span><br>
32 
33                         <span class="say"> </span><br>
34 
35         <span class="say"> 你与我的朝夕相伴 于我而言即是永恒 你是我一生挚爱</span><br>
36 
37         <span class="say"></span><br>
38 
39         <span class="say">一生爱一人很难，也不丢人</span><br>
40 
41              <span class="say"> </span><br>    
42 
43                  <span class="say"> 最美的爱情愿景不就是"愿得一心人 白首不相离"嘛</span><br>
44 
45                          <span class="say"> </span><br>
46 
47                                  <span class="say"> 如果可以请牢记当初的爱情承诺 记住最初的美好</span><br>
48 
49                         <span class="say"> </span><br>
50 
51         <span class="say">愿岁月静好 浅笑安然 一切美好如约而至</span><br>
52 
53         <span class="say"> </span><br>
54 
55      </font>
56 
57      
58 
59       </div>
60 
61     </div>
62 
63     <div id="clock-box"> <span class="STYLE1"></span><font color="#33CC00">愿得一心人，白首不相离</font> <span class="STYLE1">这简单的话语……</span>
64 
65       <div id="clock"></div>
66 
67     </div>
68 
69     <canvas id="canvas" width="1100" height="680"></canvas>
70 
71   </div>
72 
73 </div>

1.4 烟花表白

1.5 网页爱心表白

源码如下：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4   <meta charset="UTF-8">
  5   <title>爱心</title>
  6   <style>
  7     *{margin:0; padding:0;}
  8     body{ background-color: #1E1E1E;     }
  9   </style>
 10 </head>
 11 <body>
 12 
 13   <canvas id="drawHeart"></canvas>
 14 
 15   <script>
 16     var hearts=[];
 17     var canvas=document.getElementById('drawHeart');
 18     var wW=window.innerWidth;
 19     var wH=window.innerHeight;
 20     // 创建画布
 21     var ctx=canvas.getContext('2d');
 22     // 创建图片对象
 23     var heartImage=new Image();
 24     heartImage.src='img/heart.svg';
 25     var num=100;
 26 
 27     init();
 28 
 29     window.addEventListener('resize', function(){
 30        wW=window.innerWidth;
 31        wH=window.innerHeight;
 32     });
 33     // 初始化画布大小
 34     function init(){
 35       canvas.width=wW;
 36       canvas.height=wH;
 37       for(var i=0; i < num; i++){
 38         hearts.push(new Heart(i%5));
 39       }
 40       requestAnimationFrame(render);
 41     }
 42 
 43     function getColor(){
 44       var val=Math.random() * 10;
 45       if(val > 0 && val <=1){
 46         return '#00f';
 47       } else if(val > 1 && val <=2){
 48         return '#f00';
 49       } else if(val > 2 && val <=3){
 50         return '#0f0';
 51       } else if(val > 3 && val <=4){
 52         return '#368';
 53       } else if(val > 4 && val <=5){
 54         return '#666';
 55       } else if(val > 5 && val <=6){
 56         return '#333';
 57       } else if(val > 6 && val <=7){
 58         return '#f50';
 59       } else if(val > 7 && val <=8){
 60         return '#e96d5b';
 61       } else if(val > 8 && val <=9){
 62         return '#5be9e9';
 63       } else {
 64         return '#d41d50';
 65       }
 66     }
 67 
 68     function getText(){
 69       var val=Math.random() * 10;
 70       if(val > 1 && val <=3){
 71         return '爱你一辈子';
 72       } else if(val > 3 && val <=5){
 73         return '感谢你';
 74       } else if(val > 5 && val <=8){
 75         return '喜欢你';
 76       } else{
 77         return 'I Love You';
 78       }
 79     }
 80 
 81     function Heart(type){
 82       this.type=type;
 83       // 初始化生成范围
 84       this.x=Math.random() * wW;
 85       this.y=Math.random() * wH;
 86 
 87       this.opacity=Math.random() * .5 + .5;
 88 
 89       // 偏移量
 90       this.vel={
 91         x: (Math.random() - .5) * 5,
 92         y: (Math.random() - .5) * 5
 93       }
 94 
 95       this.initialW=wW * .5;
 96       this.initialH=wH * .5;
 97       // 缩放比例
 98       this.targetScale=Math.random() * .15 + .02; // 最小0.02
 99       this.scale=Math.random() * this.targetScale;
100 
101       // 文字位置
102       this.fx=Math.random() * wW;
103       this.fy=Math.random() * wH;
104       this.fs=Math.random() * 10;
105       this.text=getText();
106 
107       this.fvel={
108         x: (Math.random() - .5) * 5,
109         y: (Math.random() - .5) * 5,
110         f: (Math.random() - .5) * 2
111       }
112     }
113 
114     Heart.prototype.draw=function(){
115       ctx.save();
116       ctx.globalAlpha=this.opacity;
117       ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);
118       ctx.scale(this.scale + 1, this.scale + 1);
119         if(!this.type){
120           // 设置文字属性
121         ctx.fillStyle=getColor();
122           ctx.font='italic ' + this.fs + 'px sans-serif';
123           // 填充字符串
124           ctx.fillText(this.text, this.fx, this.fy);
125         }
126       ctx.restore();
127     }
128     Heart.prototype.update=function(){
129       this.x +=this.vel.x;
130       this.y +=this.vel.y;
131 
132       if(this.x - this.width > wW || this.x + this.width < 0){
133         // 重新初始化位置
134         this.scale=0;
135         this.x=Math.random() * wW;
136         this.y=Math.random() * wH;
137       }
138       if(this.y - this.height > wH || this.y + this.height < 0){
139         // 重新初始化位置
140         this.scale=0;
141         this.x=Math.random() * wW;
142         this.y=Math.random() * wH;
143       }
144 
145       // 放大
146       this.scale +=(this.targetScale - this.scale) * .1;
147       this.height=this.scale * this.initialH;
148       this.width=this.height * 1.4;
149 
150       // -----文字-----
151       this.fx +=this.fvel.x;
152       this.fy +=this.fvel.y;
153       this.fs +=this.fvel.f;
154 
155       if(this.fs > 50){
156         this.fs=2;
157       }
158 
159       if(this.fx - this.fs > wW || this.fx + this.fs < 0){
160         // 重新初始化位置
161         this.fx=Math.random() * wW;
162         this.fy=Math.random() * wH;
163       }
164       if(this.fy - this.fs > wH || this.fy + this.fs < 0){
165         // 重新初始化位置
166         this.fx=Math.random() * wW;
167         this.fy=Math.random() * wH;
168       }
169     }
170 
171     function render(){
172       ctx.clearRect(0, 0, wW, wH);
173       for(var i=0; i < hearts.length; i++){
174         hearts[i].draw();
175         hearts[i].update();
176       }
177       requestAnimationFrame(render);
178     }
179   </script>
180 </body>
181 </html>

二、程序语言表白

2.1程序语言表白一

2.2程序语言表白二

2.3程序语言表白三

2.4程序语言表白四

在线咨询

上一篇：blog-engine-06-pelican 静态网
下一篇：FineReport如何实现单选按钮组控件的选项不同

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

javascript做的100%表白成功特效，不成功

520来了，我用javascript做了个表白背景，快祝福我吧！

表白背景HTML5/javascript源码：

录

1. 直接表白：

2. 七夕节表白：

3. 猜心游戏：

4. 浪漫诗句：

5. 爱的方程式：

6. 爱心Python：

7. 心形图案JavaScript 代码：

8. 心形并显示表白信息HTML 页面：

9. Java七夕快乐：

10.爱的号码牌：

一、制图表白

1.1玫瑰花

1.2爱心

二、程序语言表白

2.1程序语言表白一

2.2程序语言表白二

2.3程序语言表白三

2.4程序语言表白四

您的项目需求