js 实用技巧

2025-05-14

js实现 ctrl+f 搜索效果

可以实现跨标签，段落匹配

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本搜索高亮示例</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#FF7D00',
            neutral: {
              100: '#F5F7FA',
              200: '#E5E6EB',
              300: '#C9CDD4',
              400: '#86909C',
              500: '#4E5969',
              600: '#272E3B',
              700: '#1D2129',
            }
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-balance {
        text-wrap: balance;
      }
      .highlight-current {
        @apply bg-secondary text-white transition-all duration-300;
      }
      .highlight {
        @apply bg-yellow-200 transition-all duration-300;
      }
      .search-container {
        @apply fixed top-4 left-1/2 -translate-x-1/2 z-50 bg-white/90 backdrop-blur-sm shadow-lg rounded-lg p-3 flex items-center gap-3 w-full max-w-2xl;
      }
      .search-input {
        @apply flex-1 border border-neutral-200 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all;
      }
      .search-btn {
        @apply px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all flex items-center justify-center gap-2;
      }
      .search-btn:disabled {
        @apply bg-neutral-300 cursor-not-allowed;
      }
      .result-count {
        @apply px-3 py-2 rounded-md bg-neutral-100 text-neutral-600;
      }
      .main-content {
        @apply max-w-4xl mx-auto px-4 py-6 pt-24;
      }
    }
  </style>
</head>

