首页 > 其他分享 >js一键切换dark模式 -

js一键切换dark模式 -

时间:2022-10-28 19:23:14浏览次数:113  
标签:function 一键 theme else dark window var js

js一键切换dark模式

//初始化
$(function () {
    let theme=$.cookie('theme');
    if(theme=="dark"){
        $("body").addClass('dark');
        $("#theme").addClass('text-warning');
        $("#theme").html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>');
    }else{
        $("body").removeClass('dark');
        $("#theme").removeClass('text-warning');
        $("#theme").html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>');
    }
    return false;
});

/**公共 **/
//主题切换
$("#theme").click(function () {
    let theme=$.cookie('theme');
    if(theme!="dark"){
        $.cookie('theme','dark',{  expires: 7,path: '/' });
        $("body").addClass('dark');
        $(this).addClass('text-warning');
        $(this).html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>');
    }else{
        $.removeCookie('theme');
        $.removeCookie('theme',{  expires: 7,path: '/' });
        $("body").removeClass('dark');
        $(this).removeClass('text-warning');
        $(this).html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>');
    }
    return false;
});

//ajax
function Ajax(url,type,data,success,com=null,error2=null) {
    $.ajax({
        url:url,
        headers: {'X-CSRF-TOKEN': $.cookie('X-CSRF-TOKEN')},
        type:type,
        data:data,
        success:function (res) {
            if(res.code==1){
                success(res)
            }else{
                toastr.warning(res.msg||"未知错误");
            }
        },
        error:function () {
            toastr.error("Server Error");
            if(error2!=null)
                error2
        },
        complete:function (res) {
            if(com !=null)
                com(res)
        }
    })
}
function getObjectURL(file) {
    var url = null ;
    if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}
// 时间戳转多少分钟之前
function getDateDiff(dateTimeStamp){
    var minute = 1000 * 60;
    var hour = minute * 60;
    var day = hour * 24;
    var month = day * 30;
    var now = new Date().getTime();
    var diffValue = now - dateTimeStamp;
    if(diffValue < 0){return;}
    var monthC =diffValue/month;
    var weekC =diffValue/(7*day);
    var dayC =diffValue/day;
    var hourC =diffValue/hour;
    var minC =diffValue/minute;
    if(monthC>=1){
        result="" + parseInt(monthC) + "月前";
    }
    else if(weekC>=1){
        result="" + parseInt(weekC) + "周前";
    }
    else if(dayC>=1){
        result=""+ parseInt(dayC) +"天前";
    }
    else if(hourC>=1){
        result=""+ parseInt(hourC) +"小时前";
    }
    else if(minC>=1){
        result=""+ parseInt(minC) +"分钟前";
    }else
        result="刚刚";
    return result;
}
function getDateTimeStamp(dateStr){
    return Date.parse(dateStr.replace(/-/gi,"/"));
}

function goBack(){
    if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){ // IE
        if(history.length > 0){
            window.history.go( -1 );
        }else{
            window.opener=null;window.close();
        }
    }else{ //非IE浏览器
        if (navigator.userAgent.indexOf('Firefox') >= 0 ||
            navigator.userAgent.indexOf('Opera') >= 0 ||
            navigator.userAgent.indexOf('Safari') >= 0 ||
            navigator.userAgent.indexOf('Chrome') >= 0 ||
            navigator.userAgent.indexOf('WebKit') >= 0){

            if(window.history.length > 1){
                window.history.go( -1 );
            }else{
                window.opener=null;window.close();
            }
        }else{ //未知的浏览器
            window.history.go( -1 );
        }
    }
}

文章来源:刘俊涛的博客 欢迎关注公众号、留言、评论,一起学习。


若有帮助到您,欢迎捐赠支持,您的支持是对我坚持最好的肯定(_)

标签:function,一键,theme,else,dark,window,var,js
From: https://www.cnblogs.com/lovebing/p/16837173.html

相关文章

  • 【JS】大道至简---来看看JS中你最熟悉的变量和数值的知识吧
    1变量1.1什么是变量?变量就是一个装东西的盒子。变量是用于存放数据的容器。我们通过变量名获取数据,数据可以被更改。1.2声明变量1.2.1定义单个变量js通过var来声明变量,v......
  • VSCode-Add_Configuration后launch.json为空的解决办法
    VSCode-AddConfiguration后launch.json为空的解决办法今天需要使用VSCodedebug一个程序,点击菜单栏的“Run”-"AddConfiguration"选项,准备生成一个默认的launch.json......
  • 模拟腾讯返回的json数据
     模拟腾讯返回的json数据 $(document).ready(function(){$("#SubmitButton").click(function(){alert("ajax准备......
  • 腾讯返回json数据转换
     腾讯返回json数据转换 #region----远程获取微信小程序二维码的流----///<summary>///远程获取微信小程序二维码的流///</summary>......
  • js数据处理4
    <template><ModuleBox2title="数据趋势图"bgType="2":cityShow="true"moduleType="sjqs":styleObj="styleObj"><divclass="echarts......
  • C#对象转json
     objectobj=new{Provider=appointmentErpStoreEntity.ProvinceName,City=appointmen......
  • JS数组对象排序
    原文地址:https://blog.csdn.net/qq_37899792/article/details/88655920利用数组api——>sort来进行排序varperson=[{name:"Rom",age:12},{name:"Bob",age:22},{name:......
  • C#后端接收前端json数组
    C#后端接收前端json数组方案一:///<summary>///(APP端)查询购物车选中商品的总价///</summary>publicclassCartTotalPriceRequestDto{/......
  • 一键部署LNMP平台脚本
    分享一个一键部署LNMP平台脚本,设置通过systemd管理Nginx服务,好用!#!/bin/bashyum-yinstallgccopenssl-develpcre-develtarxflnmp_soft.tar.gzcdlnmp_soft/tarxfngi......
  • js-2-数组部分
      创建数组的两种方式:1,利用数组字面量vararr= [1,2,3];2,利用newArray()vararr=newArray();创建一个长度为2的数组vararr1=newArray(2); <script>......