devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

恋爱周年纪念日-送给女友的网页_送给女朋友的网址

作者：weixin_40725706 | 2024-03-02 08:23:29

赞

踩

送给女朋友的网址

一、在本科期间有一次学习制作网页的机会，实训期间两周，任务是利用HTML语言做一个小网页。当时感觉老师讲的认真，就挺感兴趣的，就从头到尾把整个课程听完了。研究生专业是海上通信，最近是和女友的恋爱六周年纪念日，打算做一个有意义东西送给她，就琢磨把之前学习的HTML语言应用一下，做个网页送给她。

由于不是专业的，在编写代码过程参考了一些博主的实例，各位伙伴在阅读过程中发现有问题的地方，欢迎指正，大家共同进步~

二、言归正传，做这个网页的目的是为了能够直接在浏览器上输入网址，然后直接弹出我制作网页的主页，通过主页上的选项卡，连接各个网页。我了解到要实现这个目的，要首先解决的问题是前后端的问题，由于之前学习过Python，我最终选择了Flask作为开发网页的后端，Flask是一个使用 Python 编写的轻量级 Web 应用框架；利用HTML加上.css和.js脚本作为前段开发。

1、首先我设计的是一个登录的页面，如下图所示。首先，要登录自己的账号和密码，账号可以设计成字母或者数字什么的，当然是随意设置的，因为毕竟就是给她一个人的；密码我设置成了我们的周年纪念日，搞点小惊喜~

附上后端Python代码：

  1. from flask import *
  2.  
  3. app = Flask(__name__)
  4.  
  5. name = ''
  6. login = ''
  7. @app.route('/<int:id>', methods=['GET', 'POST'])
  8. @app.route('/',         methods=('GET', 'POST'))
  9. def index(id=None):
  10.     global name, login
  11.     if request.method == 'POST':
  12.         # 如果密码输入正确进入-主页面 main.html
  13.         if request.form.get('account') == 'zsz&wxf' and request.form.get('pwd') == '20160608':
  14.             login = 'success'
  15.             name  = 'admin'
  16.             return render_template('Login_main_page.html')
  17.         else:
  18.             login = 'fail'
  19.         if id == 1:
  20.             return render_template('Login_main_page.html')
  21.         if id == 3:
  22.             return render_template('Our_Journey.html')
  23.         if id == 4:
  24.             return render_template('loving_heart.html')
  25.         if id == 5:
  26.             return render_template('fireworks.html')
  27.         if id == 6:
  28.             return render_template('working_process.html')
  29.  
  30.     return render_template('account_information.html')
  31.  
  32. if __name__ == '__main__':
  33.     app.run()

附上登录页面（account_information）的HTML代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <meta charset="utf-8">
  4.     <head>
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  6.         <meta http-equiv="content-type" content="text/html;charset=utf-8">
  7.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8.         <title>欢迎来到我的世界</title>
  9.         <link href="../static/account_information_css/style.css" rel="stylesheet" type="text/css">
  10.         <script type="text/javascript" src="../static/account_information_js/vector.js"></script>
  11.     </head>
  12.     <!--------------------------------插入背景-------------------------------->
  13.     <style type="text/css">
  14.          body{
  15.             background-image:url("/static/1.images/account_information/风景.jpg");
  16.             background-size:cover;
  17.          }
  18.      </style>
  19.     <!------------------------------内容在这里修改----------------------------->
  20.     <body>
  21.         <div id="container">
  22.             <div id="output">
  23.                 <div class="containerT">
  24.                     <h1><font color='orange' ><p style="text-align:center"><i>Happy sixth anniversary</i></p></font></h1>
  25.                     <form action="/" class="form" id="entry_form" method="post">
  26.                         <h2><p style="text-align:center"><input type="text" placeholder="账号" name="account" style="height:30px"></p></h2><br>
  27.                         <h3><p style="text-align:center"><input type="password" placeholder="密码"  name="pwd" style="height:30px"></p></h3><br>
  28.                     <center> <button> <h4> Click me ✧ </h4> </button> </center>
  29.                     </form>
  30.                 </div>
  31.             </div>
  32.         </div>
  33.     </body>
  34. </html>

