使用 Jquery 的日夜切换

17 Mar 2025 | 6 分钟阅读

在本文中，我们将了解如何使用jquery实现日夜切换功能。它是一个简单的输入字段，样式设计得像一个日夜切换开关。日夜切换器用于在两种模式之间切换，即深色模式或浅色模式，或者白天主题或夜晚主题。切换模式时，背景颜色将根据按钮的状态而改变。

以下是使用jquery实现日夜切换的示例。

示例 1

<! DOCTYPE html>    
<html>    	
    <head>    
<meta charset="UTF-8">	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  Day Night Toggle using Jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<script src = ?https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js?> </script>
<style>
body, .container {
   height: 100vh;
}
.container {
    width: 100%;
    display: flex;
    justify-content: center;
    animation-name: daytransition;
    animation-duration: 3s;
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600,600i');
html {
  margin: 0;
  height: 120%;
  font-weight: 300;
  font-family: 'Josefin Sans', sans-serif;
  background-color: black;
  text-align: center;
}
body {
  margin: 0;
  height: 120%;
  font-weight: 300;
  font-family: 'Josefin Sans', sans-serif;
  background-color: black;
  text-align: center;
}
h1 {
  justify-content: center;
  align-content: flex-stt;
  min-width: 300px;
  color: #eee;
  text-align: center;
}
h2 {  
	color: whitesmoke; 
	font-size: 26px; 
	font-family: 'Lato';
  text-align: center;
  color: #f27f2b;
} 
@keyframes daytransition {
    from {
        background-color: #040018;
    }
    to {
        background-color: #fff;
    }
}
.text {
    position: absolute;
    top: 30%;
    font-size: 20px;
    text-align: center;
}
.p-lg {
    font-size: 28px;
}
button {
    width: 200px;
    padding: 20px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    border: none;
}
.twenty {
    background: #fff;
    color: #3feb80;
    border: 2px solid #3feb80;
    border-radius: 50px;
    text-transform: uppercase;
    padding-left: 0;
    padding-right: 0;
}
.twenty span {
    position: relative;
    position: 400ms;
}
.twenty span::after {
    content: '\203A';
    position: absolute;
    opacity: 0;
    right: -10px;
    transition: 400ms ease-out 100ms;
}
.twenty:hover span::after {
    opacity: 1;
    right: -20px;
}
.p-sm {
    margin: 30px;
}
.night {
    animation-name: nighttransition;
    animation-duration: 3s;
    background-color: #040018 !important;
}
@keyframes nighttransition {
    from {
        background-color: #fff;
    }
    to {
        background-color: #040018;
    }
}
.text-night {
    color: #c5b2cc;
}
.btn {
    margin: 30px;
    background-color: #6f6f8e !important;
    color: #FBFFC9 !important;
}
.btn-night {
    background-color: #FBFFC9 !important;
    color: #6f6f8e !important;
}
</style>
<body>
		<div class = "container">
			<div class = "text">
        <h1> Example </h1>
          <h2> Day and Night Modes using Jquery </h2>
        <button class = "twenty btn btn-lg" > <span> Night Mode Off </span> </button>
			</div>
		</div>
<script>
$(document).ready(function() {
    $(".btn").click(function() {
        if ($(".container").hasClass("night")) {
            $(".container").removeClass("night");
            $(".btn").removeClass("btn-night").text("Night Mode Off");
            $(".text").removeClass("text-night");
            $(".p-sm").text("Turn on the night mode to change the background to dark.");
        } else {
            $(".container").addClass("night");
            $(".btn").addClass("btn-night").text("Night Mode On");
            $(".text").addClass("text-night");
            $(".p-sm").text("Night mode is active. Turn off the night mode to change the background to light.");
        }
    });
});
</script>
</body>
</html>

说明

在上面的例子中，我们创建了一个使用jquery的日夜模式的例子。

输出

以下是此示例的输出结果。它显示了夜间主题开启时的状态。

以下输出显示了夜间主题关闭时的状态。

示例 2

<! DOCTYPE html>    
<html>    	
    <head>    
<meta charset="UTF-8">	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  Day Night Toggle using Jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<script src = ?https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js?> </script>
<style>
@import url('https://fonts.googleapis.com/css?family=Nunito:800i&display=swap');
h1 {
  justify-content: center;
  min-width: 100px;
  color: #eee;
  text-align: center;
}
h2 {  
	color: whitesmoke; 
	font-size: 26px; 
	font-family: 'Lato';
  text-align: center;
  color: #f27f2b;
} 
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Nunito', sans-serif;
  font-size: 40px;
  background: #104e0c;
}

