标签 JavaScript 下的文章

Ajax 跨域请求 Cookie 无法携带/保存的解决办法

服务器端设置

Nginx 端设置:

http://192.168.3.4 是允许跨域的域名,80和443 可以不用加端口号,除此之外的端口号要加
add_header 'Access-Control-Allow-Origin' 'http://192.168.3.4';
add_header 'Access-Control-Allow-Credentials' 'true';

PHP 端设置:

解释同上
header("Access-Control-Allow-Origin: http://192.168.3.4");
header("Access-Control-Allow-Credentials: true");

前端设置

jQuery Ajax 请求:

$.ajax({
    url: 'http://nas/api/v2/sync/maindata',
    xhrFields: {
        // 允许携带证书
        withCredentials: true
    },
    dataType: 'json',
    success: function (res) {
        console.log("请求结果:"+res);
    }
});

MDUI 实现右击菜单弹出菜单栏

更新记录

03/17 00:12:解决滚动页面后右击菜单栏出现在顶部。解决办法将 e.clientY 换成 e.pageY

在线预览:https://nowtime.cc/mdui/contextmenu.html

核心 JavaScript 代码:

    var $$ = mdui.JQ;
    //监听鼠标右击事件 / 移动端长按事件
    $$(document).on('contextmenu', function (e) {
        // console.log(e);

        //0:移动端长按(iOS 测试未通过)
        //2:电脑端右键
        if(e.button === 2 || e.button === 0) {
            e.preventDefault();//阻止冒泡,阻止默认的浏览器菜单

            //(修改了这里)鼠标点击位置,相对于页面
            var _x = e.pageX,
                _y = e.pageY;

            let $div = $$("<div></div>").css({
                position: 'absolute',
                top: _y+'px',
                left: _x+'px',
            });
            $$('body').append($div);//创建临时DOM

            // anchorSelector 表示触发菜单的元素的 CSS 选择器或 DOM 元素
            // menuSelector 表示菜单的 CSS 选择器或 DOM 元素
            // options 表示组件的配置参数,见下面的参数列表
            // 完整文档列表:https://doc.nowtime.cc/mdui/menu.html
            var inst = new mdui.Menu($div, '#menu');
            inst.open();//打开菜单栏
            $div.remove();//销毁创建的临时DOM
        }
    });

完整 HTML代码

- 阅读剩余部分 -

2 行代码搞定给你的网页加 黑暗模式(夜间模式)开关

Darkmode.Js

🌓黑暗模式/夜间模式,只需要几秒钟就可以给你的网站添加这个功能

本站已经添加,你可以看到网站左下方有个小按钮,你点击 Ta 预览以下效果吧!

该库使用 CSS mix-blend-mode 来将暗模式带入您的任何网站。只需复制粘贴该片段,您将获得一个小部件以打开和关闭暗模式。您也可以不使用窗口小部件而以编程方式使用它。该插件是轻量级的,内置于​​ VanillaJS 中。默认情况下,它也使用 localstorage,因此您的上一次设置将被记住!

特点

  • 窗口小部件自动显示
  • 保存用户选择
  • 如果操作系统偏好的主题为深色,则自动显示Darkmode(如果浏览器支持prefers-color-scheme)
  • 可以以编程方式使用而无需小部件

WordPress 插件

如果您使用的是 Wordpress,则可能需要看看基于 Darkmode.js 的这些插件:

简单方法(使用JSDelivr CDN)

只需将此代码添加到您的 html 页面:

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
<script>new Darkmode().showWidget();</script>

高级调用参数:

- 阅读剩余部分 -

jQuery/原生JS 监听图片加载完成/加载失败 事件

假设有以下 HTML 代码

<img id="img" src="./logo.png" alt="这是图片简介"/>

jQuery 版:

jQuery 监听图片加载完成事件

$("#img").on("load", function(){
    console.log("图片加载完成了");
});

jQuery 监听图片加载失败事件

$("#img").on("error", function(){
    console.log("图片加载失败");
});

jQuery 监听图片加载完成/加载失败事件 简化版代码

$("#img").on("load", function(){
    console.log("图片加载完成了");
}).on("error", function(){
    console.log("图片加载失败");
});

原生 JavaScript 版:

var img_selector = document.querySelector("img");//查询 id 为 img 的节点

//监听图片加载完成事件
img_selector.addEventListener("load", function(){
    console.log("图片加载完成事件");
});

//监听图片加载失败事件
img_selector.addEventListener("error", function(){
    console.log("图片加载失败事件");
});

简化版代码

var img_selector = document.querySelector("img");//查询 id 为 img 的节点

//监听图片加载完成事件
img_selector.onload = function(){
    console.log("图片加载完成事件");
};

//监听图片加载失败事件
img_selector.onerror = function(){
    console.log("图片加载失败事件");
};

纯 CSS 实现的 时间线,也支持使用 JavaScript 动态生成

Time-line

纯 CSS 实现的 时间线,也支持使用 JavaScript 生成。
DEMO | 演示
Time-line 预览图

HTML 渲染

你只需要根据 timeLine.html 代码结构进行简单的修改即可实现

JacaScript 渲染

你需要将 timeLine.html 103 行 取消注释,然后根据 timeLine.js 注释修改

timeLine.js 里 data变量 数据格式如下:

[
  {
    "title":"现在网",
    "link":"https://nowtime.cc",
    "time":"1578718860"
  },
  {
    "title":"ffmpeg 使用方法合集",
    "link":"https://nowtime.cc/software/834.html",
    "time":"1578725484"
  }
]

字段解释:

title 时间线显示的内容

link 点击后跳转的链接

time 该内容发布的时间,注意是 秒级时间戳

鸣谢

部分 CSS 样式参考的是 https://www.ihewro.com/archives.html

LICENSE

MIT LICENSE