2、成功登录页面后，显示的是主页，如图所示。一共有照片墙、历程、我说、浪漫烟花和制作过程选项卡。

 附上主页面（account_information）的HTML代码：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7. 		<title>故事小屋</title>
  8.  
  9. 		<link rel="icon" href="../static/1.images/login_main_page/爱心.png" type="image/x-icon"/>
  10. 		<link href="../static/login_main_page_css/bootstrap.min.css" rel="stylesheet">
  11. 		<script src="../static/login_main_page_js/jquery-3.3.1.min.js"></script>
  12. 		<script src="../static/login_main_page_js/bootstrap.min.js"></script>
  13. 		<script src="../static/login_main_page_js/shubiaoaixin.js"></script>
  14. 		<link href= "../static/login_main_page_css/header.css" rel="stylesheet">
  15. 	</head>
  16.  
  17. 	<style type="text/css">
  18. 	    .header_right
  19. 	    {
  20. 	        //margin-left:1px;
  21. 			//margin-top: 1px;
  22. 	    }
  23. 		.middle{
  24. 			width: 35%;
  25. 			margin-left:900px;
  26. 			margin-top: 1px;
  27. 			margin: 0 auto;
  28. 		}
  29. 		.container-fluid {
  30. 			padding: 0;
  31. 		}
  32. 		.fenge{
  33. 			text-align: center;
  34. 			color: #DCA7A7;
  35. 			font-size:16px;
  36. 			margin-top: 20px;;
  37. 		}
  38. 		.maodian{
  39. 			width:80%;
  40. 			height: 200px;
  41. 			margin: 0 auto;
  42. 		    background:#f5deb3;
  43. 			font-size:20px;
  44. 			color: #E7C3C3;
  45. 			margin-top:10px;
  46. 			margin-bottom: 10px;
  47. 		}
  48. 		#times{
  49. 			text-align: center;
  50. 			padding-top: 30px;
  51. 		}
  52. 		.wenzi_a{
  53. 			float: left;
  54. 			margin-left:200px;
  55. 			margin-top: 0px;
  56. 		}
  57. 		.wenzi_b{
  58. 			float: left;
  59. 			margin-left:150px;
  60. 			margin-top: 0px;
  61. 		}
  62. 		.wenzi_c{
  63. 			float: left;
  64. 			margin-left:150px;
  65. 			margin-top: 0px;
  66. 		}
  67. 		.wenzi_d{
  68. 			float: left;
  69. 			margin-left:150px;
  70. 			margin-top: 0px;
  71. 		}
  72. 		.wenzi_font{
  73. 		    color:#00bfff;
  74. 		    margin-left:0px;
  75. 			margin-top: 10px;
  76. 		    writing-mode: tb-rl;
  77. 		    line-height:21px
  78. 		}
  79.  
  80. 	</style>
  81. 	<!------------------------照片背景------------------------>
  82.     <style type="text/css">
  83.                 html,body
  84.                 {
  85.                     height: 100%;
  86.                     color: #00FF00;
  87.                 }
  88.                 body
  89.                 {
  90.                     background-size: cover;
  91.                     background-image:url("/static/1.images/login_main_page/高架桥.jpg")
  92.  
  93.                 }
  94.         </style>
  95. 	    <style type="text/css">
  96. 				button
  97. 				{
  98. 				    width:300px;
  99.                     height:50px;
  100.                     font-size:19px;
  101.                     line_height:36px;
  102.                     border:1px solid transparent;
  103.                     color:#8b4513;                   /* 按钮文字颜色*/
  104.                     background-color:transparent;    /* 按钮背景颜色*/
  105.                     //background-color:pink;
  106.                     border-color: none;              /* 按钮边框颜色*/
  107. 				}
  108.         </style>
  109. 	<body>
  110.         <!--<input type="submit" value="post请求" name="bow"/>-->
  111. 	    <audio autoplay="autoplay" loop="loop" preload="auto"
  112. 		src="../static/2.music/Masque_Jupiter.mp3"></audio>
  113. 			<!--1.四个选项卡 首页、照片墙、历程、我说  -->
  114. 			<div class="header">
  115. 				    <!--0.Happy sixth anniversary-->
  116. 					<div class="logo">
  117. 					<form action="/1" method="post">
  118. 						<button style="font-size:24px;">
  119. 									 <font  color=#8b4513 >
  120. 										  <i><b>Happy sixth anniversary</b></i>
  121. 									 </font>
  122. 						</button>
  123. 					</form>
  124. 					</div>
  125. 				    <!--1.首页-->
  126. 				    <div class="logo">
  127. 				    <form action="/1" method="post">
  128. 						<button style="width:180px;">
  129. 							<font color=#d2691e >
  130. 								<b>首页</b>
  131. 							</font>
  132. 						</button>
  133. 					</form>
  134. 					</div>
  135. 				    <!--2.照片墙-->
  136. 				    <div class="logo">
  137. 				    <form action="/2" method="post">
  138. 						<button style="width:140px;">
  139. 								<a href="https://aimeike.tv/video/RZLLH" style="color: #d2691e;">照片墙</a>
  140. 						</button>
  141. 					</form>
  142. 					</div>
  143. 				    <!--3.历程-->
  144. 				    <div class="logo">
  145. 				    <form action="/3" method="post">
  146. 						<button style="width:140px;">
  147. 								<font color=#d2691e >
  148. 								历程
  149. 								</font>
  150. 						</button>
  151. 					</form>
  152. 					</div>
  153. 				    <!--4.我说-->
  154. 				    <div class="logo">
  155. 				    <form action="/4" method="post">
  156. 						<button style="width:140px;">
  157. 							<font  color=#d2691e >
  158. 								我说
  159. 							</font>
  160. 						</button>
  161. 					</form>
  162. 					</div>
  163. 				    <!--5.浪漫烟花-->
  164. 				    <div class="logo">
  165. 				    <form action="/5" method="post">
  166. 						<button style="width:150px;">
  167. 							 <font  color=#d2691e >
  168. 								浪漫烟花
  169. 							 </font>
  170. 						</button>
  171. 					</form>
  172. 					</div>
  173. 				    <!--6.制作过程-->
  174. 				    <div class="logo">
  175. 				    <form action="/6" method="post">
  176. 						<button style="width:160px;">
  177. 							<font  color=#d2691e >
  178. 								制作过程
  179. 							</font>
  180. 						</button>
  181. 					</form>
  182. 					</div>
  183. 			    </div>
  184.  
  185. 		<!--  3.四个段文字 我们的相册、我们的历程、我想说、制作过程  -->
  186. 		<div id="times"></div>
  187. 				<div class="wenzi_a">
  188. 					<img src="../static/1.images/login_main_page/相册.png" >
  189. 					<span><font size="4" color=#000000><b>&nbsp;&emsp;我们的相册</b></font></span>
  190.  
  191. 					<div class="wenzi_font">
  192. 						<font size="3"><b>
  193. 						举目望向天空，有说不尽的美好。<br/>
  194. 						夏天来临之前，温暖洒满了一地。<br/>
  195. 						轻轻翻阅发黄的书卷，斑驳往事。<br/>
  196. 						抓住午后跳跃的阳光，锁住流年。<br/>
  197. 						到底是怎样一种繁华创造了永恒？<br/>
  198. 						夏日的夕阳将天空染成了橘色。<br/>
  199. 						我们走过的路上，落满一地的幸福。<br/>
  200. 						</b></font>
  201. 						<font size="3" color = #696969><b>学术规范标注参考文献<br/>
  202. 						&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;——来自《百度百科》</b></font>
  203. 						</div>
  204. 					</div>
  205. 				</div>
  206. 				<div class="wenzi_b">
  207. 					<img src="../static/1.images/login_main_page/历程.png" >
  208. 					<span><font size="4" color=#000000><b>&nbsp;我们的历程</b></font></span>
  209. 					<div class="wenzi_font">
  210. 					<font size="3"><b>
  211. 					时光的洪流把每个人的生命印刻成一<br/>
  212. 					枚枚底片。记忆沿着掌心的脉络聚成<br/>
  213. 					一幅幅永恒的画面。这些光怪陆离的<br/>
  214. 					记忆中最令我怀念的就是，最美的你<br/>
  215. 					陪我走过最绚烂的年华。<br/>
  216. 					</b></font>
  217. 					<font size="3" color = #696969><b>学术规范标注参考文献<br/>
  218. 					&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;——来自《豆瓣》</b></font>
  219. 					</div>
  220. 				</div>
  221. 				<div class="wenzi_c">
  222. 					<img src="../static/1.images/login_main_page/气泡.png" >
  223. 					<span><font size="4" color=#000000><b>&nbsp;&emsp;我想说</b></font></span>
  224. 					<div class="wenzi_font">
  225. 					<font size="3"><b>
  226. 					呯呯的心跳却总能代表我的情意。<br/>
  227. 					想说爱你其实真的很遥远，傍山 <br/>
  228. 					涉水地追求，可能才是我的目的。<br/>
  229. 					想说爱你只是想真心对待你，<br/>
  230. 					想说爱你只是想真实地表达自己。<br/>
  231. 					</b></font>
  232. 					<font size="3" color = #696969><b>学术规范标注参考文献<br/>
  233. 					&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;——来自《贴吧》</b></font>
  234. 					</div>
  235. 				</div>
  236. 				<div class="wenzi_d">
  237. 							<img src="../static/1.images/login_main_page/HTML.png" >
  238. 							<span><font size="4" color=#000000><i>&nbsp;网页制作过程</i></font></span>
  239. 							<div class="wenzi_font">
  240. 								<font size="3" color = #00bfff>
  241. 								<b>
  242. 								前面以上的文字均来自百度，  <br/>
  243. 								原谅我即时在这种特殊的日子  <br/>
  244. 								也说不出来一句“像样的”言语。<br/>
  245. 								我平时已经说的够多了，为了  <br/>
  246. 								让记忆永存，我自学了网页语  <br/>
  247. 								言编写了这个网站。制作过程  <br/>
  248. 								过程费尽心血和精力，但一切  <br/>
  249. 								都是得的。<br/>
  250. 								</b>
  251. 								</font>
  252. 							</div>
  253. 				</div>
  254. 	</body>
  255. </html>