<body class="font-inter bg-neutral-100 text-neutral-700 min-h-screen">
  <!-- 搜索栏 -->
  <div class="search-container">
    <div class="flex items-center gap-2 flex-1">
      <i class="fa fa-search text-neutral-400"></i>
      <input type="text" id="search-input" class="search-input" placeholder="输入文本进行搜索..."
        aria-label="搜索文本">
    </div>
    <button id="prev-btn" class="search-btn" disabled>
      <i class="fa fa-chevron-up"></i>
    </button>
    <button id="next-btn" class="search-btn" disabled>
      <i class="fa fa-chevron-down"></i>
    </button>
    <span id="match-count" class="result-count">0/0</span>
  </div>

  <!-- 主内容区 -->
  <main class="main-content">
    <article>
      <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-800 mb-6">探索人工智能的未来</h1>

      <p class="text-lg mb-4 text-balance">
        人工智能（Artificial Intelligence, AI）正在改变我们生活的方方面面，从智能手机的语音助手到自动驾驶汽车，AI 技术的应用已经渗透到各个领域。随着深度学习和大数据的发展，人工智能正迎来前所未有的突破。
      </p>

      <section class="mb-8">
        <h2 class="text-xl font-bold text-neutral-800 mb-3">人工智能的发展历程</h2>
        <p class="mb-4">
          人工智能的概念最早可以追溯到 20 世纪 50 年代，当时科学家们开始探索如何让计算机模拟人类的智能。经过几十年的发展，特别是在机器学习和神经网络领域的突破，AI 技术取得了显著进展。
        </p>
        <p>
          近年来，深度学习模型如 Transformer 架构的出现，使得自然语言处理和计算机视觉领域取得了革命性的进展。例如，GPT 系列模型已经能够生成高质量的文本内容，而图像生成模型如 DALL-E 和 Stable Diffusion 则可以根据文本描述创建逼真的图像。
        </p>
      </section>

      <section class="mb-8">
        <h2 class="text-xl font-bold text-neutral-800 mb-3">AI 在各行业的应用</h2>
        <ul class="list-disc pl-6 space-y-2 mb-4">
          <li><strong>医疗保健</strong>：AI 辅助诊断、药物研发和个性化治疗方案。</li>
          <li><strong>金融</strong>：风险评估、欺诈检测和算法交易。</li>
          <li><strong>教育</strong>：个性化学习平台和智能辅导系统。</li>
          <li><strong>交通</strong>：自动驾驶技术和智能交通管理。</li>
          <li><strong>零售</strong>：推荐系统、库存管理和客户服务。</li>
        </ul>
        <p>
          这些应用不仅提高了效率，还为人们的生活带来了更多便利和可能性。例如，医疗 AI 系统可以分析医学影像，帮助医生更早地发现疾病；金融 AI 可以实时监控交易，识别潜在的欺诈行为。
        </p>
      </section>

      <section class="mb-8">
        <h2 class="text-xl font-bold text-neutral-800 mb-3">挑战与未来展望</h2>
        <p class="mb-4">
          尽管人工智能取得了巨大进步，但仍然面临一些挑战。其中包括数据隐私和安全问题、算法偏见、以及 AI 系统的可解释性。此外，AI 技术的广泛应用也可能导致一些工作岗位的自动化，需要社会做好相应的准备。
        </p>
        <p>
          未来，人工智能有望在更多领域发挥作用，如气候变化研究、量子计算和太空探索。随着技术的不断进步，我们有理由相信，AI 将为人类创造更加美好的未来。
        </p>
      </section>

      <blockquote class="border-l-4 border-primary pl-4 italic text-neutral-600 mb-8">
        "人工智能不是要取代人类，而是要增强人类的能力。我们应该关注如何让 AI 与人类协作，共同解决全球性挑战。" —— 人工智能专家
      </blockquote>

      <section>
        <h2 class="text-xl font-bold text-neutral-800 mb-3">如何准备 AI 时代</h2>
        <p class="mb-4">
          为了适应人工智能时代的到来，个人和社会都需要做好准备。教育系统需要加强 STEM（科学、技术、工程、数学）教育，培养更多具备 AI 相关技能的人才。同时，公众也需要了解 AI 技术的潜力和风险，以便做出明智的决策。
        </p>
        <p>
          对于企业来说，拥抱 AI 技术可以提高竞争力和创新能力。通过将 AI 与业务流程相结合，企业可以实现更高效的运营和更好的客户体验。
        </p>
      </section>
    </article>
  </main>

  <script>
    // 搜索状态管理
    const searchState = {
      currentIndex: 0,
      matches: [],
      keyword: '',
      highlights: []
    };

    // DOM 元素
    const searchInput = document.getElementById('search-input');
    const prevBtn = document.getElementById('prev-btn');
    const nextBtn = document.getElementById('next-btn');
    const matchCount = document.getElementById('match-count');

    // 初始化
    document.addEventListener('DOMContentLoaded', () => {
      // 绑定搜索事件
      searchInput.addEventListener('input', handleSearch);
      prevBtn.addEventListener('click', navigatePrevious);
      nextBtn.addEventListener('click', navigateNext);

      // 添加键盘导航支持
      document.addEventListener('keydown', (e) => {
        // Ctrl/Cmd + F 聚焦搜索框
        if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
          e.preventDefault();
          searchInput.focus();
        }

        // 搜索框聚焦时的导航
        if (document.activeElement === searchInput) {
          // Shift + Enter 导航到上一个
          if (e.shiftKey && e.key === 'Enter') {
            e.preventDefault();
            if (searchState.matches.length > 0) navigatePrevious();
          }
          // Enter 导航到下一个
          else if (e.key === 'Enter') {
            e.preventDefault();
            if (searchState.matches.length > 0) navigateNext();
          }
        }
      });
    });

    // 处理搜索
    function handleSearch() {
      const keyword = searchInput.value.trim();

      // 清除之前的高亮
      clearHighlights();

      // 更新搜索状态
      searchState.keyword = keyword;
      searchState.currentIndex = 0;

      // 如果关键词为空，重置 UI 并返回
      if (!keyword) {
        updateUI();
        return;
      }

      // 执行搜索并高亮匹配项
      searchAndHighlight(keyword);
    }

    // 搜索并高亮匹配的文本
    function searchAndHighlight(keyword) {
      // 创建包含所有文本的大字符串
      const searchRoot = document.body;
      const walker = document.createTreeWalker(
        searchRoot,
        NodeFilter.SHOW_TEXT,
        {
          acceptNode: (node) => {
            const parent = node.parentElement;
            if (
              !parent ||
              parent.isContentEditable ||
              /^(script|style|textarea|input|select|noscript|canvas|svg)$/i.test(parent.tagName) ||
              parent.classList.contains('search-container')
            ) {
              return NodeFilter.FILTER_SKIP;
            }
            return NodeFilter.FILTER_ACCEPT;
          }
        },
        false
      );

      // 收集所有文本节点及其位置信息
      const textNodes = [];
      let currentNode;
      let fullText = '';

      while ((currentNode = walker.nextNode())) {
        const nodeText = currentNode.nodeValue;
        textNodes.push({
          node: currentNode,
          start: fullText.length,
          end: fullText.length + nodeText.length,
          text: nodeText
        });
        fullText += nodeText;
      }

      // 使用正则表达式转义处理特殊字符
      const escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
      // 修复：添加对换行符的支持
      const regex = new RegExp(escapedKeyword.replace(/\s+/g, '\\s+'), 'gi');
      const matches = [];
      let match;

      // 查找所有匹配项
      while ((match = regex.exec(fullText)) !== null) {
        const matchStart = match.index;
        const matchEnd = match.index + match[0].length;

        // 找出包含匹配部分的所有文本节点
        const nodesInMatch = textNodes.filter(nodeInfo => {
          return nodeInfo.start < matchEnd && nodeInfo.end > matchStart;
        });

        if (nodesInMatch.length > 0) {
          matches.push({
            start: matchStart,
            end: matchEnd,
            text: match[0],
            nodes: nodesInMatch
          });
        }
      }

      searchState.matches = matches;
      highlightMatches(matches);
      updateUI();

      if (matches.length > 0) {
        navigateToMatch(0);
      }
    }

    // 高亮匹配项
    function highlightMatches(matches) {
      const highlights = [];
      
      matches.forEach((match, index) => {
        const { nodes, start, end } = match;
        
        nodes.forEach((nodeInfo, i) => {
          const node = nodeInfo.node;
          const nodeStart = nodeInfo.start;
          const nodeEnd = nodeInfo.end;

          // 计算在当前文本节点中的偏移量
          let offsetStart = Math.max(0, start - nodeStart);
          let offsetEnd = Math.min(node.nodeValue.length, end - nodeStart);
          
          // 如果当前节点包含匹配部分
          if (offsetStart < offsetEnd) {
            const range = document.createRange();
            range.setStart(node, offsetStart);
            range.setEnd(node, offsetEnd);
            
            // 创建高亮元素
            const highlight = document.createElement('mark');
            highlight.className = index === searchState.currentIndex 
              ? 'highlight highlight-current' 
              : 'highlight';
            highlight.dataset.matchIndex = index;
            
            // 将匹配的文本内容移入高亮元素
            const fragment = range.extractContents();
            highlight.appendChild(fragment);
            range.insertNode(highlight);
            
            // 记录高亮元素
            highlights.push(highlight);
          }
        });
      });

      searchState.highlights = highlights;
    }

    // 清除所有高亮
    function clearHighlights() {
      // 递归处理嵌套的高亮元素
      const removeHighlights = (parent) => {
        const highlights = parent.querySelectorAll('mark.highlight');
        highlights.forEach(highlight => {
          // 将高亮元素内的文本直接放回文档中
          const parentNode = highlight.parentNode;
          while (highlight.firstChild) {
            parentNode.insertBefore(highlight.firstChild, highlight);
          }
          parentNode.removeChild(highlight);
        });
      };
      
      // 从主内容区域开始清除高亮
      const content = document.querySelector('.main-content');
      removeHighlights(content);
      
      // 重置搜索状态
      searchState.matches = [];
      searchState.currentIndex = 0;
      searchState.highlights = [];
      updateUI();
    }

    // 导航到上一个匹配项
    function navigatePrevious() {
      if (searchState.matches.length === 0) return;

      searchState.currentIndex =
        (searchState.currentIndex - 1 + searchState.matches.length) % searchState.matches.length;

      navigateToMatch(searchState.currentIndex);
    }

    // 导航到下一个匹配项
    function navigateNext() {
      if (searchState.matches.length === 0) return;

      searchState.currentIndex = (searchState.currentIndex + 1) % searchState.matches.length;

      navigateToMatch(searchState.currentIndex);
    }

    // 导航到指定匹配项
    function navigateToMatch(index) {
      // 移除之前的当前高亮
      const prevHighlight = document.querySelector('mark.highlight-current');
      if (prevHighlight) {
        prevHighlight.classList.remove('highlight-current');
      }

      // 添加新的当前高亮
      const currentHighlight = document.querySelector(`mark[data-match-index="${index}"]`);
      if (currentHighlight) {
        currentHighlight.classList.add('highlight-current');

        // 平滑滚动到当前高亮
        currentHighlight.scrollIntoView({
          behavior: 'smooth',
          block: 'center'
        });

        // 添加闪烁动画效果
        currentHighlight.classList.add('animate-pulse');
        setTimeout(() => {
          currentHighlight.classList.remove('animate-pulse');
        }, 1000);
      }

      updateUI();
    }

    // 更新 UI 状态
    function updateUI() {
      const { matches, currentIndex } = searchState;
      const hasMatches = matches.length > 0;

      // 更新按钮状态
      prevBtn.disabled = !hasMatches;
      nextBtn.disabled = !hasMatches;

      // 更新匹配计数
      matchCount.textContent = hasMatches
        ? `${currentIndex + 1}/${matches.length}`
        : '0/0';

      // 搜索无结果时显示错误状态
      if (searchInput.value.trim() && !hasMatches) {
        searchInput.classList.add('border-red-500');
        searchInput.classList.add('focus:ring-red-500/50');
      } else {
        searchInput.classList.remove('border-red-500');
        searchInput.classList.remove('focus:ring-red-500/50');
      }
    }
  </script>
