前端页面js获取nginx服务器时间
在实际开发中，我们通常要使用的是服务器端的时间，而不是本机电脑的时间，在js文件中直接通过new Date()获取的时间是本机电脑的系统时间，获取服务器时间的方法如下：
1.修改nginx的配置文件nginx.conf，在对应服务器端口的server路径下直接添加如下代码：

 location = /time.txt {

      return 200 $time_local;

 }

注意：

具体效果可参考最下方运行结果：

nginx配置$time_local 生成格式为：25/Oct/2022:10:56:15 +0800

不可用new Date("25/Oct/2022:10:56:15 +0800")
nginx配置$time_iso8601 生成格式为：2022-10-25T15:42:45+08:00

可用new Date("2022-10-25T15:42:45+08:00")转化为国际标准时间,然后才能格式化

添加后如下:（下图中我是在本地测试，server_name为127.0.0.1，本地测试可到nginx官网下载nginx,这里我下载的版本是nginx-1.23.2,完成后双击运行，修改配置文件后重启）
重启nginx命令（要到安装nginx的目录下，地址栏输入cmd回车）:
nginx -s reload(cmd命令)
./nginx -s reload(linux命令)
停止命令： nginx -s stop(cmd命令)
端口号listen应该和本地运行文件的端口号保持一致，在服务器端不用管。

2.在网页中直接访问http://127.0.0.1:8818/time.txt,访问成功后出现如下返回：

3.在前端js页面中访问time.txt文件，代码如下：（可直接在服务器测试，本地配置错误可能会报错，而且时间是跟随本机系统时间，测试不出变化）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <script src="../jQuery.js"></script>

        <title>JS获取Nginx服务器时间</title>

    </head>

    <div>

        <div class="servertime"></div>

        <div class="time"></div>

        <!-- <button onclick="printTime()">JS获取Nginx服务器时间</button> -->

        <button onclick="getFwqDate()">JS获取Nginx服务器时间</button>

    </div>

    <body>

        <script type="text/javascript">

            function getFwqDate() {

                let xhr = new XMLHttpRequest();

                if (!xhr) {

                    xhr = new ActiveXObject("Microsoft.XMLHTTP");

                }

                // xhr.open("HEAD", location.href, false);

                xhr.open("POST", '/time.txt', false);

                xhr.overrideMimeType("text/html;charset=utf-8")

                xhr.send();

                console.log("xhr.responseText=", xhr.responseText);

                /**

                 * 20221014lmy添加

                 * nginx配置$time_iso8601 生成格式为：2022-10-25T15:42:45+08:00

                 * nginx配置$time_local 生成格式为：25/Oct/2022:10:56:15 +0800

                 */

                //getTime(),将标准时间转化为毫秒数时间

                millionstime = (new Date(xhr.responseText)).getTime();

                // millionstime = new Date(xhr.responseText);

                console.log("millionstime=", millionstime);

                //将获取到的时间转化成自己想要的格式，此处是20221014155450

                var servertime = new Date(millionstime);

                var year = servertime.getFullYear();

                var month = servertime.getMonth() + 1;

                var day = servertime.getDate();

                var hours = servertime.getHours();

                var minutes = servertime.getMinutes();

                var seconds = servertime.getSeconds();

                if (month < 10) {

                    month = '0' + month;

                }

                if (day < 10) {

                    day = '0' + day;

                }

                if (hours < 10) {

                    hours = '0' + hours;

                }

                if (minutes < 10) {

                    minutes = '0' + minutes;

                }

                if (seconds < 10) {

                    seconds = '0' + seconds;

                }

                servicedate = year.toString() + month.toString() + day.toString() + hours.toString() + minutes.toString() + seconds.toString();

                console.log("servicedate=",servicedate)

                return servicedate;

            }

        </script>

    </body>

</html>

报错：运行可能会遇到如下错误：

打开控制台，找不到相应页面：

解决办法：可在文件运行时先nginx -s stop停止nginx服务，待需要访问time.txt文件时，再双击启动（这种情况只会在本地运行时发生，在部署的服务器端不会报错）

运行结果：

1.$time_local

nginx配置$time_local 生成格式为：25/Oct/2022:10:56:15 +0800

不可用new Date("25/Oct/2022:10:56:15 +0800")

2.$time_iso8601

nginx配置$time_iso8601 生成格式为：2022-10-25T15:42:45+08:00

可用new Date("2022-10-25T15:42:45+08:00")转化为国际标准时间