3.第一个选项卡“照片墙”，连接的是我之前制作的一个相册，是在“爱美刻”做的，可以任意链接，例如说：百度、QQ空间...

 3. 第二个选项卡是“历程”，里面写了一些我们六年的经历，小伙伴们也可以这么做，记录一下彼此的点滴，下图所示。

 

 附上（our_journey）的代码：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7. 		<title>历程小屋</title>
  8. 		<link rel="icon" href="../static/1.images/login_main_page/爱心.png" type="image/x-icon"/>
  9. 		<link href="../static/login_main_page_css/bootstrap.min.css" rel="stylesheet">
  10. 		<script src="../static/login_main_page_js/jquery-3.3.1.min.js"></script>
  11. 		<script src="../static/login_main_page_js/bootstrap.min.js"></script>
  12. 		<script src="../static/login_main_page_js/shubiaoaixin.js"></script>
  13. 		<link  href="../static/login_main_page_css/header.css" rel="stylesheet">
  14. 	</head>
  15. 	<style type="text/css">
  16. 	    .header_right
  17. 	    {
  18. 	        margin-left:1px;
  19. 			margin-top: 1px;
  20. 	    }
  21. 		.thumbnail{
  22. 			margin-bottom: 0px;
  23. 		}
  24. 		.words{
  25. 			font-size: 20px;
  26. 			font-weight: 1000;
  27. 			font-family: "楷体";
  28. 			color: #a0522d;
  29. 			line-height:40px;
  30. 			max-width: 1150px;
  31. 		}
  32. 		.panel-default{
  33. 			width: 80%;
  34. 			margin: 0 auto;
  35. 		}
  36. 		.panel-body
  37. 		{
  38. 			background: wheat;
  39. 		}
  40. 		.panel-default>.panel-heading {
  41. 			//color:#996633;
  42. 			background-color:#996633;
  43. 			border-color: #ebccd1;
  44. 		}
  45. 	</style>
  46. 	<style type="text/css">
  47.                 html,body
  48.                 {
  49.                     height: 100%;
  50.                     color: #00FF00;
  51.                 }
  52.                 body
  53.                 {
  54.                     background-size: cover;
  55.                     background-image:url("/static/1.images/our_journey/图书博物馆.jpg")
  56.                 }
  57.         </style>
  58. 		<style type="text/css">
  59. 				button
  60. 				{
  61. 				    width:300px;
  62.                     height:50px;
  63.                     font-size:18px;
  64.                     line_height:36px;
  65.                     border:1px solid transparent;
  66.                     color:#ffffff;                   /* 按钮文字颜色*/
  67.                     background-color:transparent;    /* 按钮背景颜色*/
  68.                     //background-color:pink;
  69.                     border-color: none;              /* 按钮边框颜色*/
  70. 				}
  71.         </style>
  72. 	<body>
  73. 	   <form action="/2" method="post">
  74. 	   <audio autoplay="autoplay" loop="loop" preload="auto" src="../static/2.music/晚风.mp3"></audio>
  75.        <!--1.四个选项卡 首页、照片墙、历程、我说  -->
  76. 		   <div class="header">
  77. 				    <!--0.Happy sixth anniversary-->
  78. 					<div class="logo">
  79. 					<form action="/1" method="post">
  80. 						<button style="font-size:24px;">
  81. 							<font color = white >
  82. 								<i><b>Happy sixth anniversary</b></i>
  83. 							</font>
  84. 						</button>
  85. 					</form>
  86. 					</div>
  87. 				    <!--1.首页-->
  88. 				    <div class="logo">
  89. 				    <form action="/1" method="post">
  90. 						<button style="width:150px;">
  91. 							<font color = white >
  92. 								首页
  93. 							</font>
  94. 						</button>
  95. 					</form>
  96. 					</div>
  97. 				    <!--2.照片墙-->
  98. 				    <div class="logo">
  99. 				    <form action="/2" method="post">
  100. 						<button style="width:140px;" >
  101. 							<a href="https://aimeike.tv/video/RZLLH" style="color: white;">照片墙</a>
  102. 						</button>
  103. 					</form>
  104. 					</div>
  105. 				    <!--3.历程-->
  106. 				    <div class="logo">
  107. 				    <form action="/3" method="post">
  108. 						<button style="width:140px;">
  109. 								<font color = white >
  110. 								<b>
  111. 								   历程
  112. 								</b>
  113. 								</font>
  114. 						</button>
  115. 					</form>
  116. 					</div>
  117. 				    <!--4.我说-->
  118. 				    <div class="logo">
  119. 				    <form action="/4" method="post">
  120. 						<button style="width:140px;">
  121. 							<font  color = white >
  122. 								我说
  123. 							</font>
  124. 						</button>
  125. 					</form>
  126. 					</div>
  127. 				    <!--5.浪漫烟花-->
  128. 				    <div class="logo">
  129. 				    <form action="/5" method="post">
  130. 						<button style="width:150px;">
  131. 							 <font  color = white >
  132. 								浪漫烟花
  133. 							 </font>
  134. 						</button>
  135. 					</form>
  136. 					</div>
  137. 				    <!--6.制作过程-->
  138. 				    <div class="logo">
  139. 				    <form action="/6" method="post">
  140. 						<button style="width:160px;">
  141. 							<font  color = white>
  142. 								制作过程
  143. 							</font>
  144. 						</button>
  145. 					</form>
  146. 					</div>
  147. 			</div>
  148. 			<!----------历程选项卡---------->
  149.             <!--<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">-->
  150. 			      <!----------选项卡 1---------->
  151. 				  <div class="panel panel-default">
  152. 					<div class="panel-heading" role="tab" id="headingOne">
  153. 					  <h4 class="panel-title">
  154. 						<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  155. 							<i>&emsp;2016 &emsp;年&emsp;6&emsp;月&emsp;8&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  156. 						</span>
  157. 					  </h4>
  158. 					</div>
  159. 					<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
  160. 					  <div class="panel-body">
  161. 						<div class="row">
  162. 							<div class="col-xs-6 col-md-3">
  163. 								<p class="thumbnail">
  164. 									<img src="../static/1.images/our_journey/照片1.png">
  165. 									<img src="../static/1.images/our_journey/照片2.png">
  166. 								</p>
  167. 						    </div>
  168. 							<div class="words">
  169. 							<br/>
  170. 							<br/>
  171. 							在这里写上你想说的话.........
  172. 							</div>
  173. 						</div>
  174. 					  </div>
  175. 					</div>
  176. 				  </div>
  177. 			      <!----------选项卡 2---------->
  178. 				  <div class="panel panel-default">
  179. 					<div class="panel-heading" role="tab" id="headingTwo">
  180. 					  <h4 class="panel-title">
  181. 						<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
  182. 						  <i>&emsp;2016&emsp;年&emsp;6&emsp;月&emsp;24&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  183. 						</span>
  184. 					  </h4>
  185. 					</div>
  186. 					<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
  187. 						<div class="panel-body">
  188. 							<div class="row">
  189. 								<div class="col-xs-6 col-md-3">
  190. 									<p class="thumbnail">
  191. 										<img src="../static/1.images/our_journey/照片5.jpg">
  192. 									</p>
  193. 							    </div>
  194. 								<div class="words" style="margin-left:325px;">
  195.                                 在这里写上你想说的话.........
  196. 								</div>
  197. 							</div>
  198. 						</div>
  199. 					</div>
  200. 				</div>
  201. 			    <!----------选项卡 3---------->
  202. 			    <div class="panel panel-default">
  203. 					<div class="panel-heading" role="tab" id="headingThree">
  204. 					  <h4 class="panel-title">
  205. 						<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
  206. 						 <i>&emsp;2016&emsp;年&emsp;7&emsp;月&emsp;13&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  207. 						</span>
  208. 					  </h4>
  209. 					</div>
  210. 					<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
  211. 						<div class="panel-body">
  212. 							<div class="row">
  213. 								<div class="col-xs-6 col-md-3">
  214. 									<p class="thumbnail">
  215. 										<img src="../static/1.images/our_journey/照片6.jpg">
  216. 									</p>
  217. 								</div>
  218. 								<div class="words">
  219. 								在这里写上你想说的话.........
  220. 								</div>
  221. 							</div>
  222. 						</div>
  223. 					</div>
  224. 			    </div>
  225. 			    <!----------选项卡 4---------->
  226. 				<div class="panel panel-default">
  227. 				  		<div class="panel-heading" role="tab" id="headingFour">
  228. 				  		  <h4 class="panel-title">
  229. 				  			<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
  230. 				  			  <i>&emsp;2016&emsp;年&emsp;9&emsp;月&emsp;1&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  231. 				  			</span>
  232. 				  		  </h4>
  233. 				  		</div>
  234. 				  		<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour  ">
  235. 				  			<div class="panel-body">
  236. 				  				<div class="row">
  237. 				  					<div class="col-xs-6 col-md-3">
  238. 										<p class="thumbnail">
  239. 				  							<img src="../static/1.images/our_journey/照片7.jpg">
  240. 											<img src="../static/1.images/our_journey/照片8.jpg">
  241. 										</p>
  242. 				  				    </div>
  243. 				  					<div class="words">
  244. 										在这里写上你想说的话.........
  245. 				  					</div>
  246. 				  				</div>
  247. 				  			</div>
  248. 				  		</div>
  249. 				</div>
  250. 			    <!----------选项卡 5---------->
  251. 			    <div class="panel panel-default">
  252. 				  		<div class="panel-heading" role="tab" id="headingFive">
  253. 				  		  <h4 class="panel-title">
  254. 				  			<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
  255. 				  			  <i>&emsp;2016&emsp;年&emsp;12&emsp;月&emsp;3&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  256. 				  			</span>
  257. 				  		  </h4>
  258. 				  		</div>
  259. 				  		<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
  260. 				  			<div class="panel-body">
  261. 				  				<div class="row">
  262. 				  					<div class="col-xs-6 col-md-3">
  263. 										<p class="thumbnail">
  264. 											<!--<img src="../static/1.images/our_journey/照片9.jpg">-->
  265. 											<img src="../static/1.images/our_journey/照片10.jpg">
  266. 											</p>
  267. 				  				    </div>
  268. 				  					<div class="words">
  269. 				  					在这里写上你想说的话.........
  270. 				  					</div>
  271. 				  				</div>
  272. 				  			</div>
  273. 				  		</div>
  274. 				</div>
  275. 			    <!----------选项卡 6---------->
  276. 				<div class="panel panel-default">
  277. 				  		<div class="panel-heading" role="tab" id="headingSix">
  278. 				  		  <h4 class="panel-title">
  279. 				  			<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="true" aria-controls="collapseSix">
  280. 				  			  <i>&emsp;2017&emsp;年&emsp;4&emsp;月&emsp;9&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  281. 				  			</span>
  282. 				  		  </h4>
  283. 				  		</div>
  284. 				  		<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
  285. 				  			<div class="panel-body">
  286. 				  				<div class="row">
  287. 				  					<div class="col-xs-6 col-md-3">
  288. 										<p class="thumbnail">
  289. 				  							<img src="../static/1.images/our_journey/照片11.png">
  290. 										</p>
  291. 				  				    </div>
  292. 				  					<div class="words">
  293. 				  					在这里写上你想说的话.........
  294. 				  					</div>
  295. 				  				</div>
  296. 				  			</div>
  297. 				  		</div>
  298. 				</div>
  299. 			   <!----------选项卡 7---------->
  300. 				<div class="panel panel-default">
  301. 				  		<div class="panel-heading" role="tab" id="headingSeven">
  302. 				  		  <h4 class="panel-title">
  303. 				  			<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="true" aria-controls="collapseSeven">
  304. 				  			  <i>&emsp;2018&emsp;年&emsp;5&emsp;月&emsp;1&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  305. 				  			</span>
  306. 				  		  </h4>
  307. 				  		</div>
  308. 				  		<div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeven">
  309. 				  			<div class="panel-body">
  310. 				  				<div class="row">
  311. 				  					<div class="col-xs-6 col-md-3">
  312. 										<p class="thumbnail">
  313. 				  							<img src="../static/1.images/our_journey/照片12.png">
  314. 											<br/>
  315. 											<img src="../static/1.images/our_journey/照片13.png">
  316. 										</p>
  317. 				  				    </div>
  318. 				  					<div class="words">
  319. 										<br/>
  320. 										<br/>
  321. 				  						在这里写上你想说的话.........
  322. 				  					</div>
  323. 				  				</div>
  324. 				  			</div>
  325. 				  		</div>
  326. 			 	</div>
  327. 			    <!----------选项卡 8---------->
  328. 				<div class="panel panel-default">
  329. 					<div class="panel-heading" role="tab" id="headingEight">
  330. 					  <h4 class="panel-title">
  331. 						<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseEight" aria-expanded="true" aria-controls="collapseEight">
  332. 						  <i>&emsp;2018&emsp;年&emsp;6&emsp;月&emsp;10&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  333. 						</span>
  334. 					  </h4>
  335. 					</div>
  336. 					<div id="collapseEight" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingEight">
  337. 						<div class="panel-body">
  338. 							<div class="row">
  339. 								<div class="col-xs-6 col-md-3">
  340. 									<p class="thumbnail">
  341. 										<img src="../static/1.images/our_journey/照片14.png">
  342. 									</p>
  343. 							    </div>
  344. 								<div class="words">
  345. 								在这里写上你想说的话.........
  346. 								</div>
  347. 							</div>
  348. 						</div>
  349. 					</div>
  350. 			    </div>
  351. 			    <!----------选项卡 9---------->
  352. 				<div class="panel panel-default">
  353. 				  		<div class="panel-heading" role="tab" id="headingNinth">
  354. 				  		  <h4 class="panel-title">
  355. 				  			<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseNinth" aria-expanded="true" aria-controls="collapseNinth">
  356. 				  			  <i>&emsp;2018&emsp;年&emsp;7&emsp;月&emsp;17&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  357. 				  			</span>
  358. 				  		  </h4>
  359. 				  		</div>
  360. 				  		<div id="collapseNinth" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingNinth">
  361. 				  			<div class="panel-body">
  362. 				  				<div class="row">
  363. 				  					<div class="col-xs-6 col-md-3">
  364. 										<p class="thumbnail">
  365. 				  							<img src="../static/1.images/our_journey/照片15.png">
  366. 											<img src="../static/1.images/our_journey/照片16.png">
  367. 										</p>
  368. 				  				    </div>
  369. 				  					<div class="words">
  370. 				  					在这里写上你想说的话.........
  371. 				  					</div>
  372. 				  				</div>
  373. 				  			</div>
  374. 				  		</div>
  375. 				</div>
  376. 			    <!----------选项卡 10---------->
  377. 				<div class="panel panel-default">
  378. 				  		<div class="panel-heading" role="tab" id="headingTen">
  379. 				  		  <h4 class="panel-title">
  380. 				  			<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTen" aria-expanded="true" aria-controls="collapseTen">
  381. 				  			  <i>&emsp;2019&emsp;年&emsp;12&emsp;月&emsp;26&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  382. 				  			</span>
  383. 				  		  </h4>
  384. 				  		</div>
  385. 				  		<div id="collapseTen" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTen">
  386. 				  			<div class="panel-body">
  387. 				  				<div class="row">
  388. 				  					<div class="col-xs-6 col-md-3">
  389. 										<p class="thumbnail">
  390. 				  							<img src="../static/1.images/our_journey/照片17.jpg">
  391. 										</p>
  392. 				  				    </div>
  393. 				  					<div class="words">
  394.                                     在这里写上你想说的话.........
  395. 				  					</div>
  396. 				  				</div>
  397. 				  			</div>
  398. 				  		</div>
  399. 				</div>
  400. 			    <!----------选项卡 11---------->
  401. 			    <div class="panel panel-default">
  402. 				  		<div class="panel-heading" role="tab" id="headingEleven">
  403. 				  		  <h4 class="panel-title">
  404. 				  			<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseEleven" aria-expanded="true" aria-controls="collapseEleven">
  405. 				  			  <i>&emsp;2020&emsp;年&emsp;7&emsp;月&emsp;18&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  406. 				  			</span>
  407. 				  		  </h4>
  408. 				  		</div>
  409. 				  		<div id="collapseEleven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingEleven">
  410. 				  			<div class="panel-body">
  411. 				  				<div class="row">
  412. 				  					<div class="col-xs-6 col-md-3">
  413. 										<p class="thumbnail">
  414. 				  							<img src="../static/1.images/our_journey/照片18.jpg">
  415. 										</p>
  416. 				  				    </div>
  417. 				  					<div class="words">
  418.                                     在这里写上你想说的话.........
  419. 				  					</div>
  420. 				  				</div>
  421. 				  			</div>
  422. 				  		</div>
  423. 				</div>
  424. 			   	<!----------选项卡 12---------->
  425. 			    <div class="panel panel-default">
  426. 				  		<div class="panel-heading" role="tab" id="headingThirteen">
  427. 				  		  <h4 class="panel-title">
  428. 				  			<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThirteen" aria-expanded="true" aria-controls="collapseThirteen">
  429. 				  			  <i>&emsp;2021&emsp;年&emsp;3&emsp;月&emsp;1&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  430. 				  			</span>
  431. 				  		  </h4>
  432. 				  		</div>
  433. 				  		<div id="collapseThirteen" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThirteen">
  434. 				  			<div class="panel-body">
  435. 				  				<div class="row">
  436. 				  					<div class="col-xs-6 col-md-3">
  437. 										<p class="thumbnail">
  438. 				  							<img src="../static/1.images/our_journey/照片19.png">
  439. 										</p>
  440. 				  				    </div>
  441. 				  					<div class="words">
  442. 									在这里写上你想说的话.........
  443. 				  					</div>
  444. 				  				</div>
  445. 				  			</div>
  446. 				  		</div>
  447. 				</div>
  448. 			    <!----------选项卡 13---------->
  449. 			    <div class="panel panel-default">
  450. 				  		<div class="panel-heading" role="tab" id="headingTwelve">
  451. 				  		  <h4 class="panel-title">
  452. 				  			<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwelve" aria-expanded="true" aria-controls="collapseTwelve">
  453. 				  			  <i>&emsp;2022&emsp;年&emsp;5&emsp;月&emsp;18&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  454. 				  			</span>
  455. 				  		  </h4>
  456. 				  		</div>
  457. 				  		<div id="collapseTwelve" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwelve">
  458. 				  			<div class="panel-body">
  459. 				  				<div class="row">
  460. 				  					<div class="col-xs-6 col-md-3">
  461. 										<p class="thumbnail">
  462. 				  							<img src="../static/1.images/our_journey/照片20.jpg">
  463. 										</p>
  464. 				  				    </div>
  465. 				  					<div class="words">
  466.                                     在这里写上你想说的话.........
  467. 				  					</div>
  468. 				  				</div>
  469. 				  			</div>
  470. 				  		</div>
  471. 				</div>
  472. 			</div>
  473. 	   </form>
  474. 	</body>
  475. </html>

