基于JavaScript或jQuery实现网站夜间/高亮模式


Posted in jQuery onMay 30, 2020

创建夜间/高亮模式的步骤:

创建一个HTML文档。

为文档文件以及黑暗模式创建CSS。

添加一个开关转换器按钮,以在明暗模式之间进行切换。

使用javascript或jQuery代码向开关转换器添加功能,以在明暗模式之间切换。

示例1:以下示例演示了使用JQuery代码在明暗模式之间进行切换。它基本上通过使用函数hasClass(),addClass()和removeClass()方法来工作。

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
      Dark Mode
    </title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
    <style>
      body{ padding:10% 3% 10% 3%; text-align:center; } img{ height:140px; width:140px;
      } h1{ color: #32a852; } .mode { float:right; } .change { cursor: pointer;
      border: 1px solid #555; border-radius: 40%; width: 20px; text-align: center;
      padding: 5px; margin-left: 8px; } .dark{ color: #e6e6e6; }
    </style>
  </head>
  
  <body>
    <div class="mode">
      Dark mode:
      <span class="change">
        OFF
      </span>
    </div>
    <div>
      <h1>
        GeeksforGeeks
      </h1>
      <p>
        <i>
          A Computer Science Portal for Geeks
        </i>
      </p>
      <h3>
        Light and Dark Mode
      </h3>
      <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png">
      <p>
        Click on the switch on top-right to move to dark mode.
      </p>
    </div>
    <script>
      $(".change").on("click",
      function() {
        if ($("body").hasClass("dark")) {
          $("body").removeClass("dark");
          $(".change").text("OFF");
        } else {
          $("body").addClass("dark");
          $(".change").text("ON");
        }
      });
    </script>
  </body>

</html>

示例2:以下示例演示了通过在JavaScript代码中使用toggle()函数在高亮模式和夜间模式之间进行切换。

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
      Dark Mode
    </title>
    <style>
      body{ padding:0% 3% 10% 3%; text-align:center; } h1{ color: #32a852; margin-top:30px;
      } button{ cursor: pointer; border: 1px solid #555; text-align: center;
      padding: 5px; margin-left: 8px; } .dark{ color: #e6e6e6; }
    </style>
  </head>
  
  <body>
    <h1>
      GeeksforGeeks
    </h1>
    <p>
      <i>
        A Computer Science Portal for Geeks
      </i>
    </p>
    <h3>
      Light and Dark Mode
    </h3>
    <button onclick="myFunction()">
      Switch mode
    </button>
    <script>
      function myFunction() {
        var element = document.body;
        element.classList.toggle("dark");
      }
    </script>
  </body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jquery实现拖拽小方块效果
Dec 10 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 #jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 #jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 #jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 #jQuery
jQuery实现鼠标滑动切换图片
May 27 #jQuery
jQuery弹框插件使用方法详解
May 26 #jQuery
jQuery实现的分页插件完整示例
May 26 #jQuery
You might like
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
JScript的条件编译
2007/05/29 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Python工程师面试必备25条知识点
2018/01/17 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
python动态文本进度条的实例代码
2020/01/22 Python
python numpy数组中的复制知识解析
2020/02/03 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
实习销售业务员自我鉴定
2013/09/21 职场文书
高级文秘工作总结的自我评价
2013/09/28 职场文书
物业管理个人自我评价
2013/11/08 职场文书
仓库班组长岗位职责
2013/12/12 职场文书
机关党员公开承诺书
2014/08/30 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
详解Python为什么不用设计模式
2021/06/24 Python