-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathanne.html
143 lines (136 loc) · 7.9 KB
/
anne.html
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Love between Us</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/main.css">
</head>
<body>
<audio src="./music.mp3" autoplay="true" loop="loop"></audio>
<div id="back">
<div class="mask"></div>
<!-- 设置展示的图片，github pages不能有后台程序只能一条一条手动添加了 囧 -->
<div id="carousel" class="carousel slide carousel-fade carousel-position">
<div class="carousel-inner" style="width: 100%;height: 100%;" id="background">
<div class="item active" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image:url(./img/0.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/2.JPG) ;background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/3.jpg) ;background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/4.JPG) ;background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/5.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/6.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/7.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/8.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/9.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/10.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/11.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/12.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/13.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/14.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/15.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/16.jpg);background-size: cover;"></div>
</div>
</div>
</div>
</div>
<div class="modal show" style="top:24%;">
<div class="modal-dialog" style="opacity: .9">
<div class="modal-content" style="opacity:.45">
<div class="modal-header">
<h1 class="text-center" style="color: pink;font-family: 'JournalRegular', Arial, sans-serif;font-size: 7rem;">Happy Birthday</h1>
<p class="text-center small-title" style="color: pink;font-size: 22px;font-family: 'JournalRegular', Arial, sans-serif;">Kevin & Anne</p>
</div>
<div class="modal-body text-center" style="line-height: 1.5rem;font-family: 'JournalRegular', Arial, sans-serif;font-size: 3rem;">
<p>
<span id="day" class="time-font"></span><span style="color:#A94442">/ </span><span id="hour" class="time-font"></span><span style="color:#A94442">/ </span><span id="minute" class="time-font"></span><span style="color:#A94442">/ </span><span id="second" class="time-font"></span>
</p>
<p>
days/hours/min/sec
</p>
<p class="text-center" style="color:pink;font-size: 17px" id="say"></p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./js/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/count-time.js"></script>
<script>
$(function() {
//设置起始日期
countTime('2017/01/21 16:00', 'day', 'hour', 'minute', 'second');
var days = $('#day').text();
// 设置标题
if (parseInt(days / 365) != 0) {
$(document).attr("title", "在一起" + parseInt(days / 365) + "年,感谢相伴。");
} else if (parseInt(days / 30) != 0) {
$(document).attr("title", "在一起" + parseInt(days / 30) + "个月,感谢相伴。");
} else
$(document).attr("title", "在一起" + days + "天,感谢相伴。");
//设置每一张图片对应的文字
var says = new Array(
"执子之手，一路相伴",
"东方明珠，照片没拍好，宝宝累得不想动",
"迪士尼，难得一次记得戴墨镜，可惜没有坐上大木马，不过我们还会再回来的",
"松江，宝宝毕业了，可惜没有去现场，因为宝妈在",
"科技馆，陪小弟出来逛，自己累了",
"九江，晚上一起烧烤，却被安保赶着走，却不影响我们在湖边吹风的心情",
"庐山，传说中的‘飞流直下三千尺’呢，都是骗人的，还是吃肉吧",
"九江万达，抓不到娃娃，却意外地抓到 Dior",
"九江，有了 Dior，整个人都自信了 100 倍",
"虹梅路，第一次烫头发，却因为头发剪得太多郁闷了好久",
"阳澄湖，公司团建，厚着脸皮去蹭吃，却因为来了大姨妈，不敢吃",
"电影院，包场啊，嘚瑟的小表情",
"华悦家园，下雪啦",
"西塘，又是大姨妈。。。",
"地铁站，偶遇大美女，想搭讪",
"杭州，宝宝带着一个瘸子逛西溪"
);
var start = function() {
var index = 0;
var rate = 6000;
$('#say').text(says[(index++) % says.length]);
var _play = function () {
$('#say').hide();
$('#say').text(says[(index++) % says.length]);
$('#say').fadeToggle();
$('#carousel').carousel('next');
};
setInterval(_play, rate);
}();
});
</script>
</body>
</html>