4. 第三个选项卡是“我说”(loving_heart)，这里加入了配乐效果...  

送给女友的网站（选项卡-我说）

附上代码：

  1. <!DOCTYPE HTML>
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. 	<title>Loving_heart</title>
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. 	<style type="text/css">
  7. 	 @font-face {
  8. 		font-family: digit;
  9. 		src: url('digital-7_mono.ttf') format("truetype");
  10. 	 }
  11. 	</style >
  12. <meta name="keywords" content="" />
  13. <meta name="description" content="" />	<link href="../static/loving_heart_css/default.css" type="text/css" rel="stylesheet">
  14. 	<script type="text/javascript" src="../static/loving_heart_js/jquery.js"></script>
  15. 	<script type="text/javascript" src="../static/loving_heart_js/garden.js"></script>
  16.     <script type="text/javascript" src="../static/loving_heart_js/functions.js"></script>
  17. 	<script type="text/javascript" src="../static/loving_heart_js/jq.snow.js"></script>
  18. </head> 
  19. <!------------------------插入背景------------------------>
  20. <style type="text/css">
  21.                 html,body
  22.                 {
  23.                     height: 100%;
  24.                     color: #00FF00;
  25.                 }
  26.                 body
  27.                 {
  28.                     //background: url(https://s1.ax1x.com/2020/07/30/ansR4x.jpg)center center;
  29.                     background: #E9C2A6;
  30.                     //background: #696969
  31.                     background-size: cover;
  32.                 }
  33.         </style>
  34. <body>
  35.     <form action="/3" method="post"> </form>
  36.     <!--下面是调用方法和参数说明-->
  37.     <audio autoplay="autoplay" loop="loop" preload="auto"
  38. 		src="../static/2.music/The_Way_I_Still_Love_You.mp3"></audio>
  39. 	<script>
  40. 	$(function(){
  41. 		$.fn.snow({ 
  42. 			minSize: 5,		//雪花的最小尺寸
  43. 			maxSize: 50, 	//雪花的最大尺寸
  44. 			newOn:   150	//雪花出现的频率 这个数值越小雪花越多
  45. 		});
  46. 	});
  47. 	</script>
  48. 	<div id="mainDiv">
  49. 		<div id="content">
  50. 			<div id="code">
  51. 				<span class="comments"><font size = '2'  >/*</font></span><br/>
  52.                 <span class="space"/><span class="comments" ><font size = '2' color='#ff69b9' >
  53. 				               * Smart girl：今天是2022年6月8日。     </font> </span><br/>
  54. 				<span class="space"/><span class="comments"><font size = '2'  color='#ff69b9' >
  55. 				               * 我写这个网站来庆祝这个特殊的日子。       </font> </span><br/>
  56. 				<span class="space"/><span class="comments"><font size = '2'  color='#ff69b9' >
  57. 				               * 虽然，我不是一个很擅长表达言语的人。     </font> </span><br/>
  58. 				<span class="space"/><span class="comments"><font size = '2'  color='#ff69b9' >
  59. 				               * 但我希望我们能记住我们在一起的每一刻。   </font> </span><br/>
  60. 				<span class="space"/><span class="comments"><font size = '2'>
  61. 				*/</font> </span><br/>
  62.  
  63. 				<font size = '2'>Girl u =</font>
  64. 				<span class="keyword"><font size = '2'>new</font></span>
  65. 				<font size = '2'>Girl(</font>
  66. 				<span class="string"><font size = '2'>"Baby"</font></span>
  67. 				<font size = '2'>);</font>
  68. 				<br/>
  69.  
  70. 				<font size = '2'>Boy i =</font>
  71. 				<span class="keyword"><font size = '2'>new</font></span>
  72. 				<font size = '2'>Boy(</font>
  73. 				<span class="string"><font size = '2'>"Zhang"</font></span>
  74. 				<font size = '2'>);</font>
  75. 				<br/>
  76.  
  77. 				<span class="comments"><font size = '2' color='#ff69b9' >
  78. 					// 今天是6月8日，2016年的今天是高考最后一天，也是我们恋爱的第一天。 </font></span><br />
  79. 				<span class="comments"><font size = '2' color='#ff69b9' >
  80. 					// 我把恋爱日期定在今天，是因为我们因高考相遇。   </font></span><br />
  81. 				<span class="comments"><font size = '2' color='#ff69b9' >
  82. 					// 我把你的美丽记录在日记里，让文字把你的青春铭记。</font></span><br />
  83.                 <span class="comments"><font size = '2' color='#ff69b9' >
  84. 					// 我把你的笑容粘贴在日记里，让图片把你的活泼记忆。</font></span><br />
  85. 				<span class="comments"><font size = '2' color='#ff69b9' >
  86. 					// 我把我的照片夹进日记里，让爱情把你的幸福牢系。  </font></span><br />
  87. 				<span class="comments"><font size = '2' color='#ff69b9' >
  88. 					// 对我来说是个重要的时刻，我发现我已经深深爱上了你！</font></span><br />
  89.                 <span class="comments"><font size = '2' color='#ff69b9' >
  90. 					// 当我凝视你的眼，当我听到你的声音。             </font> </span><br />
  91. 				<span class="comments"><font size = '2' color='#ff69b9' >
  92. 					// 当我闻到你秀发上淡淡的清香。                  </font></span><br />
  93.  
  94.                 <span class="comments"><font size = '2' color='#ff69b9' >//  </font></span><br />
  95.  
  96. 				我爱你;<br />
  97. 				<span class="comments"><font size = '2' color='#ff69b9' >
  98. 					// 当我感受到我剧烈的心跳，我明白了：</font></span><br />
  99. 				我想你;<br />
  100. 				<span class="comments"><font size = '2' color='#ff69b9' >
  101. 					// 你在我心中最美。 </font></span><br />
  102. 				我想照顾你 <br />
  103. 				<span class="comments"><font size = '2' color='#ff69b9' >
  104. 					// 你是我今生的唯一！</font></span><br />
  105. 				<span class="comments"><font size = '2' color='#ff69b9' >
  106. 					// 所以我继续等待，我有信心，你会。</font></span><br />
  107. 				<span class="keyword">我会</span> 永远  <span class="keyword">爱你</span>;<br />
  108. 				<span class="keyword">一直</span> 爱你 <br />
  109. 				<span class="placeholder"/>我有一颗永远不变的心<br />
  110. 				<span class="placeholder"/><span class="comments"><font size = '2' color='#ff69b9' >
  111. 				    // 我认为这是一个重要的决定。</font></span><br />
  112. 				<span class="placeholder"/><span class="comments"><font size = '2' color='#ff69b9' >
  113. 				    // 你可以在任何时候决定。   </font></span><br />
  114. 				<span class="placeholder"/>爱你 = 想你<br /><br />
  115. 				我非常高兴能认识你<br />
  116. 			</div>
  117. 			<div id="loveHeart">
  118. 				<canvas id="garden"></canvas>
  119. 				<div id="words">
  120. 					<div id="messages">
  121. 						        Smart girl, we've fallen in love:
  122. 						<div id="elapseClock"></div>
  123. 					</div>
  124. 					<div id="loveu">
  125. 						<div class="signature">--Zhang</div>
  126. 					</div>
  127. 				</div>
  130. 				     </div>
  131. 				</div>
  132. 			</div>
  133. </div>
  134. 	<div class="bg1">	
  135. 		<div class="main">
  136. 			<footer style="line-height:20px">
  137.                 <div id="copyright">
  138.                      <a href='' target="_blank"></a> 
  139.                      <a href="" target="_blank"></a>
  140.                      <a href="" target="_blank"></a>
  141.                 </object>
  142.                 </div>
  143. 		</div>
  144. 	</div>
  145. </div>
  147. 	<script type="text/javascript">
  148. 		var offsetX = $("#loveHeart").width() / 2;
  149. 		var offsetY = $("#loveHeart").height() / 2 - 55;
  150. 		var together = new Date();
  151. 		together.setFullYear(2016, 6, 8);
  152. 		together.setHours(00);
  153. 		together.setMinutes(0);
  154. 		together.setSeconds(0);
  155. 		together.setMilliseconds(0);
  156. 		
  157. 		if (!document.createElement('canvas').getContext) {
  158. 			var msg = document.createElement("div");
  159. 			msg.id = "errorMsg";
  160. 			msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+"; 
  161. 			document.body.appendChild(msg);
  162. 			$("#code").css("display", "none")
  163. 			$("#copyright").css("position", "absolute");
  164. 			$("#copyright").css("bottom", "10px");
  165. 		    document.execCommand("stop");
  166. 		} else {
  167. 			setTimeout(function () {
  168. 				startHeartAnimation();
  169. 			}, 5000);
  171. 			timeElapse(together);
  172. 			setInterval(function () {
  173. 				timeElapse(together);
  174. 			}, 500);
  176. 			adjustCodePosition();
  177. 			$("#code").typewriter();
  178. 		}
  179. 	</script>
  180. 	<embed src="../music/The_Way_I_Still_Love_You.mp3" autostart="true" loop="true" hidden="true"></embed>
  181. </body>
  182. </html>

