基于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实现二级联动效果
Mar 30 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery实现轮播图效果demo
Jan 11 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
PHP 中dirname(_file_)讲解
2007/03/18 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
javascript 闭包详解
2015/07/02 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
python实现给字典添加条目的方法
2014/09/25 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
介绍一下EJB的体系结构
2012/08/01 面试题
给老师的道歉信
2014/01/11 职场文书
市场开发计划书
2014/05/07 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
2014全年工作总结
2014/11/27 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
检讨书怎么写
2015/05/07 职场文书
工作简历的自我评价
2019/05/16 职场文书