js 实战小案例

实战

时间

js 格式化时间

	<script type="text/javascript">function formatDate(date) {  let year = date.getFullYear();  let month = String(date.getMonth() + 1).padStart(2, '0'); // getMonth() 返回的月份是从0开始的，所以要加1，并使用padStart确保总是两位数  let day = String(date.getDate()).padStart(2, '0'); // 使用padStart确保总是两位数  return `${year}-${month}-${day}`;  }  // 使用示例  let date = new Date(); // 你可以传递任何你想要的日期对象  console.log(formatDate(date)); // 输出格式为 "YYYY-MM-DD" 的日期字符串</script>

判断img图片是否存在，不存在给默认

 <img src="${Config.carouselData[i].ext.avatar}" onerror="javascript:this.src='https://game.gtimg.cn/images/fz/cp/a20231206fsn0o2/tx_img.png'" alt="" />

字符串中间“***”代替

 hideString: function (name) {let newStr = '';if (name){if (name.length <= 2) {newStr = name + '*';} else if (name.length >= 3 && name.length <= 4) {let char = '***';newStr = name.substr(0, 1) + char + name.substr(-1, 1);} else if (name.length > 4) {let char = '***';newStr = name.substr(0, 2) + char + name.substr(-2, 2);} else {newStr = name;}}else {newStr = "**";}return newStr;},

是否是Android系统

isAndroid: function () {return /android/i.test(window.navigator.userAgent.toLowerCase());
},

HTML 标签转实体

htmlEncode: function (str) {var simpleStr = str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&#39;').replace(/"/g, '&quot;');return simpleStr;
},

HTML实体 转标签

htmlDecode: function (str) {var simpleStr = str.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&#39;/g, "'").replace(/&quot;/g, '"');return simpleStr;
}

json转对象

JSON.parse(obj)

对象转JSON

JSON.stringify()

JSON.stringify()的几种妙用

  1. 判断数组是否包含某对象，或者判断对象是否相等
//判断数组是否包含某对象
let data = [{name:'echo'},{name:'听风是风'},{name:'天子笑'},],val = {name:'天子笑'};
JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true//判断两数组/对象是否相等
let a = [1,2,3],b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b);//true
  1. 让localStorage/sessionStorage可以存储对象

localStorage/sessionStorage默认只能存储字符串，而实际开发中，我们往往需要存储的数据多为对象类型，那么这里我们就可以在存储时利用json.stringify()将对象转为字符串，而在取缓存时，只需配合json.parse()转回对象即可。

//存
function setLocalStorage(key,val){window.localStorage.setItem(key,JSON.stringify(val));
};
//取
function getLocalStorage(key){let val = JSON.parse(window.localStorage.getItem(key));return val;
};
//测试
setLocalStorage('demo',[1,2,3]);
let  a = getLocalStorage('demo');//[1,2,3]

在这里插入图片描述
3. 实现对象深拷贝

实际开发中，如果怕影响原数据，我们常深拷贝出一份数据做任意操作，其实使用JSON.stringify()与JSON.parse()来实现深拷贝是很不错的选择。

//深拷贝
function deepClone(data) {let _data = JSON.stringify(data),dataClone = JSON.parse(_data);return dataClone;
};
//测试
let arr = [1,2,3],_arr = deepClone(arr);
arr[0] = 2;
console.log(arr,_arr)//[2,2,3]  [1,2,3]

JSON.stringify()与toString()的区别

这两者虽然都可以将目标值转为字符串，但本质上还是有区别的，比如

let arr = [1,2,3];
JSON.stringify(arr);//'[1,2,3]'
arr.toString();//1,2,3

其次，JSON.stringify()的受众更多是对象，而toString()虽然可以将数组转为字符串，但并不能对{name:‘天子笑’}这类对象实现你想要的操作，它的受众更多是数字。

那么大概整理这么多了，后面工作中遇到再添加吧。

获取url

