时间戳

首页 > 解决方案 > 需要帮助编码夜间模式 wordpress webiste，它将根据晚上 7 点到早上 7 点自动触发（如 instagram），但对于我的网站

javascript - 需要帮助编码夜间模式 wordpress webiste，它将根据晚上 7 点到早上 7 点自动触发（如 instagram），但对于我的网站

问题描述

我想要一个 javascript 代码来检查当前时间是否在晚上 7 点到早上 7 点之间。如果是这样，它应该将我网站上的背景颜色更改为 X。如果当前时间不在晚上 7 点到早上 7 点之间，则背景颜色应该是 wordpress 主题的原始颜色。时间应该从用户浏览器自动获知，并据此触发该功能。

我在网上看到了这段代码，它触发了用户时间

<script type="text/javascript" src="<?php echo plugin_dir_url( __FILE__ ) . 'moment.min.js';?>"></script>
<script type="text/javascript" src="<?php echo plugin_dir_url( __FILE__ ) . 'moment-timezone.js';?>"></script>
<script type="text/javascript" src="<?php echo plugin_dir_url( __FILE__ ) . 'moment-timezone-data.js';?>"></script>
<script type="text/javascript" src="<?php echo plugin_dir_url( __FILE__ ) . 'jquery-1.9.0.min.js';?>"></script>
<script type="text/javascript" src="<?php echo plugin_dir_url( __FILE__ ) . 'jstz-1.0.4.min.js';?>"></script>

<script type="text/javascript">
$(document).ready(function() {
  var tz = jstz.determine();
  var current_time= moment.tz().format('MMMM Do YYYY, h:mm:ss a');;
  alert(current_time);
});

触发时间所需的 文件 下载必要的文件

如果您有任何其他方法，请随时提出建议

标签： javascriptphpjquerywordpress

解决方案

使用一些基本的 javascript 和 jquery，这应该非常简单：







$(document).ready(function() {

   // get today's info

   var d = new Date();

   // get the hour of the day - between 1 & 24

   var time = d.getHours();
   
   // check if hour is at 7pm or later

   if (time >= 19) { 

     $('.background').css('background-color', '#000');
     
     // check if time is 7am or earlier

   } else if (time <= 7) {

     $('.background').css('background-color', '#000');
   } else {
     
     // you can remove this else statement is meant to demonstrate what would happen between 7am and 7pm if there was not a default
     
     $('.background').css('background-color', 'orange');
   
   }

});


.background {

width: 500px;
height: 500px;
background-color: blue;
}


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="background"></div>

推荐阅读