文章目录

设置自适应背景图片
- 1.选定背景
- - 1.图片不明原因不显示
  - 2.直接全抄register文件，再做修改。
  - 使用B站视频方法：过于放大
  - 3.使用图片编辑器调整图片宽高比
  - 4. 去B站视频内截图，再改尺寸 √
设置时间显示
- 1.把大佬的时间功能扣下来
- 2.学习获取当前时间，自己做减法
- - 1.做当前时间监听
- 3.改为时间差
- - 1. 写入home.php中，实现js和css交互
  - 2.调整样式
  - 3.改为动态的时间差
- 加以修饰
- - 1.给自己配置了一个返回登录页面的图标
  - 2.实现一个个字打印的效果
  - 3.加上返回登录提示
  - 4.右上角的导航栏
  - - ！实现鼠标选中时盒子变色，不选中时为背景色！
- 彻底布局完成
加入音乐播放器
其他
暂时成功样品

设置自适应背景图片

1.选定背景

想要高清一点的图片，结果。。。

还是好好调节宽高吧。。

1.图片不明原因不显示

2.直接全抄register文件，再做修改。

最尽力，只改成了这样：

使用B站视频方法：过于放大

https://www.bilibili.com/video/BV1ci4y1Q7zQ/?spm_id_from=333.1007.top_right_bar_window_custom_collection.content.click&vd_source=6954056a8db135714ab7367467252a52

.content1{width:1800px;height:800px;overflow:hidden;top:0;z-index:0;background-repeat: no-repeat;background: url(images/home/1.jpg);
}

3.使用图片编辑器调整图片宽高比

图片放大后模糊 —使用此图片失败

4. 去B站视频内截图，再改尺寸 √

成功

设置时间显示

1.把大佬的时间功能扣下来

大佬写的太复杂了，看了一万年没看懂。。。

2.学习获取当前时间，自己做减法

1.做当前时间监听

由两篇CSND文章，融合改编：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>var date = new Date();var dateYear = date.getFullYear();             //获取年 var dateMonth = date.getMonth();               //获取月  var dateDate = date.getDate();                 //获取当日var dateDay = date.getDay();                   //获取当日星期数var dateHours = date.getHours();               //获取小时var dateMinutes = date.getMinutes();           //获取分钟var dateSeconds = date.getSeconds();           //获取秒var dateMilliseconds = date.getMilliseconds(); //获取毫秒// document.write('<h1>你好，侠课岛！</h1>');// document.write('<p>恭喜你，登录成功。</p>');// document.write('<div>侠课岛是优秀的互联网工作技能在线学习网站，专注于制作大量精品短视频和图文实战教程。</div>');document.write('今天是'+date+ "<br>");document.write('今天是'+dateYear+'年'+ "<br>");
</script>
</body></html>
<!-- + "<br>" -->

输出成功：

3.改为时间差