* {
  box-sizing: inherit;
}
.wrapper {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body {
  margin: 0;
  height: 120%;
  font-weight: 300;
  font-family: 'Josefin Sans', sans-serif;
  background-color: #7c1e1e;
  text-align: center;
}
#checkbox {
  opacity: 0;
  height: 0;
  width: 0;
}
.toggle {
  position: relative;
  cursor: pointer;
  display: inline-block;
  width: 200px;
  height: 100px;
  background: #615872;
  border-radius: 50px;
  transition: 500ms;
  overflow: hidden;
}
.toggle-btn {
  position: absolute;
  display: inline-block;
  top: 7px;
  left: 6px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: #FAEAF1;
  overflow: hidden;
  box-shadow: 0 0 35px 4px rgba(255, 255, 255);
  transition: all 500ms ease-out;
}
.cr {
  position: absolute;
  display: inline-block;
  background: #FAEAF1;
  border-radius: 50%;
  transition: 500ms;
}
.cr-1 {
  background: #FFFFF9;
  width: 86px;
  height: 86px;
  left: 10px;
  bottom: 10px;
}
.cr-2 {
  width: 20px;
  height: 20px;
  top: -7px;
  left: 44px;
}
.cr-3 {
  width: 16px;
  height: 16px;
  top: 20px;
  right: -4px;
}
.cr-4 {
  width: 10px;
  height: 10px;
  top: 24px;
  left: 30px;
}
.cr-5 {
  width: 15px;
  height: 15px;
  top: 40px;
  left: 48px;
}
.cr-6 {
  width: 10px;
  height: 10px;
  top: 48px;
  left: 20px;
}
.cr-7 {
  width: 12px;
  height: 12px;
  bottom: 5px;
  left: 35px;
}
.st {
  position: absolute;
  display: inline-block;
  border-radius: 50%;
  background: #FFF;
  box-shadow: 1px 0 2px 2px rgba(255, 255, 255);
}

.st-1 {
  width: 6px;
  height: 6px;
  right: 90px;
  bottom: 40px;
}
.st-2 {
  width: 8px;
  height: 8px;
  right: 70px;
  top: 10px;
}
.st-3 {
  width: 5px;
  height: 5px;
  right: 60px;
  bottom: 15px;
}
.st-4 {
  width: 3px;
  height: 3px;
  right: 40px;
  bottom: 50px;
}
.st-5 {
  width: 4px;
  height: 4px;
  right: 10px;
  bottom: 35px;
}
.st-6, .st-7, .st-8 {
  width: 10px;
  height: 2px;
  border-radius: 2px;
  transform: rotate(-45deg);
  box-shadow: 5px 0px 4px 1px #FFF;
  animation-name: travel;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}
