Jquery 、Js —— 获取当前年月日、星期几、地点、天气！

爱吃果蔬的猫

于 2023-10-17 15:09:02 发布

阅读量385

点赞数 1

分类专栏： Jquery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_53895518/article/details/133883866

版权

Jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近的工作中的小需求，自己整理了下有关——日期与天气的代码：

有其他需求的小伙伴可以去官网👉 天气插件 - 心知天气

html代码👇

<div id="tp-weather-widget" class="xc"></div>
<div id="date-time-container" class="dateTime">
        <p id="date-display">Date: </p>
        <p id="time-display">Time: </p>
        <p id="day-display">Day: </p>
</div>

js代码👇

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="your-custom-script.js"></script>
<script>

$(document).ready(function() {
    function updateDateTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = (now.getMonth() + 1).toString().padStart(2, '0'); // 补零确保两位数
        const day = now.getDate().toString().padStart(2, '0'); // 补零以确保两位数
        const dateDisplay = `${year}年${month}月${day}日`; // 使用自定义格式
        const timeDisplay = now.toLocaleTimeString(); // 获取时间
        const days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        const dayDisplay = days[now.getDay()]; // 获取星期几

        $("#date-display").text(dateDisplay);
        $("#time-display").text(timeDisplay);
        $("#day-display").text(dayDisplay);
    }

    // 初始加载
    updateDateTime();

    // 每秒更新一次时间
    setInterval(updateDateTime, 1000);
});

  (function(T, h, i, n, k, P, a, g, e) {
  g = function() {
   P = h.createElement(i);
   a = h.getElementsByTagName(i)[0];
   P.src = k;
   P.charset = "utf-8";
   P.async = 1;
   a.parentNode.insertBefore(P, a)
   };
   T["ThinkPageWeatherWidgetObject"] = n;
   T[n] || (T[n] = function() {
   (T[n].q = T[n].q || []).push(arguments)
   });
   T[n].l = +new Date();
   if(T.attachEvent) {
   T.attachEvent("onload", g)
   } else {
   T.addEventListener("load", g, false)
  }
  }(window, document, "script", "tpwidget", "//widget.thinkpage.cn/widget/chameleon.js"))
 </script>
 <script>
  tpwidget("init", {
  "flavor": "slim",
  "location": "WX4FBXXFKE4F",
  "geolocation": "disabled",
  "language": "zh-chs",
  "unit": "c",
  "theme": "chameleon",
  "container": "tp-weather-widget",
  "bubble": "enabled",
  "alarmType": "badge",
  "color": "#F47837",
  "uid": "U605DCADA4",
  "hash": "78f46a1198d54dafa0cda717efa717a9"
  });
  tpwidget("show");
 </script>

css代码👇

.xc{
  width: 200px;
  margin: 0 auto;
  }
 #tp-weather-widget,  
 #date-time-container,  
 #date-time-container p {  
    display: inline-block;  
    margin-right: 10px;  
}

运行效果👇

整体代码👇

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>天气</title>
 <meta name="viewport" content="width=device-width,initial-scale=1"/>
 <style type="text/css">
  .xc{
  width: 200px;
  margin: 0 auto;
  }
  #tp-weather-widget,  
  #date-time-container,  
  #date-time-container p {  
    display: inline-block;  
    margin-right: 10px;  
  }
 </style>
 </head>
 <body>
 <div id="tp-weather-widget" class="xc"></div>
 <div id="date-time-container" class="dateTime">
        <p id="date-display">Date: </p>
        <p id="time-display">Time: </p>
        <p id="day-display">Day: </p>
 </div>

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="your-custom-script.js"></script>
 <script>

$(document).ready(function() {
    function updateDateTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = (now.getMonth() + 1).toString().padStart(2, '0'); // 补零确保两位数
        const day = now.getDate().toString().padStart(2, '0'); // 补零以确保两位数
        const dateDisplay = `${year}年${month}月${day}日`; // 使用自定义格式
        const timeDisplay = now.toLocaleTimeString(); // 获取时间
        const days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        const dayDisplay = days[now.getDay()]; // 获取星期几

        $("#date-display").text(dateDisplay);
        $("#time-display").text(timeDisplay);
        $("#day-display").text(dayDisplay);
    }

    // 初始加载
    updateDateTime();

    // 每秒更新一次时间
    setInterval(updateDateTime, 1000);
});
  
  (function(T, h, i, n, k, P, a, g, e) {
   g = function() {
   P = h.createElement(i);
   a = h.getElementsByTagName(i)[0];
   P.src = k;
   P.charset = "utf-8";
   P.async = 1;
   a.parentNode.insertBefore(P, a)
   };
   T["ThinkPageWeatherWidgetObject"] = n;
   T[n] || (T[n] = function() {
   (T[n].q = T[n].q || []).push(arguments)
   });
   T[n].l = +new Date();
   if(T.attachEvent) {
   T.attachEvent("onload", g)
   } else {
   T.addEventListener("load", g, false)
  }
  }(window, document, "script", "tpwidget", "//widget.thinkpage.cn/widget/chameleon.js"))
 </script>
 <script>
  tpwidget("init", {
  "flavor": "slim",
  "location": "WX4FBXXFKE4F",
  "geolocation": "disabled",
  "language": "zh-chs",
  "unit": "c",
  "theme": "chameleon",
  "container": "tp-weather-widget",
  "bubble": "enabled",
  "alarmType": "badge",
  "color": "#F47837",
  "uid": "U605DCADA4",
  "hash": "78f46a1198d54dafa0cda717efa717a9"
  });
  tpwidget("show");
 </script>
 </body>
</html>