发现这涉及较难的后端计算，所以就又去借鉴了哈哈

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body>
<!-- script计算两个时间相差 -->
<script>//时间格式  2001-10-01 05:12:10    2021-10-01 05:12:10var time = time_jisuan('2001-09-01 03:10:10', '2021-10-31 05:12:11');console.log('===================')console.log(time)document.write(time[0]+' year');document.write("<br>" );document.write(time[1]+' month');document.write("<br>" );document.write(time[2]+' date');document.write("<br>" );document.write(time[3]+' minute');document.write("<br>" );document.write(time[4]+' second');//相差1年,2个月,3日function time_jisuan(start_time, end_time) {var common_year = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]var leap_year = [0, 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]//验证时间格式var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/;var regExp = new RegExp(reg);if (!regExp.test(end_time) || !regExp.test(start_time) ) {return false;}//判断前后时间大小var timestamp_start_time = Date.parse(new Date(start_time));var timestamp_end_time = Date.parse(new Date(end_time));if (timestamp_end_time / 1000 - timestamp_start_time / 1000 < 0) {return false;}//获取前四位var time_info_start = start_time.split(' ');var time_info_end = end_time.split(' ');//获取年月日var year_month_day_start = time_info_start[0].split('-')var year_month_day_end = time_info_end[0].split('-')//获取时间var hour_minute_second_start = time_info_start[1].split(':')var hour_minute_second_end = time_info_end[1].split(':')var beapart_year = parseInt(year_month_day_end[0]) - parseInt(year_month_day_start[0])//进行判断时间var time_info_1 = parseInt(hour_minute_second_start[2]) + parseInt(hour_minute_second_start[1])*60 + parseInt(hour_minute_second_start[0])*3600;var time_info_2 = parseInt(hour_minute_second_end[2]) + parseInt(hour_minute_second_end[1])*60 + parseInt(hour_minute_second_end[0])*3600;var hour = 0var minute = 0var second = 0var beapart_time = time_info_2 - time_info_1var beapart_day_last = 0if(timestamp_end_time/1000 -timestamp_start_time/1000 <=86400){var tim = timestamp_end_time/1000 -timestamp_start_time/1000hour = parseInt(tim / 3600)minute = parseInt((tim - hour * 60 * 60) / 60)second = tim - hour * 60 * 60 - minute * 60return [0, 0, 0 , hour, minute, second];}if (beapart_time < 0) {beapart_day = beapart_day- 1beapart_time = time_info_2 + 86400 - time_info_1;hour = parseInt(beapart_time / 3600)minute = parseInt((beapart_time - hour * 60 * 60) / 60)second = beapart_time - hour * 60 * 60 - minute * 60beapart_day_last = 1} else {hour = parseInt(beapart_time / 3600)minute = parseInt((beapart_time - hour * 60 * 60) / 60)second = beapart_time - hour * 60 * 60 - minute * 60}//同一年if (beapart_year === 0) {var beapart_day = parseInt(year_month_day_end[2]) - parseInt(year_month_day_start[2]);var beapart_month = parseInt(year_month_day_end[1]) - parseInt(year_month_day_start[1]);if (beapart_day > 0) {return [0, beapart_month, beapart_day  - beapart_day_last, hour, minute, second];} else {if (parseInt(year_month_day_end[0]) % 4 === 0) {beapart_day = leap_year[year_month_day_end[1]] - parseInt(year_month_day_start[2]) + parseInt(year_month_day_end[2])} else {beapart_day = common_year[year_month_day_end[1]] - parseInt(year_month_day_start[2]) + parseInt(year_month_day_end[2])}if (time_info_2 - time_info_1 < 0) {beapart_day -= 1}return [0, beapart_month - 1, beapart_day  - beapart_day_last, hour, minute, second];}//非同一年} else {//判断如果相差一年var beapart_day = parseInt(year_month_day_end[2]) - parseInt(year_month_day_start[2]);var beapart_month = parseInt(year_month_day_end[1]) - parseInt(year_month_day_start[1]);var beapart_year = parseInt(year_month_day_end[0]) - parseInt(year_month_day_start[0]);if (beapart_month < 0) {beapart_year = beapart_year - 1;beapart_month = 12 - parseInt(year_month_day_end[1]) + parseInt(year_month_day_start[1])}if (beapart_day > 0) {return [beapart_year, beapart_month, beapart_day  - beapart_day_last, hour, minute, second];}else {if (parseInt(year_month_day_end[0]) % 4 === 0) {beapart_day = leap_year[year_month_day_end[1]] - parseInt(year_month_day_start[2]) + parseInt(year_month_day_end[2])} else {beapart_day = common_year[year_month_day_end[1]] - parseInt(year_month_day_start[2]) + parseInt(year_month_day_end[2])} return [beapart_year, beapart_month - 1, beapart_day  - beapart_day_last, hour, minute, second];}}}
</script>
</body>
</html>
<!-- + "<br>" -->

输出成功：

2001-10-01 05:12:10 和 2021-10-01 05:12:10

1. 写入home.php中，实现js和css交互

看了无数篇文章，最后在自己register中用过的代码中找到灵感：

利用标签的id属性

document.getElementById(‘test’).innerHTML = time; //将JS数据，写入标签的id，这一功能

写入home.php中成功

2.调整样式

加入总体样式后，不明原因样式错乱

把本代码一点点移动到date/1.php和1.css中，再复制过来，加以改动：成功！！！