.st-6 {
  right: 30px;
  bottom: 30px;
  animation-delay: -2s;
}
.st-7 {
  right: 50px;
  bottom: 60px;
}
.st-8 {
  right: 90px;
  top: 10px;
  animation-delay: -4s;
}
@keyframes travel {
  0% {
    transform: rotate(-45deg) translateX(70px);
  }
  50% {
    transform: rotate(-45deg) translateX(-20px);
    box-shadow: 5px 0px 6px 1px #FFF;
  }
  100% %
    transform: rotate(-45deg) translateX(-30px);
    width: 2px;
    height: 2px;
    opacity: 0;
    box-shadow: none;
  }
}
#checkbox:checked + .toggle {
  background: #61bcc9;
}
#checkbox:checked + .toggle .toggle-btn {
  background: #F7FFFF;
  transform: translateX(102px);
  box-shadow: 0 0 35px 5px rgba(255, 255, 255);
}
#checkbox:checked + .toggle .toggle-btn .cr {
  transform: rotate(-45deg) translateX(70px);
}
#checkbox:checked + .toggle .st {
  animation: move 2s infinite;
  transform: none;
  box-shadow: none;
}
#checkbox:checked + .toggle .st-1 {
  width: 40px;
  height: 10px;
  border-radius: 10px;
  background: #FFF;
  left: 20px;
  top: 25px;
  box-shadow: none;
}
#checkbox:checked + .toggle .st-2 {
  width: 12px;
  height: 12px;
  background: #FFF;
  left: 26px;
  top: 23px;
  box-shadow: -1px 0 2px 0 rgba(0, 0 , 0, 0.1);
}
#checkbox:checked + .toggle .st-3 {
  width: 16px;
  height: 16px;
  background: #FFF;
  left: 35px;
  top: 19px;
  box-shadow: -1px 0 2px 0 rgba(0, 0 , 0, 0.1);
}
#checkbox:checked + .toggle .st-4 {
  width: 14px;
  height: 14px;
  background: #FFF;
  left: 46px;
  top: 21px;
  box-shadow: -1px 0 2px 0 rgba(0, 0 , 0, 0.1);
}
#checkbox:checked + .toggle .st-5 {
  width: 60px;
  height: 15px;
  border-radius: 15px;
  background: #FFF;
  left: 30px;
  bottom: 20px;
  box-shadow: none;
}
#checkbox:checked + .toggle .st-6 {
  width: 18px;
  height: 18px;
  background: #FFF;
  border-radius: 50%;
  left: 38px;
  bottom: 20px;
  box-shadow: -1px 0 2px 0 rgba(0, 0 , 0, 0.1);
}
#checkbox:checked + .toggle .st-7 {
  width: 24px;
  height: 24px;
  background: #FFF;
  border-radius: 50%;
  left: 52px;
  bottom: 20px;
  box-shadow: -1px 0 2px 0 rgba(0, 0 , 0, 0.1);
}
#checkbox:checked + .toggle .st-8 {
  width: 21px;
  height: 21px;
  background: #FFF;
  border-radius: 50%;
  left: 70px;
  top: 59px;
  box-shadow: -1px 0 2px 0 rgba(0, 0 , 0, 0.1);
}
@keyframes move {
  0% {
    transform: none;
  }
  25% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(-2px);
  }
}
p {
  text-align: center;
  letter-spacing: 15px;
  background: #34495e;
  color: #FFF;
}
p.morning {
  background: #e67e22;
}
</style>
  <body>
    <h1> Example </h1>
          <h2> Day and Night Modes using Jquery </h2>
    <div class="wrapper">
      <input type="checkbox" id="checkbox">
      <label for="checkbox" class="toggle">
        <span class="toggle-button">
          <span class="cr cr-1"> </span>
          <span class="cr cr-2"> </span>
          <span class="cr cr-3"> </span>   
          <span class="cr cr-4"> </span>
          <span class="cr cr-5"> </span>
          <span class="cr cr-6"> </span>
          <span class="cr cr-7"> </span>
        </span>
        <span class="st st-1"> </span>
        <span class="st st-2"> </span>
        <span class="st st-3"> </span>
        <span class="st st-4"> </span>
        <span class="st st-5"> </span>
        <span class="st st-6"> </span>
        <span class="st st-7"> </span>
        <span class="st st-8"> </span>
      </label>
    </div>
    <p> Good Night! </p>
  </body>
 <script>
const wrapper = document.querySelector('.wrapper');
const para = document.querySelector('p')
wrapper.addEventListener('change', function(e) {
  if(e.target.checked) {
    para.classList.add('morning');
    para.textContent = 'Good Morning';
  } else {
    para.classList.remove('morning');
    para.textContent = 'Good Night!';
  }
})
</script>
</body>
</html>

下一主题#

使用 Jquery 的日夜切换

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

使用 Jquery 的日夜切换

示例 1

示例 2

相关帖子

使用 JQuery 创建待办事项列表

使用 Jquery 的带有拖动和滚轮的轮播

Jquery 搜索滑出插件

使用 jQuery 创建井字棋游戏

使用 JavaScript 进行语言翻译

使用 Jquery 的 DoubleScroll

JQuery UI Checkboxradio

jQuery 中的复选框验证

jQuery 原位确认框

jQuery 调色板颜色选择器

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器