当前位置：首页 > news >正文

【web前端开发】前端生日礼物--主页面篇

news 来源：原创 2024/5/9 14:52:43

文章目录

设置自适应背景图片
- 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:10
  var 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 = 0
      var minute = 0
      var second = 0
      var beapart_time = time_info_2 - time_info_1
      var beapart_day_last = 0
      if(timestamp_end_time/1000 -timestamp_start_time/1000 <=86400){
          var tim = timestamp_end_time/1000 -timestamp_start_time/1000
          hour = parseInt(tim / 3600)
          minute = parseInt((tim - hour * 60 * 60) / 60)
          second = tim - hour * 60 * 60 - minute * 60
          return [0, 0, 0 , hour, minute, second];
      }
      if (beapart_time < 0) {
          beapart_day = beapart_day- 1
          beapart_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 * 60
          beapart_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.加上返回登录提示

ok
在这里插入图片描述

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;
}
/* */