每12小时切换一个元素 CSS类 jQuery时间更改

  • 源码大小:5.3KB
  • 所需积分:1积分
  • 源码编号:19JP-3618
  • 浏览次数:858次
  • 最后更新:2023年07月02日
  • 所属栏目:时间和时钟
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

Time Change是一个最小的jQuery脚本,它可以根据当前时间(12点之前或之后)自动切换元素的CSS类

当你想鼓励用户经常登录或在你的网站上做一些事情时(可能是在12点之前或之后),你可以在你的站点中使用它。

如何使用它:

1.在文档中加载必要的jQuery库(slim build)。

<script src="/path/to/cdn/jquery.slim.min.js"></script>

2.根据当前时间从元素中添加和删除CSS类的主脚本。

$(document).ready(function(){
  let date1 = new Date();
  let year = date1.getFullYear();
  let hours = 12; 
  let month = date1.getMonth(); 
  let date = date1.getDate(); 
  let date2 = new Date(year,month,date,hours);
  // before 12:00
  if(date1 < date2){ 
   $('body').addClass("before"); 
   $('body').removeClass("after");
  }
  // after before 12:00
  else{
   $('body').addClass("after"); 
   $('body').removeClass("before");
  }
});

3.将您自己的CSS样式应用于元素。

.before {
  background: red;
  color: white;
}

.after {
  background: blue;
  color: white;
}

预览截图