4. 第四个选项卡是“浪漫烟花”(fireworks)，代码如下：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Surprise</title>
  6.  
  7. <style>
  8. html,body{
  9. 	margin:0px;
  10. 	width:100%;
  11. 	height:100%;
  12. 	overflow:hidden;
  13. 	background:#000;
  14. }
  15. </style>
  16.  
  17. </head>
  18. <body>
  19. <form action="/4" method="post"> </form>
  20. <audio autoplay="autoplay" loop="loop" preload="auto"
  21.  
  22.             	src="../static/2.music/所念皆星河.mp3"></audio>
  23. <canvas id="canvas" style="position:absolute;width:100%;height:100%;z-index:8888"></canvas>
  24. <canvas style="position:absolute;width:100%;height:100%;z-index:9999" class="canvas" ></canvas>
  25. <div class="overlay">
  26.   <div class="tabs">
  27.     <div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div>
  28.  
  29.     <div class="tabs-panels">
  30.       <ul class="tabs-panel commands">
  31.       </ul>
  32.     </div>
  33.   </div>
  34. </div>
  35. <script>
  36. function initVars(){
  37.  
  38. 	pi=Math.PI;
  39. 	ctx=canvas.getContext("2d");
  40. 	canvas.width=canvas.clientWidth;
  41. 	canvas.height=canvas.clientHeight;
  42. 	cx=canvas.width/2;
  43. 	cy=canvas.height/2;
  44. 	playerZ=-25;
  45. 	playerX=playerY=playerVX=playerVY=playerVZ=pitch=yaw=pitchV=yawV=0;
  46. 	scale=600;
  47. 	seedTimer=0;seedInterval=5,seedLife=100;gravity=.02;
  48. 	seeds=new Array();
  49. 	sparkPics=new Array();
  50. 	s="https://cantelope.org/NYE/";
  51. 	for(i=1;i<=10;++i){
  52. 		sparkPic=new Image();
  53. 		sparkPic.src=s+"spark"+i+".png";
  54. 		sparkPics.push(sparkPic);
  55. 	}
  56. 	sparks=new Array();
  57. 	pow1=new Audio(s+"pow1.ogg");
  58. 	pow2=new Audio(s+"pow2.ogg");
  59. 	pow3=new Audio(s+"pow3.ogg");
  60. 	pow4=new Audio(s+"pow4.ogg");
  61. 	frames = 0;
  62. }
  63.  
  64. function rasterizePoint(x,y,z){
  65.  
  66. 	var p,d;
  67. 	x-=playerX;
  68. 	y-=playerY;
  69. 	z-=playerZ;
  70. 	p=Math.atan2(x,z);
  71. 	d=Math.sqrt(x*x+z*z);
  72. 	x=Math.sin(p-yaw)*d;
  73. 	z=Math.cos(p-yaw)*d;
  74. 	p=Math.atan2(y,z);
  75. 	d=Math.sqrt(y*y+z*z);
  76. 	y=Math.sin(p-pitch)*d;
  77. 	z=Math.cos(p-pitch)*d;
  78. 	var rx1=-1000,ry1=1,rx2=1000,ry2=1,rx3=0,ry3=0,rx4=x,ry4=z,uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);
  79. 	if(!uc) return {x:0,y:0,d:-1};
  80. 	var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;
  81. 	var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
  82. 	if(!z)z=.000000001;
  83. 	if(ua>0&&ua<1&&ub>0&&ub<1){
  84. 		return {
  85. 			x:cx+(rx1+ua*(rx2-rx1))*scale,
  86. 			y:cy+y/z*scale,
  87. 			d:Math.sqrt(x*x+y*y+z*z)
  88. 		};
  89. 	}else{
  90. 		return {
  91. 			x:cx+(rx1+ua*(rx2-rx1))*scale,
  92. 			y:cy+y/z*scale,
  93. 			d:-1
  94. 		};
  95. 	}
  96. }
  97.  
  98. function spawnSeed(){
  99.  
  100. 	seed=new Object();
  101. 	seed.x=-50+Math.random()*100;
  102. 	seed.y=25;
  103. 	seed.z=-50+Math.random()*100;
  104. 	seed.vx=.1-Math.random()*.2;
  105. 	seed.vy=-1.5;//*(1+Math.random()/2);
  106. 	seed.vz=.1-Math.random()*.2;
  107. 	seed.born=frames;
  108. 	seeds.push(seed);
  109. }
  110.  
  111. function splode(x,y,z){
  112.  
  113. 	t=5+parseInt(Math.random()*150);
  114. 	sparkV=1+Math.random()*2.5;
  115. 	type=parseInt(Math.random()*3);
  116. 	switch(type){
  117. 		case 0:
  118. 			pic1=parseInt(Math.random()*10);
  119. 			break;
  120. 		case 1:
  121. 			pic1=parseInt(Math.random()*10);
  122. 			do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);
  123. 			break;
  124. 		case 2:
  125. 			pic1=parseInt(Math.random()*10);
  126. 			do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);
  127. 			do{ pic3=parseInt(Math.random()*10); }while(pic3==pic1 || pic3==pic2);
  128. 			break;
  129. 	}
  130. 	for(m=1;m<t;++m){
  131. 		spark=new Object();
  132. 		spark.x=x; spark.y=y; spark.z=z;
  133. 		p1=pi*2*Math.random();
  134. 		p2=pi*Math.random();
  135. 		v=sparkV*(1+Math.random()/6)
  136. 		spark.vx=Math.sin(p1)*Math.sin(p2)*v;
  137. 		spark.vz=Math.cos(p1)*Math.sin(p2)*v;
  138. 		spark.vy=Math.cos(p2)*v;
  139. 		switch(type){
  140. 			case 0: spark.img=sparkPics[pic1]; break;
  141. 			case 1:
  142. 				spark.img=sparkPics[parseInt(Math.random()*2)?pic1:pic2];
  143. 				break;
  144. 			case 2:
  145. 				switch(parseInt(Math.random()*3)){
  146. 					case 0: spark.img=sparkPics[pic1]; break;
  147. 					case 1: spark.img=sparkPics[pic2]; break;
  148. 					case 2: spark.img=sparkPics[pic3]; break;
  149. 				}
  150. 				break;
  151. 		}
  152. 		spark.radius=25+Math.random()*50;
  153. 		spark.alpha=1;
  154. 		spark.trail=new Array();
  155. 		sparks.push(spark);
  156. 	}
  157. 	switch(parseInt(Math.random()*4)){
  158. 		case 0:	pow=new Audio(s+"pow1.ogg"); break;
  159. 		case 1:	pow=new Audio(s+"pow2.ogg"); break;
  160. 		case 2:	pow=new Audio(s+"pow3.ogg"); break;
  161. 		case 3:	pow=new Audio(s+"pow4.ogg"); break;
  162. 	}
  163. 	d=Math.sqrt((x-playerX)*(x-playerX)+(y-playerY)*(y-playerY)+(z-playerZ)*(z-playerZ));
  164. 	pow.volume=1.5/(1+d/10);
  165. 	pow.play();
  166. }
  167.  
  168. function doLogic(){
  169.  
  170. 	if(seedTimer<frames){
  171. 		seedTimer=frames+seedInterval*Math.random()*10;
  172. 		spawnSeed();
  173. 	}
  174. 	for(i=0;i<seeds.length;++i){
  175. 		seeds[i].vy+=gravity;
  176. 		seeds[i].x+=seeds[i].vx;
  177. 		seeds[i].y+=seeds[i].vy;
  178. 		seeds[i].z+=seeds[i].vz;
  179. 		if(frames-seeds[i].born>seedLife){
  180. 			splode(seeds[i].x,seeds[i].y,seeds[i].z);
  181. 			seeds.splice(i,1);
  182. 		}
  183. 	}
  184. 	for(i=0;i<sparks.length;++i){
  185. 		if(sparks[i].alpha>0 && sparks[i].radius>5){
  186. 			sparks[i].alpha-=.01;
  187. 			sparks[i].radius/=1.02;
  188. 			sparks[i].vy+=gravity;
  189. 			point=new Object();
  190. 			point.x=sparks[i].x;
  191. 			point.y=sparks[i].y;
  192. 			point.z=sparks[i].z;
  193. 			if(sparks[i].trail.length){
  194. 				x=sparks[i].trail[sparks[i].trail.length-1].x;
  195. 				y=sparks[i].trail[sparks[i].trail.length-1].y;
  196. 				z=sparks[i].trail[sparks[i].trail.length-1].z;
  197. 				d=((point.x-x)*(point.x-x)+(point.y-y)*(point.y-y)+(point.z-z)*(point.z-z));
  198. 				if(d>9){
  199. 					sparks[i].trail.push(point);
  200. 				}
  201. 			}else{
  202. 				sparks[i].trail.push(point);
  203. 			}
  204. 			if(sparks[i].trail.length>5)sparks[i].trail.splice(0,1);
  205. 			sparks[i].x+=sparks[i].vx;
  206. 			sparks[i].y+=sparks[i].vy;
  207. 			sparks[i].z+=sparks[i].vz;
  208. 			sparks[i].vx/=1.075;
  209. 			sparks[i].vy/=1.075;
  210. 			sparks[i].vz/=1.075;
  211. 		}else{
  212. 			sparks.splice(i,1);
  213. 		}
  214. 	}
  215. 	p=Math.atan2(playerX,playerZ);
  216. 	d=Math.sqrt(playerX*playerX+playerZ*playerZ);
  217. 	d+=Math.sin(frames/80)/1.25;
  218. 	t=Math.sin(frames/200)/40;
  219. 	playerX=Math.sin(p+t)*d;
  220. 	playerZ=Math.cos(p+t)*d;
  221. 	yaw=pi+p+t;
  222. }
  223.  
  224. function rgb(col){
  225.  
  226. 	var r = parseInt((.5+Math.sin(col)*.5)*16);
  227. 	var g = parseInt((.5+Math.cos(col)*.5)*16);
  228. 	var b = parseInt((.5-Math.sin(col)*.5)*16);
  229. 	return "#"+r.toString(16)+g.toString(16)+b.toString(16);
  230. }
  231.  
  232. function draw(){
  233.  
  234. 	ctx.clearRect(0,0,cx*2,cy*2);
  235.  
  236. 	ctx.fillStyle="#ff8";
  237. 	for(i=-100;i<100;i+=3){
  238. 		for(j=-100;j<100;j+=4){
  239. 			x=i;z=j;y=25;
  240. 			point=rasterizePoint(x,y,z);
  241. 			if(point.d!=-1){
  242. 				size=250/(1+point.d);
  243. 				d = Math.sqrt(x * x + z * z);
  244. 				a = 0.75 - Math.pow(d / 100, 6) * 0.75;
  245. 				if(a>0){
  246. 					ctx.globalAlpha = a;
  247. 					ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
  248. 				}
  249. 			}
  250. 		}
  251. 	}
  252. 	ctx.globalAlpha=1;
  253. 	for(i=0;i<seeds.length;++i){
  254. 		point=rasterizePoint(seeds[i].x,seeds[i].y,seeds[i].z);
  255. 		if(point.d!=-1){
  256. 			size=200/(1+point.d);
  257. 			ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
  258. 		}
  259. 	}
  260. 	point1=new Object();
  261. 	for(i=0;i<sparks.length;++i){
  262. 		point=rasterizePoint(sparks[i].x,sparks[i].y,sparks[i].z);
  263. 		if(point.d!=-1){
  264. 			size=sparks[i].radius*200/(1+point.d);
  265. 			if(sparks[i].alpha<0)sparks[i].alpha=0;
  266. 			if(sparks[i].trail.length){
  267. 				point1.x=point.x;
  268. 				point1.y=point.y;
  269. 				switch(sparks[i].img){
  270. 					case sparkPics[0]:ctx.strokeStyle="#f84";break;
  271. 					case sparkPics[1]:ctx.strokeStyle="#84f";break;
  272. 					case sparkPics[2]:ctx.strokeStyle="#8ff";break;
  273. 					case sparkPics[3]:ctx.strokeStyle="#fff";break;
  274. 					case sparkPics[4]:ctx.strokeStyle="#4f8";break;
  275. 					case sparkPics[5]:ctx.strokeStyle="#f44";break;
  276. 					case sparkPics[6]:ctx.strokeStyle="#f84";break;
  277. 					case sparkPics[7]:ctx.strokeStyle="#84f";break;
  278. 					case sparkPics[8]:ctx.strokeStyle="#fff";break;
  279. 					case sparkPics[9]:ctx.strokeStyle="#44f";break;
  280. 				}
  281. 				for(j=sparks[i].trail.length-1;j>=0;--j){
  282. 					point2=rasterizePoint(sparks[i].trail[j].x,sparks[i].trail[j].y,sparks[i].trail[j].z);
  283. 					if(point2.d!=-1){
  284. 						ctx.globalAlpha=j/sparks[i].trail.length*sparks[i].alpha/2;
  285. 						ctx.beginPath();
  286. 						ctx.moveTo(point1.x,point1.y);
  287. 						ctx.lineWidth=1+sparks[i].radius*10/(sparks[i].trail.length-j)/(1+point2.d);
  288. 						ctx.lineTo(point2.x,point2.y);
  289. 						ctx.stroke();
  290. 						point1.x=point2.x;
  291. 						point1.y=point2.y;
  292. 					}
  293. 				}
  294. 			}
  295. 			ctx.globalAlpha=sparks[i].alpha;
  296. 			ctx.drawImage(sparks[i].img,point.x-size/2,point.y-size/2,size,size);
  297. 		}
  298. 	}
  299. }
  300.  
  301. function frame(){
  302.  
  303. 	if(frames>100000){
  304. 		seedTimer=0;
  305. 		frames=0;
  306. 	}
  307. 	frames++;
  308. 	draw();
  309. 	doLogic();
  310. 	requestAnimationFrame(frame);
  311. }
  312.  
  313. window.addEventListener("resize",()=>{
  314. 	canvas.width=canvas.clientWidth;
  315. 	canvas.height=canvas.clientHeight;
  316. 	cx=canvas.width/2;
  317. 	cy=canvas.height/2;
  318. });
  319.  
  320. initVars();
  321. frame();
  322. </script>
  323. <script src="js/index.js"></script>
  324.  
  325. </body>
  326. </html>

