收集项目中用到的工具函数

工具函数

收集项目中常用的工具函数,以备后用,使用 TS 编写。

1. 时间格式化

/**
 * 格式化时间格式
 * @param {*} value 传入时间(单位秒)
 * @returns 返回时间格式 XX 天 XX 小时 XX 分钟 XX 秒
 */
export const formatSecond = function (value: number): string {
  value = value ?? 0;
  let secondTime = parseInt(value); // 秒
  let minuteTime = 0; // 分
  let hourTime = 0; // 小时
  let dayTime = 0; // 天
  let result = '';
  //如果秒数不小于 60,将秒数转换成整数
  if (secondTime >= 60) {
    //获取分钟,除以 60 取整数,得到整数分钟
    minuteTime = parseInt(secondTime / 60);
    //获取秒数,秒数取佘,得到整数秒数
    secondTime = parseInt(secondTime % 60);
    //如果分钟不小于 60,将分钟转换成小时
    if (minuteTime >= 60) {
      //获取小时,获取分钟除以 60,得到整数小时
      hourTime = parseInt(minuteTime / 60);
      //获取小时后取佘的分,获取分钟除以 60 取佘的分
      minuteTime = parseInt(minuteTime % 60);
      //如果小时数不小于 24,将小时转换成天
      if (hourTime >= 24) {
        //获取天,获取小时除以 24,得到整数天
        dayTime = parseInt(hourTime / 24);
        //获取天后取佘的小时
        hourTime = parseInt(hourTime % 24);
      }
    }
  }
  if (secondTime > 0) {
    result = `${parseInt(secondTime)} 秒`;
  }
  if (minuteTime > 0) {
    result = `${parseInt(minuteTime)} 分 ${result}`;
  }
  if (hourTime > 0) {
    result = `${parseInt(hourTime)} 时 ${result}`;
  }
  if (dayTime > 0) {
    result = `${parseInt(dayTime)} 天 ${result}`;
  }
  return result;
};

2. 系统、环境和浏览器

/**
 * 判断是否 PC
 */
export const isPC = (): boolean => {
  const userAgentInfo = navigator.userAgent;
  const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
  let flag = true;
  for (let v = 0; v < Agents.length; v++) {
    if (userAgentInfo.indexOf(Agents[v]) > 0) {
      flag = false;
      break;
    }
  }
  return flag;
};

/**
 * 判断是否微信环境(微信app,桌面微信软件等)
 */
export const isWechat = (): boolean => {
  return /MicroMessenger/i.test(window.navigator.userAgent);
};

/**
 * 判断是否 IOS 系统
 */
export const isIOS = (): boolean => {
  const u = navigator.userAgent;
  return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
};

/**
 * 判断是否 Android 系统
 */
export const isAndroid = (): boolean => {
  const u = navigator.userAgent;
  return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
};

/**
 * 浏览器
 */
export const getBrowser = () => {
  let explorer = navigator.userAgent.toLowerCase();
  let browser = "";
  if (
    explorer.indexOf("msie") > -1 ||
    !!window.ActiveXObject ||
    "ActiveXObject" in window
  ) {
    browser = "IE";
  } else if (explorer.indexOf("chrome") > -1) {
    browser = "chrome";
  } else if (explorer.indexOf("firefox") > -1) {
    browser = "firefox";
  } else if (explorer.indexOf("safari") > -1) {
    browser = "safari";
  } else if (explorer.indexOf("opera") > -1) {
    browser = "opera";
  }
  return browser;
}

3. 获取富文本内容中的图片

/**
 * 获取富文本内容中的图片
 */
export const getImgList = (richText: string): string[] => {
  // 如果富文本内容为空,则没有图片
  if (!richText) {
    return [];
  }

  const regex = /<img/g;
  const imgTags: string[] = richText.match(regex)!;
  let imgLen = 0;
  if (imgTags === null) {
    return [];
  } else {
    imgLen = imgTags.length;
  }

  // 没有找到图片
  if (imgLen === 0) {
    return [];
  }

  const imgElementList: string[] = [];
  const imgSrcList: string[] = [];

  richText.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match: string, capture: string): string => {
    imgSrcList.push(capture);
    imgElementList.push(match);
    return capture;
  });

  console.log('imgElementList', imgElementList); // 图片标签列表
  console.log('imgSrcList', imgSrcList); // 图片 src 属性值列表

  return imgSrcList;
};

4. 数字隐射字母

