首页 > 互联资讯 > 资讯实事  > 

jquery白天到夜间特效实例代码(jQuery冒泡显示图标特效实例代码)

jquery白天到夜间特效实例代码(jQuery冒泡显示图标特效实例代码)
这是一款基于jquery的白天到夜间全天特效。

创建一个基于jQuery的白天到夜间的全天特效,通常需要使用CSS来定义白天和夜间的样式,并使用JavaScript(jQuery)来根据时间来切换这些样式。以下是一个简单的示例代码,展示了如何实现这一效果:


```html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>白天到夜间特效示例</title>

<style>

  body.daytime {

    background-color: #87CEEB; / 天蓝色 /

    color: #000;

  }

  body.nighttime {

    background-color: #000;

    color: #FFF;

    background-image: url('stars.jpg'); / 夜间背景图片 /

  }

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<body>


<script>

$(document).ready(function(){

  // 判断当前时间,并设置相应的样式

  var hour = new Date().getHours();

  if(hour >= 6 && hour < 18) {

    // 白天

    $('body').addClass('daytime');

  } else {

    // 夜间

    $('body').addClass('nighttime');

  }

});

</script>


</body>

</html>

```


在这个示例中,我们使用了CSS来定义白天和夜间的样式。`daytime` 类设置了背景颜色为天蓝色,文本颜色为黑色,而 `nighttime` 类设置了背景颜色为黑色,文本颜色为白色,并添加了一个星星背景图片。


JavaScript 部分使用了 jQuery 来获取当前时间,并根据时间来切换 `body` 元素的类。如果当前时间在早上6点到下午6点之间,页面将显示为白天样式;否则,将显示为夜间样式。


请注意,你需要将 `'stars.jpg'` 替换为你自己的星星背景图片的路径。此外,这个示例假设你的网站在所有时间都是可访问的,并且用户的本地时间是准确的。在实际应用中,你可能需要考虑更多的因素,例如用户的时区设置等。


jQuery冒泡显示图标特效,jquery背景自适应浏览器大小,jQuery自动滚动切换特效,基于jQuery通用幻灯片特效,

jquery白天到夜间特效实例代码(jQuery冒泡显示图标特效实例代码)由讯客互联资讯实事栏目发布,感谢您对讯客互联的认可,以及对我们原创作品以及文章的青睐,非常欢迎各位朋友分享到个人网站或者朋友圈,但转载请说明文章出处“jquery白天到夜间特效实例代码(jQuery冒泡显示图标特效实例代码)