4. 第五个选项卡是“制作过程”(working_process)，效果如下图，我做了近一个月，我把每天制作的过程用EV录屏，录了下来（每天就录五分钟左右），然后做完之后，把这些视频用剪辑视频的软件整合剪辑一下，并且加速，插入到网页里面，这样就能在线看到制作过程啦~

此模块代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>制作过程</title>
  6.     <link rel="icon" href="../static/1.images/login_main_page/爱心.png" type="image/x-icon"/>
  7.     <link href="../static/login_main_page_css/bootstrap.min.css" rel="stylesheet">
  8.     <script src="../static/login_main_page_js/jquery-3.3.1.min.js"></script>
  9.     <script src="../static/login_main_page_js/bootstrap.min.js"></script>
  10.     <script src="../static/login_main_page_js/shubiaoaixin.js"></script>
  11.     <link  href="../static/login_main_page_css/header.css" rel="stylesheet">
  12.     <!------------------------照片背景------------------------>
  13.     <style type="text/css">
  14.                     html,body
  15.                     {
  16.                         height: 100%;
  17.                         color: #00FF00;
  18.                     }
  19.                     body
  20.                     {
  21.                          background-size: cover;
  22.                          background-image:url("/static/1.images/working_process/复古照相机.jpg")
  23.                     }
  24.                     video
  25.                     {
  26.                         height: 60%;
  27.                         margin-left:220px;
  28. 			            margin-top: 50px;
  29.                     }
  30.     </style>
  31.     <style type="text/css">
  32.                     .header_right
  33.                     {
  34.                         margin-left:1px;
  35.                         margin-top: 1px;
  36.                     }
  37.     </style>
  38.     <style type="text/css">
  39. 				button
  40. 				{
  41. 				    width:300px;
  42.                     height:50px;
  43.                     font-size:19px;
  44.                     line_height:36px;
  45.                     border:1px solid transparent;
  46.                     color:#8b4513;                   /* 按钮文字颜色*/
  47.                     background-color:transparent;    /* 按钮背景颜色*/
  48.                     //background-color:pink;
  49.                     border-color: none;              /* 按钮边框颜色*/
  50. 				}
  51.     </style>
  52. </head>
  53.     <body>
  54.            <form action="/5" method="post"> </form>
  55.            <!--1.四个选项卡 首页、照片墙、历程、我说  -->
  56. 		   <div class="header">
  57. 				    <!--0.Happy sixth anniversary-->
  58. 					<div class="logo">
  59. 					<form action="/1" method="post">
  60. 						<button style="font-size:24px;">
  61. 							<font color = white >
  62. 								<i><b>Happy sixth anniversary</b></i>
  63. 							</font>
  64. 						</button>
  65. 					</form>
  66. 					</div>
  67. 				    <!--1.首页-->
  68. 				    <div class="logo">
  69. 				    <form action="/1" method="post">
  70. 						<button style="width:150px;">
  71. 							<font color = white >
  72. 								首页
  73. 							</font>
  74. 						</button>
  75. 					</form>
  76. 					</div>
  77. 				    <!--2.照片墙-->
  78. 				    <div class="logo">
  79. 				    <form action="/2" method="post">
  80. 						<button style="width:140px;">
  81.                                 <a href="https://aimeike.tv/video/RZLLH" style="color: white;">照片墙</a>
  82. 						</button>
  83. 					</form>
  84. 					</div>
  85. 				    <!--3.历程-->
  86. 				    <div class="logo">
  87. 				    <form action="/3" method="post">
  88. 						<button style="width:140px;">
  89. 								<font color = white >
  90. 								历程
  91. 								</font>
  92. 						</button>
  93. 					</form>
  94. 					</div>
  95. 				    <!--4.我说-->
  96. 				    <div class="logo">
  97. 				    <form action="/4" method="post">
  98. 						<button style="width:140px;">
  99. 							<font  color = white >
  100. 								我说
  101. 							</font>
  102. 						</button>
  103. 					</form>
  104. 					</div>
  105. 				    <!--5.浪漫烟花-->
  106. 				    <div class="logo">
  107. 				    <form action="/5" method="post">
  108. 						<button style="width:150px;">
  109. 							 <font  color = white >
  110. 								浪漫烟花
  111. 							 </font>
  112. 						</button>
  113. 					</form>
  114. 					</div>
  115. 				    <!--6.制作过程-->
  116. 				    <div class="logo">
  117. 				    <form action="/6" method="post">
  118. 						<button style="width:160px;">
  119. 							<font  color = white>
  120.                               <b>
  121. 								制作过程
  122.                               </b>
  123. 							</font>
  124. 						</button>
  125. 					</form>
  126. 					</div>
  127. 			</div>
  128.                 <video  controls="controls">
  129.                 <source src = "../static/3.video/六周年礼物制作过程_EV.mp4">
  130.                 </source>
  131.             </video>
  132.     </body>
  133. </html>
  134.

