基于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 EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery手风琴的简单制作
May 12 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 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
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
JS 对象介绍
2010/01/20 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
Python闭包函数定义与用法分析
2018/07/20 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
详解python datetime模块
2020/08/17 Python
彪马美国官网:PUMA美国
2017/03/09 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
编写strcpy函数
2014/06/24 面试题
经典优秀个人求职自荐信格式
2013/09/25 职场文书
总经理职责范文
2013/11/08 职场文书
中学实习教师自我鉴定
2013/12/12 职场文书
教师自我反思材料
2014/02/14 职场文书
学校三节实施方案
2014/06/09 职场文书
工会工作个人总结
2015/03/03 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书