获取url参数
function queryURLParams(URL) {var url = URL.split("?")[1];var obj = {}; // 声明参数对象var arr = url.split("&"); // 以&符号分割为数组for (var i = 0; i < arr.length; i++) {var arrNew = arr[i].split("="); // 以"="分割为数组obj[arrNew[0]] = arrNew[1];}return obj;
}
获取去重后的url
function getUniqueUrl(url) {  // 解析URL的查询字符串部分  const queryParams = new URLSearchParams(url.split('?')[1] || '');  // 创建一个Map来自动去重  const uniqueParams = new Map(queryParams.entries());  // 将去重后的参数转换回字符串  const uniqueQueryString = new URLSearchParams(uniqueParams).toString();  // 如果有参数，则重新构建URL；否则，返回原始URL（不包含查询字符串）  return uniqueQueryString ? `${url.split('?')[0]}?${uniqueQueryString}` : url;  
}  // 使用示例  
const url = location.href;  
const uniqueUrl = getUniqueUrl(url);  console.log(uniqueUrl);

在这里插入图片描述

获取指定的url参数的值
	function getParams(param){try{if (!param) {return '参数不能为空';}// 创建 URLSearchParams 对象并传入要处理的 URLconst params = new URLSearchParams(window.location.search);// 通过 get() 方法获取特定参数的值const value = params.get(param); // 'paramName'为需要获取的参数名称//console.log(value);return value;}catch (e){console.log(e);}}console.log(getParams('a'));
url解码与编码
/**
isTrue  true 解码，false 转码*/
function urlCode(url,isTrue = true){let urls = "";if (isTrue) {urls = decodeURIComponent(uniqueUrl);	}else{urls = encodeURIComponent(uniqueUrl);	}return urls;
}

倒计时为0是才能点击

css样式

    .disabled {pointer-events: none; /* 禁止点击 */}

js文件

    $("#checkBigPag").click( function(event){var i=3;$(".clock1").html("3");var timehwnd=setInterval(function () {i--;if(i <= 0){$('#bigRed').removeClass('disabled'); // 移除 disabled 类名，表示可再次点击$(".clock1").html("0");clearInterval(timehwnd);}else{$('#bigRed').addClass('disabled');$(".clock1").html(""+i+"");}},1000);} );

在这里插入图片描述

正则

手机号（以中国大陆的手机号码为例，支持13、14、15、16、17、18、19开头的号码）：

/^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$/

邮箱：

/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/

网址：

/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/

用户名（以字母或数字开头，可以包含字母、数字、下划线，长度在6~18位之间）：

/^[a-zA-Z0-9_]{6,18}$/

身份证（15位或18位，18位身份证包含校验码）：

/^(^[1-9]\d{5}(?:\d{18}|?:\d{15})$)/

数字：

/^\d+$/

字母：

/^[a-zA-Z]+$/

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/714345.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【go从入门到精通】go包，内置类型和初始化顺序

【go从入门到精通】go包，内置类型和初始化顺序

大家好&#xff0c;这是我给大家准备的新的一期专栏&#xff0c;专门讲golang&#xff0c;从入门到精通各种框架和中间件&#xff0c;工具类库&#xff0c;希望对go有兴趣的同学可以订阅此专栏。 go基础 。 Go文件名&#xff1a; 所有的go源码都是以 ".go" 结尾&…
阅读更多...
Mamba 环境安装：causal-conv1d和mamba-ssm报错解决办法

Mamba 环境安装：causal-conv1d和mamba-ssm报错解决办法

问题描述&#xff1a; 在执行命令 pip install causal_conv1d 和 mamba_ssm 出错&#xff1a; 解决方案&#xff1a; 1、使用网友配置好的Docker环境&#xff0c;参考&#xff1a;解决causal_conv1d和mamba_ssm无法安装 -&#xff1e; 直接使用Mamba基础环境docker镜像 DockH…
阅读更多...
java实现图片转pdf，并通过流的方式进行下载（前后端分离）

java实现图片转pdf，并通过流的方式进行下载（前后端分离）

首先需要导入相关依赖&#xff0c;由于具体依赖本人也不是记得很清楚了&#xff0c;所以简短的说一下。 iText&#xff1a;PDF 操作库&#xff0c;用于创建和操作 PDF 文件。可通过 Maven 或 Gradle 引入 iText 依赖。 MultipartFile&#xff1a;Spring 框架中处理文件上传的类…
阅读更多...
一台工控机的能量

一台工控机的能量

使用Docker搭建EPICS的IOC记录 Zstack EPICS Archiver在小课题组的使用经验 以前电子枪调试&#xff0c;用一台工控机跑起束测后台&#xff0c;这次新光源用的电子枪加工回来又是测试&#xff0c;又是用一台工控机做起重复的事&#xff0c;不过生命在于折腾&#xff0c;重复的…
阅读更多...
stm32——hal库学习笔记(IIC)

stm32——hal库学习笔记(IIC)

一、IIC总线协议介绍&#xff08;掌握&#xff09; 二、AT24C02介绍&#xff08;了解&#xff09; 三、AT24C02读写时序&#xff08;掌握&#xff09; 四、AT24C02驱动步骤&#xff08;掌握&#xff09; 五、编程实战&#xff08;掌握&#xff09; myiic.c #include "./B…
阅读更多...
汽车虚拟仿真技术的实现、应用和未来

汽车虚拟仿真技术的实现、应用和未来

汽车虚拟仿真技术是一种利用计算机模拟汽车运行的技术&#xff0c;以实现对汽车行为的分析、评估和改进。汽车虚拟仿真技术是汽车工业中重要的开发设计和测试工具&#xff0c;可以大大缩短产品研发周期、降低研发成本和提高产品质量。本文将从汽车虚拟仿真技术的实现过程、应用…
阅读更多...
Ubuntu18.04 系统上配置并运行SuperGluePretrainedNetwork（仅使用CPU）

Ubuntu18.04 系统上配置并运行SuperGluePretrainedNetwork（仅使用CPU）

SuperGlue是Magic Leap在CVPR 2020上展示的研究项目&#xff0c;它是一个图神经网络&#xff08;Graph Neural Network&#xff09;和最优匹配层&#xff08;Optimal Matching layer&#xff09;的结合&#xff0c;训练用于对两组稀疏图像特征进行匹配。这个项目提供了PyTorch代…
阅读更多...
前端的文字的字体应该如何设置

前端的文字的字体应该如何设置

要设置文字的字体&#xff0c;在CSS中使用font-family属性。这个属性可以接受一个或多个字体名称作为其值&#xff0c;浏览器会按照列表中的顺序尝试使用这些字体渲染文本。如果第一个字体不可用&#xff0c;浏览器会尝试使用列表中的下一个字体&#xff0c;依此类推。 字体设…
阅读更多...
iOS消息发送流程

iOS消息发送流程

Objc的方法调用基于消息发送机制。即Objc中的方法调用&#xff0c;在底层实际都是通过调用objc_msgSend方法向对象消息发送消息来实现的。在iOS中&#xff0c; 实例对象的方法主要存储在类的方法列表中&#xff0c;类方法则是主要存储在原类中。 向对象发送消息&#xff0c;核心…
阅读更多...
推荐一个屏幕上鼠标高亮显示的小工具

推荐一个屏幕上鼠标高亮显示的小工具

在视频录制等特定场景下&#xff0c;很多人希望在点击鼠标时能够在屏幕上及时进行显示&#xff0c;便于别人发现&#xff0c;提高别人的注意力。 因此&#xff0c;很多录屏软件中都内含显示鼠标点击功能。那如果不支持该怎么办呢&#xff1f;其实&#xff0c;也是可以通过其他工…
阅读更多...
Python 实现Excel自动化办公（上）

Python 实现Excel自动化办公（上）

在Python 中你要针对某个对象进行操作&#xff0c;是需要安装与其对应的第三方库的&#xff0c;这里对于Excel 也不例外&#xff0c;它也有对应的第三方库&#xff0c;即xlrd 库。 什么是xlrd库 Python 操作Excel 主要用到xlrd和xlwt这两个库&#xff0c;即xlrd是读Excel &am…
阅读更多...
算法刷题day20：二分系列

算法刷题day20：二分系列

目录 引言概念一、借教室二、分巧克力三、管道四、技能升级五、冶炼金属六、数的范围七、最佳牛围栏 引言 这几天一直在做二分的题&#xff0c;都是上了难度的题目&#xff0c;本来以为自己的二分水平已经非常熟悉了&#xff0c;没想到还是糊涂了一两天才重新想清楚&#xff0…
阅读更多...
基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的口罩识别系统（Python+PySide6界面+训练代码）

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的口罩识别系统（Python+PySide6界面+训练代码）

摘要&#xff1a;开发口罩识别系统对于提升公共卫生安全和疫情防控具有重要意义。本篇博客详细介绍了如何利用深度学习构建一个口罩识别系统&#xff0c;并提供了完整的实现代码。该系统基于强大的YOLOv8算法&#xff0c;并结合了YOLOv7、YOLOv6、YOLOv5的对比&#xff0c;给出…
阅读更多...
如何更好的引导大语言模型进行编程的高效开发流程？

如何更好的引导大语言模型进行编程的高效开发流程？

这张图片展示了一种如何更好地引导大语言模型进行编程的方法。 首先&#xff0c;最简单也是最有效的方法是让大语言模型重复运行多次&#xff0c;每次增加一些额外的信息&#xff0c;直到获得想要的结果。这种方法虽然简单&#xff0c;但可能需要多次尝试才能得到满意的结果。…
阅读更多...
2024绿色能源、城市规划与环境国际会议(ICGESCE 2024)

2024绿色能源、城市规划与环境国际会议(ICGESCE 2024)

2024绿色能源、城市规划与环境国际会议(ICGESCE 2024) 一、【会议简介】 随着全球气候变化和环境问题日益严重&#xff0c;绿色能源和可持续发展已成为全球关注的焦点。本次会议旨在汇聚全球在绿色能源、城市规划与环境领域的专家、学者和实践者&#xff0c;共同探讨和分享关于…
阅读更多...
Vue.js大师: 构建动态Web应用的全面指南

Vue.js大师: 构建动态Web应用的全面指南

VUE ECMAScript介绍什么是ECMAScriptECMAScript 和 JavaScript 的关系ECMAScript 6 简介 ES6新特性let基本使用const不定参数箭头函数对象简写模块化导出导入a.jsb.jsmain.js Vue简介MVVM 模式的实现者——双向数据绑定模式 Vue环境搭建在页面引入vue的js文件即可。创建div元素…
阅读更多...
1、jQuery介绍、css()、选择器、事件、动画

1、jQuery介绍、css()、选择器、事件、动画

一、jQuery介绍&#xff1f; 1、什么是jQuery&#xff1f; 是一个JavaScript函数库 2、jQuery特点 写的少&#xff0c;做的多 3、jQuery的安装 直接下载引入 <script src"jquery-1.10.2.min.js"></script>通过cdn引入 <script src"https…
阅读更多...
python自动化之项目架构搭建与思路讲解（第二天）

python自动化之项目架构搭建与思路讲解（第二天）

1.自动化测试的概念 自动化测试是指使用自动化工具和脚本来执行测试任务，以验证软件或系统的正确性和稳定性。它可以提高测试的效率和准确性，并节约时间和成本。 2.自动化脚本编写的思路 xmind文档如有需要，可在资源里自行下载 3.项目代码工程创建 lib ：基本代码库包 …
阅读更多...
瑞_Redis_Redis命令

瑞_Redis_Redis命令

文章目录 1 Redis命令Redis数据结构Redis 的 key 的层级结构1.0 Redis通用命令1.0.1 KEYS1.0.2 DEL1.0.3 EXISTS1.0.4 EXPIRE1.0.5 TTL 1.1 String类型1.1.0 String类型的常见命令1.1.1 SET 和 GET1.1.2 MSET 和 MGET1.1.3 INCR和INCRBY和DECY1.1.4 SETNX1.1.5 SETEX 1.2 Hash类…
阅读更多...
Android 12.0 framework关于systemUI定制之导航栏透明背景的功能实现

Android 12.0 framework关于systemUI定制之导航栏透明背景的功能实现

1.概述 在12.0的系统rom产品定制化开发中，在对于系统原生SystemUI的导航栏背景在沉浸式导航栏的 情况下默认是会随着背景颜色的变化而改变的，在一些特定背景下导航栏的背景也是会改变的，所以由于产品开发需要 要求需要设置导航栏背景为透明的，所以就需要在Activity创建的时…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023