20要来了,为回馈朋友们所有专栏8折优惠,感兴趣的朋友可以订阅,感谢大家的支持!
520马上就要到,作为程序员的你是不是也想送个特别的礼物。今天给大家分享一个HTML5+CSS3+jQuery实现的情侣浪漫表白JS特效,视觉效果还是相当不错!得此表白神器,程序猿也可以很浪漫!快去追你的女神吧,把这个告白爱心动画发给你心爱的她!
这个特效主要实现了这几个功能,功能一基于jQuery实现的文字打印动态效果,文字的颜色个样式通过定义不同的CSS样式来控制的。功能二动态生成随机的花瓣并拼成一个爱心图案,通过prototype属性向对象添加属性和方法。功能三爱心中的文字淡入显示,这个主要是利用了fadeIn方法来实现。最后一个功能就是当点击接受时开始计时功能,通过new Date()获取当前时间再把时间差转换为天数、小时数、分钟数和秒数显示即可。
这里的d.html(c.substring(0,b)+(b&1?"_":""))是为了实现打印的动态效果了,当下标index为奇数的时候最后一个字符显示为"_",当为偶数的时候显示" ",这样就能形成打印文字的那种动态效果。
这里主要的功能就是创建矢量线,告诉我们花瓣的走向。接着再绘制随机生成的花瓣图案,最后再加上开花的效果。这里的Vector方法绘制了爱心的大致形状,Petal方法则负责绘制随机生成的花瓣,Bloom方法则定义了花瓣的绽放效果。Garden方法为花园入口,负责参数选项配置选项及方法调用以实现爱心图案的生成。
在爱心中间的字体采用了淡入的效果,这里我们可以通过jQuery封装的fadeIn()方法实现淡入效果来显示一个隐藏的元素。文字默认样式通过CSS定义为隐藏状态,fadeIn()由两个参数分别是speed(速度)和callback(回调函数)。当花瓣爱心绘制完成之后我们调用fadeIn方法显示爱心中的内容,回调中继续显示loveu中的内容。
当链接被点击的时候触发timeElapse方法开始计时,这里获取了当前的时间并对时间进行了换算为天数、小时数、分钟数和秒数显示。parse()方法可解析一个日期时间字符串,并返回 1970/1/1 午夜距离该日期时间的毫秒数。floor()方法则是对一个数进行向下取整计算,返回的是小于或等于且最接近计算值的整数。
源码说明:本例中的源码非本人创作,本文仅作简单的解析和分享。需要源码的朋友可以在评论区留言,本源码仅限学习参考请勿它用。以上内容是小编给大家分享的【520情侣浪漫表白JS特效分享(附源码)】,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。更多Vue实战技巧可以参考专栏:Vue实战系列,在此也非常感谢大家对小编的支持!
在七夕节这个充满爱意的日子里,用编程语言编写一些表白代码是个非常有趣的想法。以下是使用 各种编程语言Python、Java、JavaScript、H5等编写的 10 种简单表白代码示例,以下只是抛砖引玉,还需要你用心修改,对方一定能理解你的真心。
def direct_confession():
print("亲爱的,我喜欢你,愿意和你共度余生。")
answer=input("你愿意和我一起走下去吗?(yes/no) ")
if answer.lower()=="yes":
print("太好了!我会珍惜我们之间的感情,一起走向未来。")
else:
print("没关系,我会继续努力,争取赢得你的心。")
if __name__=="__main__":
direct_confession()
def qixi_confession():
print("亲爱的,祝你七夕节快乐!")
print("在这个特殊的日子里,我想告诉你:我喜欢你,愿意和你共度余生。")
answer=input("你愿意和我一起走下去吗?(yes/no) ")
if answer.lower()=="yes":
print("太好了!我会珍惜我们之间的感情,一起走向未来。")
else:
print("没关系,我会继续努力,争取赢得你的心。")
if __name__=="__main__":
qixi_confession()
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()
def romantic_poetry():
print("亲爱的,我要为你写一首诗。")
print("在银河的两岸,")
print("有一对相望的星,")
print("那就是我和你。")
print("我喜欢你,愿意和你共度余生。")
answer=input("你愿意和我一起走下去吗?(yes/no) ")
if answer.lower()=="yes":
print("太好了!我会珍惜我们之间的感情,一起走向未来。")
else:
print("没关系,我会继续努力,争取赢得你的心。")
if __name__=="__main__":
romantic_poetry()
def love_equation():
print("亲爱的,你知道吗?")
print("我一直在寻找一个方程式,")
print("它可以表示我对你的喜欢,")
print("那就是:幸福=你 + 我")
print("我喜欢你,愿意和你共度余生。")
answer=input("你愿意和我一起走下去吗?(yes/no) ")
if answer.lower()=="yes":
print("太好了!我会珍惜我们之间的感情,一起走向未来。")
else:
print("没关系,我会继续努力,争取赢得你的心。")
if __name__=="__main__":
love_equation()
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 库绘制了一个心形图案,并显示“七夕节快乐!”的标题。
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 绘制了一个心形图案,并在浏览器中显示。
<!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 代码片段,用于绘制心形并显示表白信息。
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);
}
}
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 之间的数字,然后让用户猜测。用户每次猜测后,程序会给出提示,直到猜对为止。猜对后,程序会表达爱意并询问用户是否愿意一起走下去。
今天有幸听到了MC吓洪的《一人我编程累》,好像看到了假技术,说好的不善言辞呢?于是趁着2.14未过去,特地教大家做个表白网页,抓住青春的尾巴,勇敢告诉Ta吧!
预览地址:http://t.cn/RJpOELH
一.面向小白的教程:
对于小白来说,那一切都从最简单的开始吧。
1.首先让电脑连上电源。
2.打开电脑。
3.打开浏览器,访问地址:http://www.51bbw.cn/show,点击立即制作。
4.填写对应表单。
5.点击“数据提交”,就可以生成专属链接,发给你心爱的Ta吧。
二.略懂Html语言的小宅:
1.从网上搜索表白网页源码,找到心仪模板下载。
2.真心真意地仔细修改并优化模板。
3.将修改好的源码放到已有的服务器上,将对应的URL地址发送给亲耐的Ta,然后就等着Ta感动得泪水吧!哈哈
4.给Ta个拥抱,……(此处省略1W字)
*请认真填写需求信息,我们会在24小时内与您取得联系。