js获取nginx服务器时间的更多相关文章

  1. js 获取当前的时间

    第一个小程序,用js获取当前的时间,,比较特殊的是 月是从0开始算的,显示的时候要加1,获取日用getDate(),获取周 getDay(), 直接上代码 <!DOCTYPE html> ...

  2. moment.js 默认使用服务器时间

    在前端使用Date对象获取当前时间的时候,该时间是客户端的时间.但是该时间可以被用户修改,所以我们一般情况下并不想要这个时间.如果每一次获取时间的时候都请求一下服务器,那么将会对服务器造成不必要的压力 ...

  3. js获取当前系统时间

    Js获取当前日期时间及其它操作var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份 ...

  4. js 获取当前系统时间

    Js获取当前日期时间及其它操作 var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年 ...

  5. js 获取系统当前时间

    JS获取当前的日期和时间的方法:var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年 ...

  6. 浏览器获取WEB服务器时间

    /* * 获取XMLHttpRequest对象 */ function CreateXMLHttpRequest() { var xmlreq = false; if (window.ActiveXO ...

  7. JS获取当前日期和时间的方法,并按照YYYY-MM-DD格式化

    Js获取当前日期时间及其它操作 var myDate = new Date(); myDate.getYear();        //获取当前年份(2位) myDate.getFullYear(); ...

  8. JS获取日期和时间

    //获取日期和时间 function showDate(){ var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFul ...

  9. Cocos Creator JS 获取当前日期与时间

    var testDate = new Date(); testDate.getYear();//获取当前年份(2位) testDate.getFullYear(); //获取完整的年份(4位,1970 ...

  10. js获取当前日期和时间的代码

    最佳答案 var myDate = new Date(); myDate.toLocaleDateString(): //获取当前日期myDate.toLocaleTimeString(); //获取 ...

随机推荐

  1. docker高级篇第二章-分布式存储之实战案例：主从容错切换迁移案例

    在上一篇,学会了3主3从的Redis集群搭建.那么接下来,我们就来学习Redis集群主从容错切换迁移案例 本次案例从模拟两个场景 1:数据读写存储 a:一个新key数据来了,是否会按照预设的进入槽中? ...

  2. 啥是Session？

    什么是 Session 会话? 1.Session 就一个接口(HttpSession). 2.Session 就是会话.它是用来维护一个客户端和服务器之间关联的一种技术. 3.每个客户端都有自己的一 ...

  3. Cache policy

    Ref: Cache Replacement Policies https://linuxhint.com/configuring-zfs-cache/ https://blog.chaospixel ...

  4. HTML – W3Schools 学习笔记

    有用链接: HTML Attribute Reference (查看所有 Attributes) HTML Paragraphs Link to W3Schools <p> 里面 doub ...

  5. 全面掌握 Jest：从零开始的测试指南（上篇）

    随着JavaScript在前后端开发中的广泛应用,测试已成为保证代码质量的关键环节. 为什么需要单元测试 在我们的开发过程中,经常需要定义一些算法函数,例如将接口返回的数据转换成UI组件所需的格式.为 ...

  6. 【渗透测试】ATT&CK靶场一，phpmyadmin，域渗透，内网横向移动攻略

    前言 VulnStack,作为红日安全团队匠心打造的知识平台,其独特优势在于全面模拟了国内企业的实际业务场景,涵盖了CMS.漏洞管理及域管理等核心要素.这一设计理念源于红日安全团队对ATT&C ...

  7. vivo 全链路多版本开发测试环境落地实践

    作者:来自 vivo 互联网研发效能团队- Wang Kang 测试环境全链路多版本部署,解决多测试环境资源争抢等问题. 一.背景介绍 软件系统中全链路指的是从用户请求发起,到最终返回响应的整个过程中 ...

  8. C#上位机与PLC通信心跳的实现方法

    -Begin- 大家好!我是付工.众所周知,在工业自动化控制系统中,上位机与下位机之间的通信是实现自动化生产的关键环节之一.为了确保通信的稳定性和可靠性,我们通用会采用一种被称为[心跳机制]的方法,它 ...

  9. PMP——如何区分赶工与快速跟进?

    如何区分赶工与快速跟进? 在PMP考试中经常出现由于时间不够需要进行进度压缩的场景.进度压缩的常用工具有赶工和快速跟进两种方式.也可以辅助调整某些活动的提前量与滞后量来进行缓解.提前量是相对于紧前活动 ...

  10. WiFi基础(五)：802.11帧结构与WiFi控制帧、管理帧、数据帧

    liwen01 2024.09.22 前言 前面介绍了 WiFi 的工作原理和 WiFi 的接入过程,这里将通过分析 WiFi 具体数据包结构,让你对 WiFi 工作原理和接入过程有一个更进一步的了解 ...