JavaScript:时间对象，实例演示右下角广告图

一.时间对象实例

方法	含义
new Date()	获取时间
getDate()	获取日数
getMonth()	获取月份
getFullYear()	获取年份
getHours()	获取小时
getMinutes()	获取分钟数
getSeconds()	获取秒数
getDay()	获取星期几

代码块

<!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>获取年月日</title>
    <style>
      :root {
        height: 2000px;
      }
      .box {
        background-color: lightblue;
        height: 40px;
        width: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #666;
        position: fixed;
        right: 0;
        bottom: 80px;
      }
      .box > nav {
        margin-right: 1em;
      }
      .box > button {
        position: absolute;
        right: 0;
        top: 0;
      }
      .box > div {
        position: fixed;
        top: auto;
        bottom: 0;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <nav></nav>
      <span></span>
      <button>x</button>
      <div>
        <a href=""
          ><img
            src="http://imga3.5054399.com/upload_pic/2021/4/21/4399_09142332383.jpg"
            alt=""
        /></a>
      </div>
    </div>
    <script>
      //get 是获取 set 是设置
      let d = new Date();
      //   getDate 获取日数
      let myDay = d.getDate();
      //getMonth 获取月份
      let myMonth = d.getMonth() + 1;
      //getFullYear 获取年份
      let myYear = d.getFullYear();
      //getHours 获取小时
      let myHours = d.getHours();
      //getMinutes 获取分钟数
      let myMinutes = d.getMinutes();
      //getSeconds 获取秒数
      let mySeconds = d.getSeconds();
      //getDay 获取星期几
      let myGetday = d.getDay();
      let week = [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日",
      ];
      // 获取.box 内的nav 元素
      document
        .querySelector(".box > nav")
        .append(myYear + "年" + myMonth + "月" + myDay + "日");
      // 获取.box 内的span 元素
      document.querySelector(".box > span").append(week[myGetday]);
      //按钮添加功能 remove 移除掉 box盒子 等于关闭掉这个提示
      let box = document.querySelector(".box");
      let btn = document.querySelector(".box > button");
      btn.addEventListener("click", (ev) => {
        ev.target = box.remove();
      });
      //判断当前时间点，输出 早上好 晚上好 下午好
      if (myHours < 12) {
        document.body.append("早上好");
      } else if (myHours >= 12 && myHours < 18) {
        document.body.append("下午好");
      } else {
        document.body.append("晚上好");
      }
    </script>
  </body>
</html>

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

JavaScript:时间对象，实例演示右下角广告图

2021-04-23 00:09:02