这就是整个前后端的代码，整个工程能够完整的在我电脑上运行起来了，但是下一个问题是如何把自己制作的网页发布到互联网上，别人直接输入网址就能查看呢？

三、我了解到，把自己制作的网页发布到互联网上，第一步需要确定自己的网页是动态网页还是静态网页，我请教了一些同学，说我的做的这个网页应该是动态网页，虽然没有数据库，但是因为涉及到了用户的账号和密码输入，如果伙伴们做的是静态网页，Github上应该就能发布，操作应该很简单。第二步，需要域名和服务器，这一部分我也是做了大量的工作，看了各种博客和论坛，域名和服务器都是要买的，.com的域名较贵.top的域名相对来说比较便宜。我做了，腾讯云，阿里云，还有三丰云等各种平台账号的注册并且尝试，最后都失败了，我不了解，好像这个方案Flask做后端，网上的教程很少，最后实在没办法了，我去淘宝找了一个专业做网页的店铺，向他说明了我的情况。

我问他，我的前后端都已经配置好了，都已经调试没问题了，我想达到在别人的电脑上输入网址就能访问我网页的效果，他说可以做，全部需要50元钱，包括域名，我滴天，这也太便宜了，我直接好家伙，果然是考技术吃饭的，对于专业的来说，可能连十分钟都用不上吧，我又抱着想学明白的态度问了他，我说能不能在你做的时候给我录一个视频，教教我怎么做，他说可以需要多加20元钱，我觉得很值，但是结果他只教了我，怎么把本地文件通过FlashFXP软件传输到FTP服务器上......wo emm 了....

由于不是这个专业的，我没有深入研究，各位伙伴如果有自己的制作心得和解决问题的方案，欢迎留言，欢迎指正~

最后，我把整个工程上传到了我的博客上，需要下载，赚点积分o(╥﹏╥)o~

参考博客：

1. html爱心表白代码（最全）_皮小孩ls的博客-CSDN博客_html表白代码大全可复制

2.html,实现心动的表白代码_你喜欢就值得的博客-CSDN博客_html表白代码

3.表白代码，HTML_Faith-小浩浩的博客-CSDN博客_html表白代码大全可复制

4.使用jQuery+html表白代码_程 序 猿的博客-CSDN博客_html表白代码

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/179761
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号