// 数字映射字母,如:{1 => "A"}、{2 => "B"}
const relationArr: Array<Array<string | number>> = [];
for (let i = 0; i < 26; i++) {
  const symbol: string = String.fromCharCode(65 + i);
  relationArr.push([i + 1, `${symbol}`]);
}
const indexSymbolRelationMap = new Map();
relationArr.forEach(([key, value]) => indexSymbolRelationMap.set(key, value));

// 使用
indexSymbolRelationMap.get(index + 1);  // index = 1, => A

原文链接:https://www.cnblogs.com/xinjie-just/p/17361594.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:收集项目中用到的工具函数 - Python技术站

(0)
上一篇 2023年4月28日
下一篇 2023年4月30日

相关文章

  • JS性能优化实现方法及优点进行

    JS性能优化实现方法及优点 JS性能优化是Web前端开发中的重要任务之一,优化JS性能有助于提高网站的访问速度和用户体验。本攻略将从以下几个方面进行详细讲解。 1. 减少DOM操作 DOM操作是JS性能影响最大的一部分,频繁的DOM操作会引起浏览器的重绘和回流,从而影响页面的性能。因此,减少DOM操作是JS性能优化的一种有效方法。 示例1:在DOM结构中添加…

    JavaScript 2023年6月10日
    00
  • [js+css]点击隐藏层,点击另外层不能隐藏原层

    针对“[js+css]点击隐藏层,点击另外层不能隐藏原层”的需求,需要用到JavaScript和CSS的结合。下面是实现这个效果的完整攻略: 步骤 1:HTML结构 首先,需要定义两个层,一个是要隐藏的层,一个是阻止隐藏的层。例如: <div class="hide" id="hide-layer">这是要…

    JavaScript 2023年6月11日
    00
  • 关于JS中的作用域中的问题思考分享

    关于JS中的作用域问题,我可以给你一个完整的攻略。以下是具体内容: 什么是作用域? 在JavaScript中,作用域指的是变量和函数可访问的区域。它主要分为全局作用域和局部作用域。 全局作用域:在代码的任何地方都可以访问,并且被定义在全局作用域中的变量和函数可以在任何地方调用。 局部作用域:这种作用域被定义在函数中,只允许在函数内部访问。局部作用域可以帮助提…

    JavaScript 2023年5月28日
    00
  • 3分钟精通高阶前端随手写TS插件

    接下来我将详细讲解如何通过3分钟精通高阶前端随手写TS插件的攻略。 1. 了解 TypeScript TypeScript是微软开源的高级类型应用程序设计语言。它是JavaScript的一种超集,支持静态类型检查、编译时类型检查、类型推断等功能。在使用TypeScript之前,需要了解TypeScript的基本概念、语法和用法。 2. 安装 TypeScri…

    JavaScript 2023年6月11日
    00
  • javascript 内置对象及常见API详细介绍

    JavaScript 内置对象及常见 API 详细介绍 什么是 JavaScript 的内置对象? Javascript 的内置对象是指在 JavaScript 运行环境中自带的对象,它们包含了我们在编写 JavaScript 代码时需要调用的各种方法和属性,用它们可以方便地完成各种任务。常见的内置对象包括:Object、Array、Function、Dat…

    JavaScript 2023年5月19日
    00
  • 使用3D引擎threeJS实现星空粒子移动效果

    使用3D引擎threeJS实现星空粒子移动效果的完整攻略包含以下几个步骤: 步骤一:引入three.js 首先需要在代码中引入three.js这个库,代码如下: <script src="https://cdn.bootcdn.net/ajax/libs/three.js/105/three.min.js"></scri…

    JavaScript 2023年6月11日
    00
  • JavaScript高级程序设计(第三版)学习笔记1~5章

    下面是“JavaScript高级程序设计(第三版)学习笔记1~5章”的完整攻略: 学习笔记1~5章 第1章:JavaScript简介 本章主要介绍了JavaScript的历史以及它的基础知识,包括它的用途、特点、语法、数据类型、运算符、流程控制等等。需要注意的是,JavaScript与Java虽然名字相似,但是它们是不同的语言,只是在某些方面有相似之处。 第…

    JavaScript 2023年5月18日
    00
  • VuePress使用Algolia实现全文搜索

    下面我将为你详细讲解“VuePress使用Algolia实现全文搜索”的完整攻略。 什么是VuePress? VuePress是一款基于Vue.js的静态网站生成器,它基于Markdown文件进行内容编写,具有文档编写、主题定制、SEO优化、全文搜索等功能,为个人博客或技术文档提供了一种快速搭建的方案。 什么是Algolia? Algolia是一款强大的全文…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部