改变css样式取决于一天的时间(javascript)

To change a css style depending on time of day (javascript)

本文关键字:时间 javascript 一天 css 样式 取决于 改变      更新时间:2023-09-26

我试着写一个小。js文件来改变一个css样式从display:blockdisplay:none取决于一天的时间,08:30到17:00显示块和17:00到08:30显示无

这是我到目前为止所做的:

<script language="JavaScript">
day=new Date()     //..get the date
x=day.getHours()    //..get the hour
if(x>=8.30 && x<17) {
  document.write('<style type="text/css">#live{display:block}"></style>')
 } else
 if(x>=17 && x<8.30) {
   document.write('<style type="text/css">#live{display:none}"></style>')
};
</script>

确实认为这是很好的js加上不确定是否使用8.30将工作加上不确定是否需要最后的";"。

如果有任何帮助,我将不胜感激。

我现在正在尝试这个代码,但不工作

<script type="text/javascript">
$(document).ready ( function (){
var dateObj = new Date();
var hour = dateObj.getHours() * 100 + dateObj.getMinutes();
if (hour >= 1600 && hour <= 1800) {
document.getElementById('live').style.display = "none";
 }

 });
 </script>

Date().getHours()返回一个整数。要使你的代码工作,你必须这样做:

var dateObj = new Date();
var hour = dateObj.getHours() * 100 + dateObj.getMinutes();
if (hour >= 830 && hour <= 1700) {
    document.getElementById('your_el').style.display = "none";
}

注意,只有当DOM准备好进行操作时,才应该使用这段代码。

但是,这真的是你想要的吗?JavaScript的Date从用户的时钟中获取日期和时间信息。您最好在服务器上处理这个问题。

  1. getHours()返回一个整数(0到23)。8点30分,你可以需要相应地检查getHours()getMinutes()
  2. 最后一个分号不需要出现。

getHours()只能得到小时数,您还需要得到分钟数试着与

x=day.getHours()+ (day.getMinutes()/100);

关于;

它不是必须在if之后,但是将它放在每个代码行(即每隔一行)的末尾是很好的做法