基于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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
基于jQuery拖拽事件的封装
Nov 29 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和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
vue组件实例解析
2017/01/10 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
python高级特性和高阶函数及使用详解
2018/10/17 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
试用期员工考核制度
2014/01/22 职场文书
《日月潭》教学反思
2014/02/28 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
九年级化学教学反思
2016/02/22 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python