</body>

</html>

通过开始结束标识点来设置选中蒙版效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本蒙版覆盖层演示</title>
  <style>
    .overlay {
      position: absolute;
      background-color: rgba(255, 255, 0, 0.3); /* 黄色半透明 */
      pointer-events: none; /* 允许点击穿透覆盖层 */
      z-index: 1;
    }
    .content {
      position: relative;
      display: inline-block;
    }
  </style>
</head>
<body>
  <div class="content">
    <p>这是一段普通文本。</p>
    <p id="start">这是开始节点。</p>
    <p>这是需要添加蒙版的中间文本内容。</p>
    <p id="end">这是结束节点。</p>
    <p>这是一段普通文本。</p>
  </div>
  <button onclick="addOverlay()">添加蒙版</button>

  <script>
    function addOverlay() {
      // 获取开始和结束节点
      const startNode = document.getElementById('start');
      const endNode = document.getElementById('end');
      
      // 创建 Range 对象并设置范围
      const range = document.createRange();
      range.setStartBefore(startNode);
      range.setEndAfter(endNode);
      
      // 获取范围的边界框
      const rects = range.getClientRects();
      
      // 清除现有覆盖层
      document.querySelectorAll('.overlay').forEach(el => el.remove());
      
      // 为每个矩形区域创建覆盖层
      for (let rect of rects) {
        const overlay = document.createElement('div');
        overlay.className = 'overlay';
        
        // 设置覆盖层位置和大小
        overlay.style.left = `${rect.left + window.scrollX}px`;
        overlay.style.top = `${rect.top + window.scrollY}px`;
        overlay.style.width = `${rect.width}px`;
        overlay.style.height = `${rect.height}px`;
        
        document.body.appendChild(overlay);
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滚动文本蒙版演示</title>
  <style>
    .content-container {
      position: relative;
      width: 400px;
      height: 200px;
      overflow: auto;
      border: 1px solid #ccc;
    }
    .content {
      padding: 16px;
    }
    .overlay-container {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .overlay {
      position: absolute;
      background-color: rgba(255, 255, 0, 0.3);
      z-index: 1;
    }
    .highlight { background-color: yellow; }
  </style>
</head>
<body>
  <div class="content-container" id="scrollContainer">
    <div class="overlay-container" id="overlayContainer"></div>
    <div class="content">
      <p>这是一段普通文本。</p>
      <p id="start">这是<span class="highlight">开始</span>节点。</p>
      <p>这是需要添加蒙版的中间文本内容。</p>
      <p>这是需要添加蒙版的中间文本内容。</p>
      <p>这是需要添加蒙版的中间文本内容。</p>
      <p>这是需要添加蒙版的中间文本内容。</p>
      <p id="end">这是<span class="highlight">结束</span>节点。</p>
      <p>这是一段普通文本。</p>
      <p>这是一段普通文本。</p>
      <p>这是一段普通文本。</p>
      <p>这是一段普通文本。</p>
    </div>
  </div>
  <button onclick="addOverlay()">添加蒙版</button>

  <script>
    let overlays = [];
    const scrollContainer = document.getElementById('scrollContainer');
    const overlayContainer = document.getElementById('overlayContainer');

    function addOverlay() {
      // 清除现有覆盖层
      overlays.forEach(el => el.remove());
      overlays = [];
      
      // 获取开始和结束节点
      const startNode = document.getElementById('start');
      const endNode = document.getElementById('end');
      
      // 创建 Range 对象并设置范围
      const range = document.createRange();
      range.setStartBefore(startNode);
      range.setEndAfter(endNode);
      
      // 获取范围的边界框（相对于视口）
      const rects = range.getClientRects();
      
      // 为每个矩形区域创建覆盖层
      for (let rect of rects) {
        const overlay = document.createElement('div');
        overlay.className = 'overlay';
        
        // 设置覆盖层位置和大小（相对于滚动容器）
        updateOverlayPosition(overlay, rect);
        
        overlayContainer.appendChild(overlay);
        overlays.push(overlay);
      }
      
      // 监听滚动事件，更新覆盖层位置
      scrollContainer.addEventListener('scroll', updateAllOverlays);
    }

    function updateOverlayPosition(overlay, rect) {
      // 获取滚动容器的位置和滚动偏移
      const containerRect = scrollContainer.getBoundingClientRect();
      const scrollLeft = scrollContainer.scrollLeft;
      const scrollTop = scrollContainer.scrollTop;
      
      // 设置覆盖层位置（相对于容器）
      overlay.style.left = `${rect.left - containerRect.left + scrollLeft}px`;
      overlay.style.top = `${rect.top - containerRect.top + scrollTop}px`;
      overlay.style.width = `${rect.width}px`;
      overlay.style.height = `${rect.height}px`;
    }

    function updateAllOverlays() {
      // 获取开始和结束节点
      const startNode = document.getElementById('start');
      const endNode = document.getElementById('end');
      
      // 创建 Range 对象并设置范围
      const range = document.createRange();
      range.setStartBefore(startNode);
      range.setEndAfter(endNode);
      
      // 获取新的边界框
      const rects = range.getClientRects();
      
      // 更新每个覆盖层位置
      rects.forEach((rect, i) => {
        if (overlays[i]) {
          updateOverlayPosition(overlays[i], rect);
        }
      });
    }
  </script>
</body>
</html>

js判断浏览器是否支持某个字体

其中fontFamily参数是必须的，为CSS中font-family设置的web可识别的字体名称，例如宋体'simsun'，微软雅黑'Microsoft Yahei'等。具体名称是什么可以参见文章：“CSS font-family常见中文字体对应的英文名称”。

1	isSupportFontFamily(fontFamily);

js获取点击位置元素及文本偏移量

document.body.onmousedown = e=> {
    const { clientX, clientY } = e;
    if (document.caretPositionFromPoint) {
        range = document.caretPositionFromPoint(clientX, clientY);
        console.log('new:', range)
    } else if (document.caretRangeFromPoint) {
        // 使用非标准的老的API代替
        range = document.caretRangeFromPoint(clientX, clientY);
        console.log('old:',range)
    } else {
        return;
    }
}

展开全文 >>

python插件

2024-12-30

收集一些有趣的 python 插件

MarkItDown

微软官方推出的工具，将各种格式的文件（主要是 Office 文件）转成 Markdown 格式。标题是 GitHub 仓库链接，下面是线上体验。除了python 命令式，还支持api方式调用

more >>

展开全文 >>

windows 系统相关知识

2024-10-08

收集在使用windows系统中遇到的问题及相关知识汇总

more >>

展开全文 >>

chrome 插件

2024-07-19

Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包.

v2版本已经逐渐不在被支持，以v3语法为基础的简单笔记

more >>

展开全文 >>

java plugins

2024-07-05

Vosk

集成本地语音转文字服务，不依赖第三方

Vosk是言语识别工具包。Vosk最好的事情是：

支持二十+种语言 - 中文，英语，印度英语，德语，法语，西班牙语，葡萄牙语，俄语，土耳其语，越南语，意大利语，荷兰人，加泰罗尼亚语，阿拉伯, 希腊语, 波斯语, 菲律宾语，乌克兰语, 哈萨克语, 瑞典语, 日语, 世界语, 印地语, 捷克语, 波兰语, 乌兹别克语, 韩国语, 塔吉克语

移动设备上脱机工作-Raspberry Pi，Android，iOS

使用简单的 pip3 install vosk 安装

每种语言的手提式模型只有是50Mb, 但还有更大的服务器模型可用

提供流媒体API，以提供最佳用户体验（与流行的语音识别python包不同）

还有用于不同编程语言的包装器-java / csharp / javascript等

可以快速重新配置词汇以实现最佳准确性

支持说话人识别

Stirling-Tools

这是一个使用 Docker 的强大的、本地托管的基于 Web 的 PDF 操作工具。它使您能够对 PDF 文件执行各种操作，包括拆分、合并、转换、重新组织、添加图像、旋转、压缩等。这个本地托管的 Web 应用程序已经发展到包含一套全面的功能，可以满足您的所有 PDF 需求。

展开全文 >>

nextjs基础

2024-06-25

Next.js是一个基于React的开源JavaScript框架，旨在简化React应用程序的开发流程，并提供更好的性能和开发体验。

它的诞生背景是基于开发者和企业对构建更快、更优化的Web应用程序的需求，特别是在服务端渲染（SSR）和搜索引擎优化（SEO）方面。

官方文档

more >>

展开全文 >>

计算机网络

2024-06-22

概述

计算机网络各类应用

信息发布和浏览
通信和交流
休闲和娱乐
资源共享
电子商务
远程协作
网上办公
…

more >>

展开全文 >>

h5开发

2024-05-28

最近开发了app项目。使用的h5项目然后套壳成app。记录下过程

h5项目采用的 vite+vue3+vant

h5文档

套壳方式：

1、hbuildX 云打包

window.plus 是 HBuilderX 和 uni-app 提供的 API 对象，用于访问设备的原生功能。

if(window.plus){ 
    plusReady(); 
}else{ 
    document.addEventListener( "plusready", plusReady, false ); 
} // 扩展API准备完成后要执行的操作 
function plusReady(){ 
    plus.android.requestPermissions(['android.permission.RECORD_AUDIO'], function(e) {
        if(e.deniedAlways.length>0){	//权限被永久拒绝
            // 弹出提示框解释为何需要定位权限，引导用户打开设置页面开启
            console.log('限被永久拒绝!!! '+e.deniedAlways.toString());
        }
        if(e.deniedPresent.length>0){	//权限被临时拒绝
            // 弹出提示框解释为何需要定位权限，可再次调用plus.android.requestPermissions申请权限
            console.log('权限被临时拒绝!!! '+e.deniedPresent.toString());
        }
        if(e.granted.length>0){	//权限被允许
            //调用依赖获取定位权限的代码
            console.log('权限被允许!!! '+e.granted.toString());
        }
    }, function() {

    })
    
}

2、hbuildX本地打包

3、capacitorjs + Android Studio 打包

4、cordova 打包

more >>

展开全文 >>

高性能网站建设指南

2024-05-11

性能黄金法则(Performance Golden Rule)揭示了只有10%~~20%的最终用户响应时间花在接收所请求的HTML文档上剩下的80%~~90%时间花在为HTML文档所引用的所有组件(图片、脚本、样式表Flash 等)进行的HTTP 请求上。因此，改善响应时间的最简单途径就是减少组件的数量，并由此减少 HTTP 请求的数量

减少http请求

more >>

展开全文 >>

王不留行

js 实用技巧

js实现 ctrl+f 搜索效果

通过开始结束标识点来设置选中蒙版效果

js判断浏览器是否支持某个字体

js获取点击位置元素及文本偏移量

python插件

MarkItDown

windows 系统相关知识

chrome 插件

java plugins

Vosk

nextjs基础

计算机网络

概述

计算机网络各类应用

h5开发

高性能网站建设指南

减少http请求

开发WangEditor插件

js实现 ctrl+f 搜索 效果

通过开始结束标识点来设置选中蒙版效果

js判断浏览器是否支持某个字体

js获取点击位置元素及文本偏移量

概述

计算机网络各类应用

减少http请求

js实现 ctrl+f 搜索效果