Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JavaScript:时间对象，实例演示右下角广告图
Blogger Information
Blog 70
fans 4
comment 5
visits 104888
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JavaScript:时间对象，实例演示右下角广告图
JiaJieChen
Original
947 people have browsed it

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

一.时间对象实例

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

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.0" />
  7.     <title>获取年月日</title>
  8.     <style>
  9.       :root {
  10.         height: 2000px;
  11.       }
  12.       .box {
  13.         background-color: lightblue;
  14.         height: 40px;
  15.         width: 250px;
  16.         display: flex;
  17.         justify-content: center;
  18.         align-items: center;
  19.         color: #666;
  20.         position: fixed;
  22.         right: 0;
  23.         bottom: 80px;
  24.       }
  25.       .box > nav {
  26.         margin-right: 1em;
  27.       }
  28.       .box > button {
  29.         position: absolute;
  30.         right: 0;
  31.         top: 0;
  32.       }
  33.       .box > div {
  34.         position: fixed;
  35.         top: auto;
  36.         bottom: 0;
  37.       }
  38.     </style>
  39.   </head>
  40.   <body>
  41.     <div class="box">
  42.       <nav></nav>
  43.       <span></span>
  44.       <button>x</button>
  45.       <div>
  46.         <a href=""
  47.           ><img
  48.             src="http://imga3.5054399.com/upload_pic/2021/4/21/4399_09142332383.jpg"
  49.             alt=""
  50.         /></a>
  51.       </div>
  52.     </div>
  54.     <script>
  55.       //get 是获取 set 是设置
  56.       let d = new Date();
  57.       //   getDate 获取日数
  58.       let myDay = d.getDate();
  59.       //getMonth 获取月份
  60.       let myMonth = d.getMonth() + 1;
  61.       //getFullYear 获取年份
  62.       let myYear = d.getFullYear();
  63.       //getHours 获取小时
  64.       let myHours = d.getHours();
  65.       //getMinutes 获取分钟数
  66.       let myMinutes = d.getMinutes();
  67.       //getSeconds 获取秒数
  68.       let mySeconds = d.getSeconds();
  69.       //getDay 获取星期几
  70.       let myGetday = d.getDay();
  72.       let week = [
  73.         "星期一",
  74.         "星期二",
  75.         "星期三",
  76.         "星期四",
  77.         "星期五",
  78.         "星期六",
  79.         "星期日",
  80.       ];
  82.       // 获取.box 内的nav 元素
  83.       document
  84.         .querySelector(".box > nav")
  85.         .append(myYear + "年" + myMonth + "月" + myDay + "日");
  87.       // 获取.box 内的span 元素
  88.       document.querySelector(".box > span").append(week[myGetday]);
  90.       //按钮添加功能 remove 移除掉 box盒子 等于关闭掉这个提示
  91.       let box = document.querySelector(".box");
  92.       let btn = document.querySelector(".box > button");
  94.       btn.addEventListener("click", (ev) => {
  95.         ev.target = box.remove();
  96.       });
  98.       //判断当前时间点，输出 早上好 晚上好 下午好
  99.       if (myHours < 12) {
  100.         document.body.append("早上好");
  101.       } else if (myHours >= 12 && myHours < 18) {
  102.         document.body.append("下午好");
  103.       } else {
  104.         document.body.append("晚上好");
  105.       }
  106.     </script>
  107.   </body>
  108. </html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post