3.改为动态的时间差

不可以把所有参数改为变量。。。

看了一些文章，打算自己拼凑一个动态时间格式，成功

套入这个函数体中，发现这个算法本身自己有误，不能算这种卡一年内的时间差。。。。。。。

不套动态时间格式，也err：

自己改算法试试…
累了，而且发现自己偏离”“生日”这一主题了。。

刘总也不知道自己几点出生的，那就算了~~

加以修饰

浏览器老是不自动保存，自己去设置了一下。。（也就看了5/6篇文章。。）
打起精神来！！！

1.给自己配置了一个返回登录页面的图标

2.实现一个个字打印的效果

查询文章…

救命~~~

找到适合的源码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><p></p><script>var pp = document.querySelector("p");var str = "这里是想要显示的文字，这里是想要显示的文字这里是想要显示的文字这里是想要显示的文字这里是想要显示的文字"n = 0;var timer;timer = setInterval(function () {if (n < str.length) {pp.innerHTML += str.charAt(n);//sunstring(0,n)n++} else {clearInterval(timer);}}, 100)</script>
</body></html>

改入home.php中：
发现不行，改不动css

回去printTime/1.html中，改这个代码：

发现这个代码实现原理是盒子套盒子，改外层盒子的css，成功！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.test{margin-top:100px;margin-left:100px;}</style>
</head>
<body><div id="showStr" class="test"></div> <div style="display:none" id="string">宝贝，我好想好想你</div><script>var index = 0;var str = document.getElementById("string").innerHTML;var time;time = setInterval(function type() {if(index == str.length) {clearInterval(time);}document.getElementById("showStr").innerText = str.substring(0, index++);}, 200); //通过定时器来让文字逐步显示</script>
</body>
</html>
<!-- innerHTML -->

再次改入home.php中：

what!
小问题，原来是绝对位置没有设置。。

3.加上返回登录提示

4.右上角的导航栏

不选中时背景透明：

使用opacity

opacity属性参数的不透明度是以数字表示的，从0.0到1.0，完全透明是0.0

连字一起没了

display=‘none’ 效果同上
改代码后，有效果

//当鼠标离开时变为原来背景色var tbe1 = document.getElementById("btn1");var oldColor="";/*alert(tbe1.tBodies[0].rows[1].cells[2].innerHTML)*/ tbe1.onmouseover=function(){oldColor = this.style.background;this.style.background="yellow"}tbe1.onmouseout=function(){this.style.background=oldColor;}在这里插入代码片

想到一个好办法：双层盒子嵌套！！！

直接< button >套< div >失败，一起根据< button >的class属性消失了
改为：不嵌套，用js把div由id写入 < button >id属性中
写入成功，但是使用透明色后还是失败了。

var str = document.getElementById("nav1").innerHTML;
document.getElementById("btn1").innerText = str;

3.改为两个没有逻辑上没有关联的盒子，上下叠加。 Ok

小bug：鼠标在home上时，被选中，底层a盒子无法出效果

给div加了user-select: none; 使用文字不能复制，好一点，但还是会无法出现上面效果

！实现鼠标选中时盒子变色，不选中时为背景色！

核心:双层嵌套+上下嵌套（能够说的这么高级，是因为我不知道怎么形容这一招了）

css代码

/* 按钮类 */
.btn1{position:absolute;margin-left:1000px;margin-top:40px;width: 90px;height: 50px;border: 0;cursor: pointer;}.btn1 div{position:absolute;margin-left:20px;margin-top:10px;font-size: 14pt;font-family:"微软雅黑";color: #85E6F8;/* cursor: default; */user-select: none;
}.nav1{position:absolute;margin-left:1020px;margin-top:50px;font-size: 14pt;font-family:"微软雅黑";color: #85E6F8;/* cursor: default; */user-select: none;
}

html代码：

<div class="nav1">Home</div><a class="btn1" id="btn1"><div>Home</div></a>

js代码：

//当鼠标离开时变为原来背景色var tbe1 = document.getElementById("btn1");// var oldColor="";/*alert(tbe1.tBodies[0].rows[1].cells[2].innerHTML)*/ tbe1.onmouseover=function(){oldColor = this.style.background;this.style.opacity = 1;this.style.background="#FA5C66";}tbe1.onmouseout=function(){// this.style.background=oldColor;this.style.opacity = 0;}

彻底布局完成

加入音乐播放器

播放so歌曲

代码来源：

    <audio src="1.mp4" width="300px" height="300px" controls></video>

搞定了

其他

display属性详解

https://blog.csdn.net/weixin_47021982/article/details/110205540?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166401763716782395311529%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=166401763716782395311529&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_alltop_positive~default-1-110205540-null-null.142^v50control,201^v3add_ask&utm_term=display&spm=1018.2226.3001.4187

网页背景图，原图不能过小，放大必失真
不要去下载B站视频封面，都是一律的小尺寸！
大佬的css布局

4.【JS】let

var定义的变量，可以预解析提前调用的结果是undefined，let定义的变量不能预解析，提前调用的结果是报错。
var定义的变量，变量名称可以重复，效果是重复赋值，let定义的变量不能重复，否则执行报错。
var定义的变量作用域是全局/局部作用域。let定义的变量如果在{}中只能在{}中调用。
在循环语句中var定义的循环变量和使用let定义的循环变量。执行原理和执行效果不同。

vscode选中多项way：alt+鼠标右键
【JS】变量在网页上的输出

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><script>//定义变量var num = 1;var num2 = 1.2;var num3 = NaN;var str = "abc";var flag = true;var obj = null;var obj2 = undefined;a// 输出到页面上document.write(num + "<br>");document.write(num2 + "<br>");document.write(num3 + "<br>");document.write(str + "<br>");document.write(flag + "<br>");document.write(obj + "<br>");document.write(obj2 + "<br>");</script>
</head>
<body></body>
</html>

【JS】try: 语句测试代码块的错误，一般把可能会出错的代码放到这里
【JS】console.log()：在控制台显示
【JS】setAttribute() 方法添加指定的属性，并为其赋指定的值
【JS】JS和CSS的交互

【csdn文章】https://blog.csdn.net/m0_64043477/article/details/123281279?ops_request_misc=&request_id=&biz_id=102&utm_term=css%E5%92%8CJavaScript%E4%BA%A4%E4%BA%92&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-1-123281279.142^v50control,201^v3add_ask&spm=1018.2226.3001.4187

【JS】< script >写< body >外面和里面效果一致
【PHP】PHP没有自己的控制台输出函数,真的很需要只能自己为PHP写一个：

详见文章：
https://blog.csdn.net/flyfreelyit/article/details/50737611?ops_request_misc=&request_id=&biz_id=102&utm_term=php%E6%8E%A7%E5%88%B6%E5%8F%B0%E6%95%B0%E6%8D%AE%E8%BE%93%E5%87%BA&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-0-50737611.142^v50control,201^v3add_ask&spm=1018.2226.3001.4187

需要一个微信消息提醒工具，vs固定栏工具
＜textarea＞标签（文本域）,效果如下：

可以拉动右下角改变长宽

【JS】setInterval开启定时器

//开启定时
var timer = setInterval(function(){},30)

clearInterval()：用于停止 setInterval() 方法执行的函数代码

【JS】charAt() 方法返回指定索引处的char值
【JS】querySelector：获取文档中id="container"的元素
【JS】innerHTML在JS是双向功能：获取对象的内容或向对象插入内容；
【JS】substring(a,b)的作用就是截取父字符串的某一部分
第一个参数int为开始的索引，对应String数字中的开始位置，
第二个参数是截止的索引位置，对应String中的结束位置

暂时成功样品

home.php

@font-face {font-family: "iconfont"; /* Project id  */src: url('iconfont.ttf?t=1664238276031') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 38px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-yinle:before {content: "\f0064";}.icon-fanhui:before {position: absolute;top:2px;content: "\e8a4";
}

home.css

*{margin:0;padding:0;box-sizing:border-box;/* font-family:'Poppins',sans-serif; */}
body{/* position:relative; *//* 唯一影响content的属性 */min-height:100vh;justify-content: center;align-items: center;
}
.content{position: absolute;/* bottom: -6px; */width:100%;height:100%;background: url(images/home/3.jpg);background-repeat: no-repeat;background-position: center 0;/* margin:auto; */}
.text{/* 以body为父类 */position: absolute;top: 150px;left:30px;font-family:Segoe Script;color:#ffffff;font-size:45px;}
.back{/* iconfont尺寸--font-size: 36px; */position: absolute;color:#56638B;font-family:华文新魏;font-size:25px;margin-left:36px;margin-top: 15px;;
}
/*
#test{color: #000000;font-size: 20pt;font-family: segoe Script;margin-left: 5%;margin-top: 600px;
}   */.print{position:absolute;margin-top:250px;margin-left:100px;font-family:华文新魏;font-size:25px;color:#ffffff;
}/* 按钮类 *//* CLOCK按钮 */
.btn1{position:absolute;margin-left:1000px;margin-top:40px;width: 90px;height: 50px;border: 0;cursor: pointer;border-radius:15px;}.btn1 div{position:relative;margin-left:15px;margin-top:13px;font-size: 12pt;font-family:Segoe Script;color:#ffffff;/* cursor: default; */user-select: none;
}.nav1{position:absolute;margin-left:1015px;margin-top:53px;font-size: 12pt;font-family:Segoe Script;color:#ffffff;/* cursor: default; */user-select: none;
}/* music */
.player{position: absolute;width: 200px;background: #f1f3f4;box-shadow: 0 50px 80px rgba(0, 0, 0, 0.25);margin-left: 1319px;margin-top: 460px;
}
.player .imgBx{position: relative;width: 100%;height: 200px;
}
.player .imgBx img{position: absolute;top: 0;left:0;width: 100%;height: 100%;object-fit: cover;
}
.player audio{width:100%;outline:none;/* background-color: #1A6E8B; */border: 1px solid #1A6E8B;
}
/* */

【web项目】前端生日礼物--主页面篇相关推荐

【web项目】前端生日礼物--注册页面篇
文章目录总计划注册界面页面背景设置注意字体选择不明原因:在父相子绝下字体不对齐父类登录浮窗制作透明盒子给盒子设定圆角值把透明盒子搬到register页面中文本输入框样式设置 1. ...
PHP项目部署在tomcat,在Tomcat中部署Web项目的操作方法(必看篇)
在这里介绍在Tomcat中部署web项目的三种方式: 1.部署解包的webapp目录 2.打包的war文件 3.Manager Web应用程序一:部署解包的webapp目录将Web项目部署到Tom ...
JAVA WEB实现图书管理系统 —— 主页面
本文章要实现的功能如下: 1.首页未登录状态: 2.首页已登录状态: (这篇文章先不涉及下方图书信息的显示,该部分内容将在后续文章进行) 3.修改密码功能 4.注销用户功能一.编写主界面 <% ...
如何在web项目中访问HTML页面
为什么同样在web工程webContent目录下建了一个html页面,http://localhost:8080/springmvcDemo/index.html访问却报404? 为什么在web工程w ...
企业WEB项目实现商品详情页面展示功能
概述在开发电商项目时,我们需要实现一个最基本的功能:点击商品的图片,打开商品详情页面.其中,商品页面分为三大部分: a) 商品基本信息 b) 延迟加载商品详情.延迟一秒加载使用ajax c) 商品的 ...
web项目 Eclipse 中 jsp 页面没有代码提示
解决方法: 在项目名字上点击右键选择Properties->Java Build Path->Libraries->Add Library->Server Runtime-& ...
Eclipse中新建WEB项目，JSP页面报错。
在Eclipse中新建java web项目,在JSP页面的第一行提示这个错误: [The superclass "javax.servlet.http.HttpServlet" w ...
做一个完整的Java Web项目太难了，因为这些你不会！
作者:元素侠Jason 链接:https://blog.csdn.net/JasonLiuLJX 最近自己做了几个Java Web项目,有公司的商业项目,也有个人做着玩的小项目,写篇文章记录总结一下收 ...
做一个完整的Java Web项目需要掌握的技能
转自: https://blog.csdn.net/JasonLiuLJX/article/details/51494048 ------------------------------------ ...

【web项目】前端生日礼物--主页面篇