表白神器—JS生成的玫瑰花

在整理自己的电脑时,无意间发现了一个文件夹,最后修改时间停留在2015年。不知在哪看到的这款特效,觉得很炫就下载留存了,只有简单的一个文件:rose.html,已上传github,欢迎下载。(侵删)

展示的效果如下:

image

Github下载地址:

表白神器—JS生成的玫瑰花

最开始的时候,页面里只有一朵玫瑰花。也就是在几年前,我在里面加了其他的元素,最终发给女神,给惊呆了。

代码很简单,只依赖jQuery。所加功能都是自己刚接触前端不久,学着加上去的,现在看觉得好low。。左上角的歌曲播放,当时要做上一曲、下一曲的,可惜没有实现,只做到随机播放,依赖于刷新网页。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
if(Sys.ie){
var song = getFileName().split("|");
for(var i=0;i<song.length;i++){
var indexSong = song[i].lastIndexOf("\\");
song[i] = song[i].substring(indexSong+1,song[i].length);
}
//得到播放曲目下标
songIndex = parseInt(Math.random() * song.length);
$("#audio_id").attr("src",song[songIndex]);
//console.log(parseInt(Math.random() * song.length));
//Math.random()是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值,是Java语言常用代码。
//例如:var a:Number=Math.random()*2+1,设置一个随机1到3的变量。
}else{
//固定歌曲
var StaticSong = new Array( '张杰-My Sunshine.mp3', '朴树-平凡之路.mp3', 'Westlife-The Rose.mp3', '徐良-月光.mp3', '许嵩-七夕.mp3', '徐良-红装.mp3',
'许嵩-弹指一挥间.mp3', '许嵩-惊鸿一面.mp3', '许嵩-山水之间.mp3', '降央卓玛-西海情歌.mp3', '降央卓玛-雨中飘荡的回忆.mp3' ); //创建一个数组并赋值
$("#audio_id").attr("src",StaticSong[parseInt(Math.random() * StaticSong.length)]);
}
//回显曲目
$("#song_title").html($("#audio_id").attr("src"));

歌曲以前写死的。。针对IE和其他浏览器做了测试

找了两首诗,其中一首是网上直接能搜到的,另一首是拼凑的藏头诗,外加一些变色效果。

1
2
3
4
日高闲步下堂阶
细草春莎没绣鞋
折得玫瑰花一朵
凭君簪向凤凰钗

这首诗悬浮在玫瑰花正上方

首尾各加了一些游动文字效果,简单的html标签加js实现

页面最右侧有分享功能,当时做这个是为了方便女神分享到朋友圈,不过由于是本地文件,效果不是很理想。

有兴趣的小伙伴,可尝试着改成你们喜欢的样子哦~

程序员的表白神器,你get到了吗~

欢迎讨论~

点击查看

本文标题:表白神器—JS生成的玫瑰花

文章作者:北宸

发布时间:2019年08月23日 - 17:57:17

最后更新:2019年10月07日 - 11:46:34

原始链接:https://leafjame.github.io/posts/2857466830.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------