项目介绍：
项目用到的编程知识：html+css+js
项目代码量：共计7个index.html文件，5个页面，实现了背景粒子动画，我的主页，我的博客，我的照片（使用轮播图循环实现），我的日记（需要输入密码），我的课表，每个页面在底部都会随机出现名言警句，并且每个页面的左下方有一个可爱二次元女孩时刻做着动作，极大增强了作品的趣味创新性等等
项目布局干净，代码结构合理清晰，总体来说比较不错，适合用来做web大作业或者课程设计！
部分代码如下：
homePage.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>( •̀ ω •́ )DY.小熊的主页</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="icon" href="images/logo.png" sizes="35*35">
<style type="text/css">
#apDiv1 {
position: absolute;
width: 33px;
height: 30px;
z-index: 1;
left: 50%;
top:87vh;
}
</style>
<script src="js/jquery.js"></script>
<script>
function scrollTo(ele, speed){
if(!speed) speed = 800;
if(!ele){
$("html,body").animate({scrollTop:0},speed);
}else{
$("html,body").animate({scrollTop:$(ele).offset().top},speed);
}
return false;
}
</script>
</head>
<body style="margin:0%;">
<!-- /线条随鼠标移动-->
<script>
!function(){
function n(n,e,t){
return n.getAttribute(e)||t
}
function e(n){
return document.getElementsByTagName(n)
}
function t(){
var t=e("script"),o=t.length,i=t[o-1];
return{
l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)
}
}
function o(){
a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
}
function i(){
r.clearRect(0,0,a,c);
var n,e,t,o,m,l;
s.forEach(function(i,x){
for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
}),
x(i)
}
var a,c,u,m=document.createElement("canvas"),
d=t(),l="c_n"+d.l,r=m.getContext("2d"),
x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
function(n){
window.setTimeout(n,1e3/45)
},
w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
window.onmousemove=function(n){
n=n||window.event,y.x=n.clientX,y.y=n.clientY
},
window.onmouseout=function(){
y.x=null,y.y=null
};
for(var s=[],f=0;d.n>f;f++){
var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
}
u=s.concat([y]),
setTimeout(function(){i()},100)
}();
</script>
<!-- /线条随鼠标移动-->
<!-- /失去焦点Title变化 -->
<script>
document.addEventListener('visibilitychange', function()
{
var isHidden = document.hidden;
if (isHidden)
{
document.title = '(oﾟvﾟ)ノ Hi( •̀ ω •́ )AnranWu的主页';
}
else
{
document.title = '( •̀ ω •́ )AnranWu的主页';
}
});
</script>
<!-- /失去焦点Title变化 -->
<!-- /看板娘-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
//jsonpath控制显示那个小萝莉模型，下面这个就是我觉得最可爱的小萝莉模型，替换时后面名字也要替换掉
jsonPath: "https://unpkg.com/[email protected]/assets/koharu.model.json",
"scale": 1
},
"display": {
"position": "left", //看板娘的表现位置
"width": 80, //小萝莉的宽度
"height": 160, //小萝莉的高度
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
</script>
<!-- /看板娘-->
<div id="header">
<img src="images/kk.jpg" width="100%" height="100%"/>
</div>
<div id="apDiv1">
<img src="images/下拉.png" width="34" height="29" style="cursor:pointer;" onclick="scrollTo('#gotomain',800);"/>
</div>
<a id="gotomain"></a>
<div id="main">
<div id="catalogue">
<ul>
<li class="catalogue-li" style="background-color:rgba(237,228,254,0.7); font-family:'方正粗黑宋简体';"><a href="index.html">我的主页</a></li>
<li class="catalogue-li"><a href="myBlogs.html">我的博客</a></li>
<li class="catalogue-li"><a href="myAlbum.html">我的相册</a></li>
<li class="catalogue-li"><a href="myDairy.html">我的日记</a></li>
<li class="catalogue-li">我的课表</li>
</ul>
</div>
<div id="main-show">
<div id="main-head">
<p> </p>
<p>终有一天，不再孤军奋战</p>
<p> </p>
<p> </p>
</div>
<div class="left-picture">
<img src="images/个人简介素材/first.jpg"/>
</div>
<div class="right-text">
<p> </p>
<p> </p>
<p>有时会有点小迷糊</p>
<p>像迷失在麦田里的少年</p>
</div>
<hr>
<div class="left-text">
<p> </p>
<p>最大的梦想</p>
<p>是创办一家计算机系统技术公司</p>
<p>虽然本身很low</p>
<p>但就是想哈</p>
</div>
<div class="right-picture">
<img style="display:inline; float:right;" src="images/个人简介素材/证书.jpg"/>
</div>
<hr>
<div class="left-picture">
<img src="images/个人简介素材/daima.jpg"/>
</div>
<div class="right-text">
<p> </p>
<p> </p>
<p> 有时喜欢做志愿者</p>
<p> 自己快乐不起来的时候</p>
<p> 就去帮助别人快乐吧</p>
</div>
<hr>
<div class="left-text">
<p> </p>
<p> </p>
<p>还是个少年人</p>
<p>会为了故事里的美好欢呼</p>
<p>会为了阴沟里的仰望哭泣</p>
</div>
<div class="right-picture">
<img style="display:inline; float:right;" src="images/个人简介素材/电影.jpeg"/>
</div>
<hr>
<div class="left-picture">
<img src="images/个人简介素材/QQ糖.jpeg"/>
</div>
<div class="right-text">
<p> </p>
<p> </p>
<p>是个间歇性吃货</p>
<p>总是管不住嘴</p>
<p>又迈不开腿</p>
</div>
<hr>
<div class="left-text">
<p> </p>
<p> </p>
<p>是个上进boy</p>
<p>可是好像陷入了20岁迷茫</p>
<p>不知道前路何方</p>
</div>
<div class="right-picture">
<img style="display:inline; float:right;" src="images/个人简介素材/理想.jpeg"/>
</div>
<div>
<p> </p>
<p style="font-size:36px;">But so what?</p>
<p style="font-size:24px;">路漫漫其修远兮，吾将上下而求索。</p>
<p style="font-size:24px;">未完待续 ... </p>
<p style="font-size:24px;"> </p>
</div>
</div>
</div>
<div style="width:100%;">
<div style="float:left;">
</div>
<div style="float:right"><img src="images/backToTop.png" width="50%" onclick="scrollTo('#gotomain',800);" style="cursor:pointer;"/>
</div>
</div>
<div id="footer">
<img src="images/foot.png" width="100%" height="100%"/>
<p id="yewei" style="text-align:center; font-family:'华文新魏';">[ 埋骨何须桑梓地，人生无处不青山 ]</p>
<p style="text-align:center; font-family:'华文新魏';">Made by XiongBaiTao</p>
</div>
<SCRIPT language=javascript>
<!--
var timer1;
var txt=new Array(17);
txt[0]="[ 明日之我，胸中有丘壑，立马振山河。 ]";
txt[1]="[ 能够让你后悔的，从来不是你做过的事，而是你想做却没有去做的事。 ]";
txt[2]="[ 小时候觉得开心就好，现在也是。 ]";
txt[3]="[ 欲买桂花同载酒，终不似，少年游 ]";
txt[4]="[ 聚是一团火，散是满天星 ]";
txt[5]="[ 你来人间一趟，你要看看太阳 ]";
txt[6]="[ 人之所以孤独，是因为要和某个人相遇。 ]";
txt[7]="[ 把酒祝东风，且共从容。 ——欧阳修 ]";
txt[8]="[ 每个人都会死去，但并不是每个人都真正活过。 ]";
txt[9]="[ 人生碌碌，竞短论长，却不道荣枯有数，得失难量 ]";
txt[10]="[ 总之岁月漫长，然而值得等待 ]";
txt[11]="[ 关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。 ]";
txt[12]="[ 所有快乐，无需假装，此生尽兴，赤诚善良 ]";
txt[13]="[ 为你，千千万万遍。 ]";
txt[14]="[ 埋骨何须桑梓地，人生无处不青山 ]";
txt[15]="[ 于浩歌狂热之际寒，于天上看见深渊，于一切眼中看见无所有，于无处希望中得救。 ]";
txt[16]="[ 人生最好的三个词：久别重逢 失而复得 虚惊一场 ]";
timer1 = setInterval("myval()",4000);
function myval()
{
var rnd=Math.floor(Math.random()*17);
window.document.getElementById("yewei").innerHTML=txt[rnd];
}
-->
</SCRIPT>
</body>
</html>
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>( •̀ ω •́ )DY.小熊的主页</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="icon" href="images/logo.png" sizes="35*35">
</head>
<body onload="demo.init();">
<!-- /加载动画 -->
<script>
const SETTINGS =
{
rebound:
{
tension: 16,
friction: 5
},
spinner:
{
id: 'spinner',
radius: 90,
sides: 3,
depth: 4,
colors:
{
//background: '#231E76',
//stroke: '#231E76',
background: '#f0f0f0',
stroke: '#272633',
base: null,
child: '#272633'
},
alwaysForward: true, // When false the spring will reverse normally.
restAt: 0.5, // A number from 0.1 to 0.9 || null for full rotation
renderBase: false
}
};
</script>
<script src="js/main.js"></script>
<!-- /加载动画 -->
<!-- /失去焦点Title变化 -->
<script>
document.addEventListener('visibilitychange', function()
{
var isHidden = document.hidden;
if (isHidden)
{
document.title = '(oﾟvﾟ)ノ Hi( •̀ ω •́ )AnranWu的主页';
}
else
{
document.title = '( •̀ ω •́ )AnranWu的主页';
}
});
</script>
<!-- /失去焦点Title变化 -->
<!--自动转到主页-->
<script language="javascript" type="text/javascript">
window.setTimeout("window.location='homePage.html'",2000);
</script>
<!--自动转到主页-->
</body>
</html>
myAlbum.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>( •̀ ω •́ )DY.小熊的相册</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="icon" href="images/logo.png" sizes="35*35">
<style>
.target {
width:500px;
height:300px;
overflow:hidden;
position:relative;
margin:0 auto;
}
.target img {
margin:0 auto;
}
</style>
<script src="js/jquery.js"></script>
<script>
function scrollTo(ele, speed){
if(!speed) speed = 800;
if(!ele){
$("html,body").animate({scrollTop:0},speed);
}else{
$("html,body").animate({scrollTop:$(ele).offset().top},speed);
}
return false;
}
</script>
</head>
<body style="margin:0%; text-align:center;">
<!-- /线条随鼠标移动-->
<script>
!function(){
function n(n,e,t){
return n.getAttribute(e)||t
}
function e(n){
return document.getElementsByTagName(n)
}
function t(){
var t=e("script"),o=t.length,i=t[o-1];
return{
l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)
}
}
function o(){
a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
}
function i(){
r.clearRect(0,0,a,c);
var n,e,t,o,m,l;
s.forEach(function(i,x){
for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
}),
x(i)
}
var a,c,u,m=document.createElement("canvas"),
d=t(),l="c_n"+d.l,r=m.getContext("2d"),
x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
function(n){
window.setTimeout(n,1e3/45)
},
w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
window.onmousemove=function(n){
n=n||window.event,y.x=n.clientX,y.y=n.clientY
},
window.onmouseout=function(){
y.x=null,y.y=null
};
for(var s=[],f=0;d.n>f;f++){
var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
}
u=s.concat([y]),
setTimeout(function(){i()},100)
}();
</script>
<!-- /线条随鼠标移动-->
<!-- /失去焦点Title变化 -->
<script>
document.addEventListener('visibilitychange', function()
{
var isHidden = document.hidden;
if (isHidden)
{
document.title = '(oﾟvﾟ)ノ Hi( •̀ ω •́ )AnranWu的主页';
}
else
{
document.title = '( •̀ ω •́ )AnranWu的主页';
}
});
</script>
<!-- /失去焦点Title变化 -->
<!-- /看板娘-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
//jsonpath控制显示那个小萝莉模型，下面这个就是我觉得最可爱的小萝莉模型，替换时后面名字也要替换掉
jsonPath: "https://unpkg.com/[email protected]/assets/koharu.model.json",
"scale": 1
},
"display": {
"position": "left", //看板娘的表现位置
"width": 80, //小萝莉的宽度
"height": 160, //小萝莉的高度
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
</script>
<!-- /看板娘-->
<a id="gotomain"></a>
<div class="other-header" style="background-image:url(images/页首图片/烟火.jpg);">
<p style="color:#63C;">我的相册</p>
</div>
<div id="main">
<div id="catalogue">
<ul>
<li class="catalogue-li"><a href="index.html">我的主页</a></li>
<li class="catalogue-li"><a href="myBlogs.html">我的博客</a></li>
<li class="catalogue-li" style="background-color:rgba(237,228,254,0.7); font-family:'方正粗黑宋简体';"><a href="myAlbum.html">我的相册</a></li>
<li class="catalogue-li"><a href="myDairy.html">我的日记</a></li>
<li class="catalogue-li"><a href="myTimetable.html">我的课表</a></li>
</ul>
</div>
<div id="main-show">
<div class="target" id="target-1">
<div>
<div><img src="images/个人相册/zp1.jpg" /></div>
<div><img src="images/个人相册/zp2.jpg" /></div>
<div><img src="images/个人相册/zp3.jpg" /></div>
<div><img src="images/个人相册/zp4.jpg" /></div>
<div><img src="images/个人相册/zp5.jpg" /></div>
<div><img src="images/个人相册/zp6.jpg" /></div>
<div><img src="images/个人相册/zp7.jpg" /></div>
<div><img src="images/个人相册/zp8.jpg" /></div>
<div><img src="images/个人相册/zp9.jpg" /></div>
<div><img src="images/个人相册/zp10.jpg" /></div>
<div><img src="images/个人相册/zp11.jpg" /></div>
<div><img src="images/个人相册/zp12.jpg" /></div>
</div>
</div>
</div>
</div>
<div style="width:100%;">
<div style="float:left;">
</div>
<div style="float:right"><img src="images/backToTop.png" width="50%" onclick="scrollTo('#gotomain',800);" style="cursor:pointer;"/>
</div>
</div>
<div id="footer">
<img src="images/foot.png" width="100%" height="100%"/>
<p id="yewei" style="text-align:center; font-family:'华文新魏';">[ 埋骨何须桑梓地，人生无处不青山 ]</p>
<p style="text-align:center; font-family:'华文新魏';">Made by XiongBaiTao</p>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/HappyImage.min.js"></script>
<script>
$( "#target-1" ).HappyImage({
effect: "slide"
});
$( "#target-2" ).HappyImage({
effect: "fade"
});
</script>
<SCRIPT language=javascript>
<!--
var timer1;
var txt=new Array(17);
txt[0]="[ 明日之我，胸中有丘壑，立马振山河。 ]";
txt[1]="[ 能够让你后悔的，从来不是你做过的事，而是你想做却没有去做的事。 ]";
txt[2]="[ 小时候觉得开心就好，现在也是。 ]";
txt[3]="[ 欲买桂花同载酒，终不似，少年游 ]";
txt[4]="[ 聚是一团火，散是满天星 ]";
txt[5]="[ 你来人间一趟，你要看看太阳 ]";
txt[6]="[ 人之所以孤独，是因为要和某个人相遇。 ]";
txt[7]="[ 把酒祝东风，且共从容。 ——欧阳修 ]";
txt[8]="[ 每个人都会死去，但并不是每个人都真正活过。 ]";
txt[9]="[ 人生碌碌，竞短论长，却不道荣枯有数，得失难量 ]";
txt[10]="[ 总之岁月漫长，然而值得等待 ]";
txt[11]="[ 关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。 ]";
txt[12]="[ 所有快乐，无需假装，此生尽兴，赤诚善良 ]";
txt[13]="[ 为你，千千万万遍。 ]";
txt[14]="[ 埋骨何须桑梓地，人生无处不青山 ]";
txt[15]="[ 于浩歌狂热之际寒，于天上看见深渊，于一切眼中看见无所有，于无处希望中得救。 ]";
txt[16]="[ 人生最好的三个词：久别重逢 失而复得 虚惊一场 ]";
timer1 = setInterval("myval()",4000);
function myval()
{
var rnd=Math.floor(Math.random()*17);
window.document.getElementById("yewei").innerHTML=txt[rnd];
}
-->
</SCRIPT>
</body>
</html>
myBlogs.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>( •̀ ω •́ )DY.小熊的博客</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="icon" href="images/logo.png" sizes="35*35">
<script src="js/jquery.js"></script>
<script>
function scrollTo(ele, speed){
if(!speed) speed = 800;
if(!ele){
$("html,body").animate({scrollTop:0},speed);
}else{
$("html,body").animate({scrollTop:$(ele).offset().top},speed);
}
return false;
}
</script>
</head>
<body style="margin:0%; text-align:center;">
<!-- /线条随鼠标移动-->
<script>
!function(){
function n(n,e,t){
return n.getAttribute(e)||t
}
function e(n){
return document.getElementsByTagName(n)
}
function t(){
var t=e("script"),o=t.length,i=t[o-1];
return{
l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)
}
}
function o(){
a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
}
function i(){
r.clearRect(0,0,a,c);
var n,e,t,o,m,l;
s.forEach(function(i,x){
for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
}),
x(i)
}
var a,c,u,m=document.createElement("canvas"),
d=t(),l="c_n"+d.l,r=m.getContext("2d"),
x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
function(n){
window.setTimeout(n,1e3/45)
},
w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
window.onmousemove=function(n){
n=n||window.event,y.x=n.clientX,y.y=n.clientY
},
window.onmouseout=function(){
y.x=null,y.y=null
};
for(var s=[],f=0;d.n>f;f++){
var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
}
u=s.concat([y]),
setTimeout(function(){i()},100)
}();
</script>
<!-- /线条随鼠标移动-->
<!-- /失去焦点Title变化 -->
<script>
document.addEventListener('visibilitychange', function()
{
var isHidden = document.hidden;
if (isHidden)
{
document.title = '(oﾟvﾟ)ノ Hi( •̀ ω •́ )AnranWu的主页';
}
else
{
document.title = '( •̀ ω •́ )AnranWu的主页';
}
});
</script>
<!-- /失去焦点Title变化 -->
<!-- /看板娘-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
//jsonpath控制显示那个小萝莉模型，下面这个就是我觉得最可爱的小萝莉模型，替换时后面名字也要替换掉
jsonPath: "https://unpkg.com/[email protected]/assets/koharu.model.json",
"scale": 1
},
"display": {
"position": "left", //看板娘的表现位置
"width": 80, //小萝莉的宽度
"height": 160, //小萝莉的高度
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
</script>
<!-- /看板娘-->
<a id="gotomain"></a>
<div class="other-header" style="background-image:url(images/页首图片/草原.jpg);">
<p>我的博客</p>
</div>
<div id="main">
<div id="catalogue">
<ul>
<li class="catalogue-li"><a href="index.html">我的主页</a></li>
<li class="catalogue-li" style="background-color:rgba(237,228,254,0.7); font-family:'方正粗黑宋简体';"><a href="myBlogs.html">我的博客</a></li>
<li class="catalogue-li"><a href="myAlbum.html">我的相册</a></li>
<li class="catalogue-li"><a href="myDairy.html">我的日记</a></li>
<li class="catalogue-li"><a href="myTimetable.html">我的课表</a></li>
</ul>
</div>
<div id="main-show">
<div>
<p class="blogTitle"> </p>
<p class="blogTitle"><a style="text-decoration:none;" href="blogs/blog1.html">一道无限极类 PHP 试题</a></p>
<p class="blogSummary">记某次笔试碰到的一道无限极类试题，当时时间比较紧（满满六页试题），还是手写代码，所以最终写的有点错误。记不住原题了，但是要求都知道，特此记录下来！</p>
<p class="blogSummary">
<a style="text-align:left; text-decoration:underline; font-weight:bold; color:#006; font-family:'黑体';" href="blogs/blog1.html">阅读全文»</a></p>
</div>
<hr style="width:100%;" />
<div>
<p class="blogTitle"><a style="text-decoration:none;" href="blogs/blog2.html">扫码登录原理及实现</a></p>
<p class="blogSummary">由于扫码登录比账号密码登录更方便、快捷、灵活，在实际使用中更受到用户的欢迎。</p>
<p class="blogSummary">本文主要介绍了扫码登录的原理及整体流程，包含了二维码的生成/获取、过期失效的处理、登录状态的监听。</p>
<p class="blogSummary"><a style="text-align:left; text-decoration:underline; font-weight:bold; color:#006; font-family:'黑体';" href="blogs/blog2.html">阅读全文»</a></p>
</div>
<hr style="width:100%;" />
<div>
<p class="blogTitle"><a style="text-decoration:none;" href="blogs/blog3.html">Docker 容器化部署 Python 应用</a></p>
<p class="blogSummary">Docker 是一个开源项目，为开发人员和系统管理员提供了一个开放平台，可以将应用程序构建、打包为一个轻量级容器，并在任何地方运行。Docker 会在软件容器中自动部署应用程序。</p>
<p class="blogSummary"><a style="text-align:left; text-decoration:underline; font-weight:bold; color:#006; font-family:'黑体';" href="blogs/blog3.html">阅读全文»</a></p>
</div>
<hr style="width:100%;" />
<div>
<p class="blogTitle"><a style="text-decoration:none;" href="blogs/blog4.html">Java & PHP RSA 互通密钥、签名、验签、加密、解密</a></p>
<p class="blogSummary">RSA加密算法是一种非对称加密算法。在公开密钥加密和电子商业中RSA被广泛使用。RSA是1977年由罗纳德·李维斯特（Ron Rivest）、阿迪·萨莫尔（Adi Shamir）和伦纳德·阿德曼（Leonard Adleman）一起提出的。当时他们三人都在麻省理工学院工作。RSA就是他们三人姓氏开头字母拼在一起组成的。</p>
<p class="blogSummary"><a style="text-align:left; text-decoration:underline; font-weight:bold; color:#006; font-family:'黑体';" href="blogs/blog4.html">阅读全文»</a></p>
</div>
<hr style="width:100%;" />
<div>
<p class="blogTitle"><a style="text-decoration:none;" href="blogs/blog5.html">V2Ray+WebSocket+TLS+Nginx 配置及使用</a></p>
<p class="blogSummary">v2ray 是一个模块化的代理工具，支持 VMess，Socks，HTTP，Shadowsocks 等等协议，并且附带很多高级功能，HTTP，TLS 等等。</p>
<p class="blogSummary"><a style="text-align:left; text-decoration:underline; font-weight:bold; color:#006; font-family:'黑体';" href="blogs/blog5.html">阅读全文»</a></p>
</div>
<hr style="width:100%;" />
<div>
<p class="blogTitle"><a style="text-decoration:none;" href="blogs/blog6.html">Spring Cloud：Security OAuth2 自定义异常响应</a></p>
<p class="blogSummary">对于客户端开发或者网站开发而言，调用接口返回有统一的响应体，可以针对性的设计界面，代码结构更加清晰，层次也更加分明。</p>
<p class="blogSummary"><a style="text-align:left; text-decoration:underline; font-weight:bold; color:#006; font-family:'黑体';" href="blogs/blog6.html">阅读全文»</a></p>
<p class="blogSummary"> </p>
<p class="blogSummary"> </p>
</div>
</div>
</div>
<div style="width:100%;">
<div style="float:left;">
</div>
<div style="float:right"><img src="images/backToTop.png" width="50%" onclick="scrollTo('#gotomain',800);" style="cursor:pointer;"/>
</div>
</div>
<div id="footer">
<img src="images/foot.png" width="100%" height="100%"/>
<p id="yewei" style="text-align:center; font-family:'华文新魏';">[ 埋骨何须桑梓地，人生无处不青山 ]</p>
<p style="text-align:center; font-family:'华文新魏';">Made by XiongBaiTao</p>
</div>
<SCRIPT language=javascript>
<!--
var timer1;
var txt=new Array(17);
txt[0]="[ 明日之我，胸中有丘壑，立马振山河。 ]";
txt[1]="[ 能够让你后悔的，从来不是你做过的事，而是你想做却没有去做的事。 ]";
txt[2]="[ 小时候觉得开心就好，现在也是。 ]";
txt[3]="[ 欲买桂花同载酒，终不似，少年游 ]";
txt[4]="[ 聚是一团火，散是满天星 ]";
txt[5]="[ 你来人间一趟，你要看看太阳 ]";
txt[6]="[ 人之所以孤独，是因为要和某个人相遇。 ]";
txt[7]="[ 把酒祝东风，且共从容。 ——欧阳修 ]";
txt[8]="[ 每个人都会死去，但并不是每个人都真正活过。 ]";
txt[9]="[ 人生碌碌，竞短论长，却不道荣枯有数，得失难量 ]";
txt[10]="[ 总之岁月漫长，然而值得等待 ]";
txt[11]="[ 关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。 ]";
txt[12]="[ 所有快乐，无需假装，此生尽兴，赤诚善良 ]";
txt[13]="[ 为你，千千万万遍。 ]";
txt[14]="[ 埋骨何须桑梓地，人生无处不青山 ]";
txt[15]="[ 于浩歌狂热之际寒，于天上看见深渊，于一切眼中看见无所有，于无处希望中得救。 ]";
txt[16]="[ 人生最好的三个词：久别重逢 失而复得 虚惊一场 ]";
timer1 = setInterval("myval()",4000);
function myval()
{
var rnd=Math.floor(Math.random()*17);
window.document.getElementById("yewei").innerHTML=txt[rnd];
}
-->
</SCRIPT>
</body>
</html>
myDaily.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>( •̀ ω •́ )DY.小熊的日记</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="icon" href="images/logo.png" sizes="35*35">
<style>
.target {
width:500px;
height:300px;
overflow:hidden;
position:relative;
margin:0 auto;
}
.target img {
margin:0 auto;
}
#格言 {
font-family: "楷体";
font-size: 18px;
}
</style>
<script>
function login()
{
var n=document.getElementById("inputpwd").value;
if(n!="123")
{
alert("密码错误，请确认后重现输入！");
}
else
{
alert("密码正确！欢迎回来~");
window.location.href="myDairyContent.html";
}
}
</script>
<script src="js/jquery.js"></script>
<script>
function scrollTo(ele, speed){
if(!speed) speed = 800;
if(!ele){
$("html,body").animate({scrollTop:0},speed);
}else{
$("html,body").animate({scrollTop:$(ele).offset().top},speed);
}
return false;
}
</script>
</head>
<body style="margin:0%; text-align:center;">
<!-- /线条随鼠标移动-->
<script>
!function(){
function n(n,e,t){
return n.getAttribute(e)||t
}
function e(n){
return document.getElementsByTagName(n)
}
function t(){
var t=e("script"),o=t.length,i=t[o-1];
return{
l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)
}
}
function o(){
a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
}
function i(){
r.clearRect(0,0,a,c);
var n,e,t,o,m,l;
s.forEach(function(i,x){
for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
}),
x(i)
}
var a,c,u,m=document.createElement("canvas"),
d=t(),l="c_n"+d.l,r=m.getContext("2d"),
x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
function(n){
window.setTimeout(n,1e3/45)
},
w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
window.onmousemove=function(n){
n=n||window.event,y.x=n.clientX,y.y=n.clientY
},
window.onmouseout=function(){
y.x=null,y.y=null
};
for(var s=[],f=0;d.n>f;f++){
var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
}
u=s.concat([y]),
setTimeout(function(){i()},100)
}();
</script>
<!-- /线条随鼠标移动-->
<!-- /失去焦点Title变化 -->
<script>
document.addEventListener('visibilitychange', function()
{
var isHidden = document.hidden;
if (isHidden)
{
document.title = '(oﾟvﾟ)ノ Hi( •̀ ω •́ )AnranWu的主页';
}
else
{
document.title = '( •̀ ω •́ )AnranWu的主页';
}
});
</script>
<!-- /失去焦点Title变化 -->
<!-- /看板娘-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
//jsonpath控制显示那个小萝莉模型，下面这个就是我觉得最可爱的小萝莉模型，替换时后面名字也要替换掉
jsonPath: "https://unpkg.com/[email protected]/assets/koharu.model.json",
"scale": 1
},
"display": {
"position": "left", //看板娘的表现位置
"width": 80, //小萝莉的宽度
"height": 160, //小萝莉的高度
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
</script>
<!-- /看板娘-->
<a id="gotomain"></a>
<div class="other-header" style="background-image:url(images/页首图片/山峰.jpg);">
<p style="color:#365B6B;">我的日记</p>
</div>
<div id="main">
<div id="catalogue">
<ul>
<li class="catalogue-li"><a href="index.html">我的主页</a></li>
<li class="catalogue-li"><a href="myBlogs.html">我的博客</a></li>
<li class="catalogue-li"><a href="myAlbum.html">我的相册</a></li>
<li class="catalogue-li" style="background-color:rgba(237,228,254,0.7); font-family:'方正粗黑宋简体';"><a href="myDairy.html">我的日记</a></li>
<li class="catalogue-li"><a href="myTimetable.html">我的课表</a></li>
</ul>
</div>
<div id="main-show">
<p> </p>
<p> </p>
<p> </p>
<p style="display:inline;">请输入DY日记密码：
<input type="password" id="inputpwd"/>
<button onclick="login();">确定</button>
</p>
<p>标记：密码是123</p>
</div>
</div>
<div style="width:100%;">
<div style="float:left;">
</div>
<div style="float:right"><img src="images/backToTop.png" width="50%" onclick="scrollTo('#gotomain',800);" style="cursor:pointer;"/>
</div>
</div>
<div id="footer">
<img src="images/foot.png" width="100%" height="100%"/>
<p id="yewei" style="text-align:center; font-family:'华文新魏';">[ 埋骨何须桑梓地，人生无处不青山 ]</p>
<p style="text-align:center; font-family:'华文新魏';">Made by XiongBaiTao</p>
</div>
<SCRIPT language=javascript>
<!--
var timer1;
var txt=new Array(17);
txt[0]="[ 明日之我，胸中有丘壑，立马振山河。 ]";
txt[1]="[ 能够让你后悔的，从来不是你做过的事，而是你想做却没有去做的事。 ]";
txt[2]="[ 小时候觉得开心就好，现在也是。 ]";
txt[3]="[ 欲买桂花同载酒，终不似，少年游 ]";
txt[4]="[ 聚是一团火，散是满天星 ]";
txt[5]="[ 你来人间一趟，你要看看太阳 ]";
txt[6]="[ 人之所以孤独，是因为要和某个人相遇。 ]";
txt[7]="[ 把酒祝东风，且共从容。 ——欧阳修 ]";
txt[8]="[ 每个人都会死去，但并不是每个人都真正活过。 ]";
txt[9]="[ 人生碌碌，竞短论长，却不道荣枯有数，得失难量 ]";
txt[10]="[ 总之岁月漫长，然而值得等待 ]";
txt[11]="[ 关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。 ]";
txt[12]="[ 所有快乐，无需假装，此生尽兴，赤诚善良 ]";
txt[13]="[ 为你，千千万万遍。 ]";
txt[14]="[ 埋骨何须桑梓地，人生无处不青山 ]";
txt[15]="[ 于浩歌狂热之际寒，于天上看见深渊，于一切眼中看见无所有，于无处希望中得救。 ]";
txt[16]="[ 人生最好的三个词：久别重逢 失而复得 虚惊一场 ]";
timer1 = setInterval("myval()",4000);
function myval()
{
var rnd=Math.floor(Math.random()*17);
window.document.getElementById("yewei").innerHTML=txt[rnd];
}
-->
</SCRIPT>
</body>
</html>
myDailyContent.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>( •̀ ω •́ )DY.小熊的日记</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="icon" href="images/logo.png" sizes="35*35">
<style>
.target {
width:500px;
height:300px;
overflow:hidden;
position:relative;
margin:0 auto;
}
.target img {
margin:0 auto;
}
#格言 {
font-family: "楷体";
font-size: 18px;
}
</style>
<script src="js/jquery.js"></script>
<script>
function scrollTo(ele, speed){
if(!speed) speed = 800;
if(!ele){
$("html,body").animate({scrollTop:0},speed);
}else{
$("html,body").animate({scrollTop:$(ele).offset().top},speed);
}
return false;
}
</script>
</head>
<body style="margin:0%; text-align:center;">
<!-- /线条随鼠标移动-->
<script>
!function(){
function n(n,e,t){
return n.getAttribute(e)||t
}
function e(n){
return document.getElementsByTagName(n)
}
function t(){
var t=e("script"),o=t.length,i=t[o-1];
return{
l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)
}
}
function o(){
a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
}
function i(){
r.clearRect(0,0,a,c);
var n,e,t,o,m,l;
s.forEach(function(i,x){
for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
}),
x(i)
}
var a,c,u,m=document.createElement("canvas"),
d=t(),l="c_n"+d.l,r=m.getContext("2d"),
x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
function(n){
window.setTimeout(n,1e3/45)
},
w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
window.onmousemove=function(n){
n=n||window.event,y.x=n.clientX,y.y=n.clientY
},
window.onmouseout=function(){
y.x=null,y.y=null
};
for(var s=[],f=0;d.n>f;f++){
var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
}
u=s.concat([y]),
setTimeout(function(){i()},100)
}();
</script>
<!-- /线条随鼠标移动-->
<!-- /失去焦点Title变化 -->
<script>
document.addEventListener('visibilitychange', function()
{
var isHidden = document.hidden;
if (isHidden)
{
document.title = '(oﾟvﾟ)ノ Hi( •̀ ω •́ )AnranWu的主页';
}
else
{
document.title = '( •̀ ω •́ )AnranWu的主页';
}
});
</script>
<!-- /失去焦点Title变化 -->
<!-- /看板娘-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
//jsonpath控制显示那个小萝莉模型，下面这个就是我觉得最可爱的小萝莉模型，替换时后面名字也要替换掉
jsonPath: "https://unpkg.com/[email protected]/assets/koharu.model.json",
"scale": 1
},
"display": {
"position": "left", //看板娘的表现位置
"width": 80, //小萝莉的宽度
"height": 160, //小萝莉的高度
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
</script>
<!-- /看板娘-->
<a id="gotomain"></a>
<div class="other-header" style="background-image:url(images/页首图片/山峰.jpg);">
<p style="color:#365B6B;">我的日记</p>
</div>
<div id="main">
<div id="catalogue">
<ul>
<li class="catalogue-li"><a href="index.html">我的主页</a></li>
<li class="catalogue-li"><a href="myBlogs.html">我的博客</a></li>
<li class="catalogue-li"><a href="myAlbum.html">我的相册</a></li>
<li class="catalogue-li" style="background-color:rgba(237,228,254,0.7); font-family:'方正粗黑宋简体';"><a href="myDairy.html">我的日记</a></li>
<li class="catalogue-li"><a href="myTimetable.html">我的课表</a></li>
</ul>
</div>
<div id="main-show">
<p> </p>
<p class="content">2023年1月5日 星期四 阴</p>
<p class="content">日记这个板块，是我Web大作业做的最后一个板块，这个板块结束，就代表着我整个Web大作业要进入尾声了。虽然还有一些测试、收尾工作，但是的确是，不忍离别，仍要离别。</p>
<p class="content">学了一个学期的Web开发，我从上个学期开始就对做网页特别感兴趣了，因为我觉得这是一件很神奇的事情，那些平时我会使用而不知由来的网站，有一天竟也能从我手里被创造出来。我一开始的想法是特别美好的，用自己的双手，创造最符合我心意的页面，想怎么设计就怎么设计。可是当我开始学习Web之后，我发现真不是那么回事儿，我常常为了两个div倔强地不肯呆在一起而苦恼半天，也常常为了一个页面为什么出不来滚动条抓耳挠腮。</p>
<p class="content">这一次的大作业，其实我是非常期待，抱着特别大的期许的，我很早就开始物色各种各样好看的特效，要把它们都放在我的第一个网站上；我收集了好多好多特效。其中一部分好看的灵感就来自于博客园，我一直觉得博客园是个非常nice的平台，DIY创造自己的博客，别提是件多么美妙的事情了，可是从博客园上扒代码就不是那么愉快的一件事了，一开始我以为我把一层一层理清楚就能看懂了，后来我发现我错了，从开发者工具上扒下来的代码好像是不完整的，因为毕竟它是一个真实运营的网站，如果有东西被隐匿在了后台，那我真的是欲哭无泪。在这个过程中，我为了一个加载动画，死磕了好多好多天，最后终于使皇天不负有心人让我找到了它，并且根据代码摸索出了它的用法，我真的特别高兴，同时我也正式认识到了GitHub这个平台，没错，我苦苦百度而不得的这个加载动画就是GitHub上的一个开源项目，我突然意识到GitHub是个好地方，也意识到百度其实并不是那么万能，甚至在某些时刻搜索能力并不能帮助到我。</p>
<p class="content">虽然扒代码让我白费了很多功夫，但是我觉得这非常值得，一点都不亏，因为在我们软件项目实训的时候需要改一个模板网页，我的队友告诉我她不会改，我感到非常惊讶，那一刻我意识到<span style="font-weight:bold; font-family:'华文新魏';">世界上真的没有白走的路，每一步都是值得。</span>我虽然花了很多时间扒代码、找轮子，却成效甚微，但是在这过程中学习到的一些技巧和知识，都是这路上的收获。</p>
<p class="content">说实话，就算已经做到了最后一个模块，我仍然觉得不够，因为我见过太多美好，都想要一一实现，怎奈期末时间有限，只能戛然而止。我还想要实现的功能有①一个按钮可以切换网页的白天和夜晚模式。②一个垂下来的小猫挂件，点一下会有拉拽了一下小猫的效果，然后滑动回到顶部。③实现一个可以打开可以合上的目录，目录里面有一个头像，头像点击一下就会转动。打开目录的按钮会随网页滑动而滑动位置，即它的位置是相对固定在页面上的。还有很多很多，就不一一列举啦，希望以后有空的时候可以一一实现他们。</p>
<p class="content">到了要说再见的时候啦，再见啦让我又爱又恨的Web开发，再见啦，兢兢业业的何老师，再见啦，这个特殊的学期和我的大三上学年，再见啦，我的青春韶华。</p>
<p class="content"> </p>
<p class="content"> </p>
</div>
</div>
<div style="width:100%;">
<div style="float:left;">
</div>
<div style="float:right"><img src="images/backToTop.png" width="50%" onclick="scrollTo('#gotomain',800);" style="cursor:pointer;"/>
</div>
</div>
<div id="footer">
<img src="images/foot.png" width="100%" height="100%"/>
<p id="yewei" style="text-align:center; font-family:'华文新魏';">[ 埋骨何须桑梓地，人生无处不青山 ]</p>
<p style="text-align:center; font-family:'华文新魏';">Made by XiongBaiTao</p>
</div>
<SCRIPT language=javascript>
<!--
var timer1;
var txt=new Array(17);
txt[0]="[ 明日之我，胸中有丘壑，立马振山河。 ]";
txt[1]="[ 能够让你后悔的，从来不是你做过的事，而是你想做却没有去做的事。 ]";
txt[2]="[ 小时候觉得开心就好，现在也是。 ]";
txt[3]="[ 欲买桂花同载酒，终不似，少年游 ]";
txt[4]="[ 聚是一团火，散是满天星 ]";
txt[5]="[ 你来人间一趟，你要看看太阳 ]";
txt[6]="[ 人之所以孤独，是因为要和某个人相遇。 ]";
txt[7]="[ 把酒祝东风，且共从容。 ——欧阳修 ]";
txt[8]="[ 每个人都会死去，但并不是每个人都真正活过。 ]";
txt[9]="[ 人生碌碌，竞短论长，却不道荣枯有数，得失难量 ]";
txt[10]="[ 总之岁月漫长，然而值得等待 ]";
txt[11]="[ 关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。 ]";
txt[12]="[ 所有快乐，无需假装，此生尽兴，赤诚善良 ]";
txt[13]="[ 为你，千千万万遍。 ]";
txt[14]="[ 埋骨何须桑梓地，人生无处不青山 ]";
txt[15]="[ 于浩歌狂热之际寒，于天上看见深渊，于一切眼中看见无所有，于无处希望中得救。 ]";
txt[16]="[ 人生最好的三个词：久别重逢 失而复得 虚惊一场 ]";
timer1 = setInterval("myval()",4000);
function myval()
{
var rnd=Math.floor(Math.random()*17);
window.document.getElementById("yewei").innerHTML=txt[rnd];
}
-->
</SCRIPT>
</body>
</html>
myTimaTable.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>( •̀ ω •́ )DY.小熊的课表</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="icon" href="images/logo.png" sizes="35*35">
<style>
.target {
width:500px;
height:300px;
overflow:hidden;
position:relative;
margin:0 auto;
}
.target img {
margin:0 auto;
}
#格言 {
font-family: "楷体";
font-size: 18px;
}
</style>
<script src="js/jquery.js"></script>
<script>
function scrollTo(ele, speed){
if(!speed) speed = 800;
if(!ele){
$("html,body").animate({scrollTop:0},speed);
}else{
$("html,body").animate({scrollTop:$(ele).offset().top},speed);
}
return false;
}
</script>
</head>
<body style="margin:0%; text-align:center;">
<!-- /线条随鼠标移动-->
<script>
!function(){
function n(n,e,t){
return n.getAttribute(e)||t
}
function e(n){
return document.getElementsByTagName(n)
}
function t(){
var t=e("script"),o=t.length,i=t[o-1];
return{
l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)
}
}
function o(){
a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
}
function i(){
r.clearRect(0,0,a,c);
var n,e,t,o,m,l;
s.forEach(function(i,x){
for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
}),
x(i)
}
var a,c,u,m=document.createElement("canvas"),
d=t(),l="c_n"+d.l,r=m.getContext("2d"),
x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
function(n){
window.setTimeout(n,1e3/45)
},
w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
window.onmousemove=function(n){
n=n||window.event,y.x=n.clientX,y.y=n.clientY
},
window.onmouseout=function(){
y.x=null,y.y=null
};
for(var s=[],f=0;d.n>f;f++){
var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
}
u=s.concat([y]),
setTimeout(function(){i()},100)
}();
</script>
<!-- /线条随鼠标移动-->
<!-- /失去焦点Title变化 -->
<script>
document.addEventListener('visibilitychange', function()
{
var isHidden = document.hidden;
if (isHidden)
{
document.title = '(oﾟvﾟ)ノ Hi( •̀ ω •́ )AnranWu的主页';
}
else
{
document.title = '( •̀ ω •́ )AnranWu的主页';
}
});
</script>
<!-- /失去焦点Title变化 -->
<!-- /看板娘-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
//jsonpath控制显示那个小萝莉模型，下面这个就是我觉得最可爱的小萝莉模型，替换时后面名字也要替换掉
jsonPath: "https://unpkg.com/[email protected]/assets/koharu.model.json",
"scale": 1
},
"display": {
"position": "left", //看板娘的表现位置
"width": 80, //小萝莉的宽度
"height": 160, //小萝莉的高度
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
</script>
<!-- /看板娘-->
<a id="gotomain"></a>
<div class="other-header" style="background-image:url(images/页首图片/叶子.jpg);">
<p>我的课表</p>
</div>
<div id="main">
<div id="catalogue">
<ul>
<li class="catalogue-li"><a href="index.html">我的主页</a></li>
<li class="catalogue-li"><a href="myBlogs.html">我的博客</a></li>
<li class="catalogue-li"><a href="myAlbum.html">我的相册</a></li>
<li class="catalogue-li"><a href="myDairy.html">我的日记</a></li>
<li class="catalogue-li" style="background-color:rgba(237,228,254,0.7); font-family:'方正粗黑宋简体';"><a href="myTimetable.html">我的课表</a></li>
</ul>
</div>
<div id="main-show">
<table width="80%" border="1" background="images/猫咪咪.jpg" style="background-repeat:no-repeat;">
<caption id="geyan">
<br />
<br />
“他们试图埋了你，但你要知道，你是种子。”<br />
<br />
</caption>
<tr>
<th height="80" scope="col"><div align="center"></div></th>
<th height="80" scope="col"><div align="center" class="表格抬头">节次</div></th>
<th height="80" scope="col"><div align="center" class="表格抬头">星期一</div></th>
<th height="80" scope="col"><div align="center" class="表格抬头">星期二</div></th>
<th height="80" scope="col"><div align="center" class="表格抬头">星期三</div></th>
<th height="80" scope="col"><div align="center" class="表格抬头">星期四</div></th>
<th height="80" scope="col"><div align="center" class="表格抬头">星期五</div></th>
<th height="80" scope="col"><div align="center" class="表格抬头">星期六</div></th>
<th height="80" scope="col"><div align="center" class="表格抬头">星期日</div></th>
</tr>
<tr>
<td width="9%" rowspan="5" class="表格抬头"><div align="center">上午</div></td>
<td width="7%" height="0" class="表格抬头"><div align="center">1</div></td>
<td><div align="center"></div></td>
<td width="12%" rowspan="3" class="课表内容"><div align="center">应用文口语交际</div>
<div align="center"></div> <div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%" rowspan="4" class="课表内容"><div align="center">计算机网络</div>
<div align="center"></div> <div align="center"></div> <div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
</tr>
<tr>
<td width="7%" height="0" class="表格抬头"><div align="center">2</div></td>
<td><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
</tr>
<tr>
<td width="7%" height="0" class="表格抬头"><div align="center">3</div></td>
<td><div align="center"></div></td>
<td width="12%" rowspan="3" class="课表内容"><div align="center">操作系统</div>
<div align="center"></div> <div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
</tr>
<tr>
<td width="7%" height="0" class="表格抬头"><div align="center">4</div></td>
<td rowspan="2"><div align="center" class="课表内容">python开发应用</div>
<div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
</tr>
<tr>
<td width="7%" height="0" class="表格抬头"><div align="center">5</div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
</tr>
<tr>
<td width="9%" rowspan="4" class="表格抬头"><div align="center">下午</div></td>
<td width="7%" height="0" class="表格抬头"><div align="center">6</div></td>
<td rowspan="2" class="课表内容"><div align="center">操作系统</div> <div align="center"></div></td>
<td width="12%" rowspan="2" class="课表内容"><div align="center">Web开发技术</div> <div align="center"></div></td>
<td width="12%" rowspan="2" class="课表内容"><div align="center">编程语言</div> <div align="center"></div></td>
<td width="12%" rowspan="3" class="课表内容"><div align="center">计算机网络</div>
<div align="center"></div> <div align="center"></div></td>
<td width="12%" rowspan="4" class="课表内容"><div align="center">数据库原理及应用</div>
<div align="center"></div> <div align="center"></div> <div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
</tr>
<tr>
<td width="7%" height="0" class="表格抬头"><div align="center">7</div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
</tr>
<tr>
<td width="7%" height="0" class="表格抬头"><div align="center">8</div></td>
<td><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
</tr>
<tr>
<td width="7%" height="0" class="表格抬头"><div align="center">9</div></td>
<td><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
</tr>
<tr>
<td width="9%" rowspan="5" class="表格抬头"><div align="center">晚上</div>
<div align="center"></div> <div align="center"></div> <div align="center"></div></td>
<td width="7%" height="0" class="表格抬头"><div align="center">10</div></td>
<td><div align="center"></div></td>
<td width="12%" rowspan="3" class="课表内容"><div align="center">python课程设计</div>
<div align="center"></div> <div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
</tr>
<tr>
<td width="7%" height="0" class="表格抬头"><div align="center">11</div></td>
<td><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
</tr>
<tr>
<td width="7%" height="0" class="表格抬头"><div align="center">12</div></td>
<td><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
</tr>
<tr>
<td width="7%" height="0" class="表格抬头"><div align="center">13</div></td>
<td><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
<td width="12%"><div align="center"></div></td>
</tr>
</table>
<table width="100%" height="98" border="0">
<tr>
<th scope="col"> </th>
</tr>
</table>
</div>
</div>
<div style="width:100%;">
<div style="float:left;">
</div>
<div style="float:right"><img src="images/backToTop.png" width="50%" onclick="scrollTo('#gotomain',800);" style="cursor:pointer;"/>
</div>
</div>
<div id="footer">
<img src="images/foot.png" width="100%" height="100%"/>
<p id="yewei" style="text-align:center; font-family:'华文新魏';">[ 埋骨何须桑梓地，人生无处不青山 ]</p>
<p style="text-align:center; font-family:'华文新魏';">Made by XiongBaiTao</p>
</div>
<SCRIPT language=javascript>
<!--
var timer1;
var txt=new Array(17);
txt[0]="[ 明日之我，胸中有丘壑，立马振山河。 ]";
txt[1]="[ 能够让你后悔的，从来不是你做过的事，而是你想做却没有去做的事。 ]";
txt[2]="[ 小时候觉得开心就好，现在也是。 ]";
txt[3]="[ 欲买桂花同载酒，终不似，少年游 ]";
txt[4]="[ 聚是一团火，散是满天星 ]";
txt[5]="[ 你来人间一趟，你要看看太阳 ]";
txt[6]="[ 人之所以孤独，是因为要和某个人相遇。 ]";
txt[7]="[ 把酒祝东风，且共从容。 ——欧阳修 ]";
txt[8]="[ 每个人都会死去，但并不是每个人都真正活过。 ]";
txt[9]="[ 人生碌碌，竞短论长，却不道荣枯有数，得失难量 ]";
txt[10]="[ 总之岁月漫长，然而值得等待 ]";
txt[11]="[ 关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。 ]";
txt[12]="[ 所有快乐，无需假装，此生尽兴，赤诚善良 ]";
txt[13]="[ 为你，千千万万遍。 ]";
txt[14]="[ 埋骨何须桑梓地，人生无处不青山 ]";
txt[15]="[ 于浩歌狂热之际寒，于天上看见深渊，于一切眼中看见无所有，于无处希望中得救。 ]";
txt[16]="[ 人生最好的三个词：久别重逢 失而复得 虚惊一场 ]";
timer1 = setInterval("myval()",4000);
function myval()
{
var rnd=Math.floor(Math.random()*17);
window.document.getElementById("yewei").innerHTML=txt[rnd];
}
-->
</SCRIPT>
</body>
</html>
项目结构截图：
部分运行截图：
