js 实战小案例

news2025/1/29 13:49:50

实战

时间

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 对象并传入要处理的 URL
			const 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.coloradmin.cn/o/1474202.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何用生成式AI创建食谱,解决五岁孩童挑食问题?

如何处理孩子挑食问题&#xff0c;对父母来说可能是一个挑战。这需要耐心、创造力和策略的结合。在深入具体策略之前&#xff0c;了解五岁儿童的口味偏好仍在发展中&#xff0c;他们的饮食行为受多种因素影响&#xff0c;包括气质、接触不同类型食物的程度以及父母对饮食的态度…

Mycat核心教程--mycat实战应用【一】

Mycat核心教程--mycat实战应用 一、MyCat概述1.1.Mycat 是数据库中间件1.2.为什么要用Mycat1.3.数据库中间件对比1.4.Mycat的官网1.4.1.Mycat的官网:[http://www.mycat.org.cn/](http://www.mycat.org.cn/)1.4.2.右上角下载里面有个文件下载服务&#xff0c;点进去发现无法访问…

高数考研 -- 公式总结(更新中)

1. 两个重要极限 (1) lim ⁡ x → 0 sin ⁡ x x 1 \lim _{x \rightarrow 0} \frac{\sin x}{x}1 limx→0​xsinx​1, 推广形式 lim ⁡ f ( x ) → 0 sin ⁡ f ( x ) f ( x ) 1 \lim _{f(x) \rightarrow 0} \frac{\sin f(x)}{f(x)}1 limf(x)→0​f(x)sinf(x)​1. (2) lim ⁡…

BUUCTF crypto做题记录(9)新手向

一、rsa2 得到题目代码如下&#xff1a; N 101991809777553253470276751399264740131157682329252673501792154507006158434432009141995367241962525705950046253400188884658262496534706438791515071885860897552736656899566915731297225817250639873643376310103992170…

文本嵌入:综合指南,文本嵌入的演变、可视化和应用

原文链接&#xff1a;https://towardsdatascience.com/text-embeddings-comprehensive-guide-afd97fce8fb5 2024 年 2 月 13 日 作为人类&#xff0c;我们可以阅读和理解文本(至少其中一些文本)。相反&#xff0c;计算机“用数字思考”&#xff0c;所以它们不能自动掌握单词和…

LabVIEW高精度闭式微小型循环泵性能测试

LabVIEW高精度闭式微小型循环泵性能测试 开发了一套基于LabVIEW的高精度闭式微小型循环泵性能测试系统&#xff0c;旨在通过先进的测试技术和虚拟仪器技术&#xff0c;对微小型循环泵的性能进行精确测量和分析&#xff0c;从而优化泵的设计和性能&#xff0c;提高其在航空、机…

【经验】vscode 鼠标拖曳不能选中整行文字,只能选中纵向矩形范围

1、问题描述 不知道昨天操作vscode设置界面时&#xff0c;误选择了啥&#xff0c;导致鼠标拖曳不能选中整行文字&#xff0c;只能选中纵向矩形范围&#xff0c;现象如下&#xff1a; 2、解决方法 1&#xff09;打开设置界面 点击左下角按键&#xff0c;选择“设置” 2&…

POST参数里加号+变成空格的问题处理

今天遇到个这样的问题&#xff0c;从前端传到后端的加密报文&#xff0c;里面包含了号&#xff0c;但在后端日志输出看出&#xff0c;变成空格。这个是由于经过RSA加密后引起的 解决办法&#xff1a; 1.前端转码&#xff1a;使用encodeURIComponent对参数进行转码 2.后端解码…

全面了解云渲染:一篇文章带你掌握关键信息

随着数字内容创作领域的飞速发展&#xff0c;伴随着技术设备的持续升级&#xff0c;我们见证了渲染技术的一个重要转变&#xff1a;从传统依赖个人电脑的方式&#xff0c;转向利用云渲染服务。云渲染利用了其远程强大的处理能力&#xff0c;可经济高效地完成复杂的渲染任务。这…

搜维尔科技:第九届元宇宙数字人大赛,参赛小组报名确认公告

各位参赛选手大家好&#xff0c;近期已收到新增报名信息如下表&#xff0c;请各位参赛选手确认&#xff0c;如果信息有误或信息不完整请电话联系赛务组工作人员进行更正 随着元宇宙时代的来临&#xff0c;数字人设计成为了创新前沿领域之一。为了提高大学生元宇宙虚拟人角色策划…

IP对亚马逊测评自养号有多么的重要?

在亚马逊测评自养号的实践中&#xff0c;IP地址是至关重要的因素。IP协议为互联网上的每个网络和主机提供了一个统一的地址格式&#xff0c;确保了每个地址的唯一性。通过使用IP地址&#xff0c;我们可以屏蔽物理地址的差异&#xff0c;使得网络通信得以顺利进行。 因此&#x…

【架构】GPU架构总结

文章目录 GPU架构GPU渲染内存架构Streaming Multiprocessor(SM)CUDA CoreTensor CoreRT CoreCPU-GPU异构系统GPU资源管理模型 GPU架构演进G80 架构Fermi 架构Maxwell架构Tesla架构Pascal架构Volta 架构Turing架构Ampere 架构Hopper架构 参考文献 GPU架构 主要组成包括&#xf…

Layer1 明星项目 Partisia Blockchain 何以打造互操作、可创新的数字经济网络

我们的目标是创建一个以用户为中心的全新数字经济网络&#xff1a;在去信任化和公平透明的环境下&#xff0c;所有的隐私数据都能够得到天然保障&#xff0c;企业、用户等各角色的协作与共享将会更顺利地进行。 —— Partisia Blockchain 团队 作为一个以 Web3 安全为技术方向的…

日更【系统架构设计师知识总结2】指令系统(结合真题)

【原创精华】结合老师的讲授、耗费三个小时的精华总结对正在备考的你一定有用&#xff01;&#xff01;自己一点点手打、总结的脑图&#xff0c;把散落在课本以及老师讲授的知识点合并汇总&#xff0c;反复提炼语言&#xff0c;形成知识框架。希望能给同样在学习的伙伴一点帮助…

IT廉连看——C语言——结构体

IT廉连看——C语言——结构体 一、结构体的声明 1.1 结构的基础知识 结构是一些值的集合&#xff0c;这些值称为成员变量。结构的每个成员可以是不同类型的变量。 1.2 结构的声明 struct tag {member-list; }variable-list; 例如描述一个学生&#xff1a;typedef struct Stu…

音视频数字化(数字与模拟-电视)

上一篇文章【音视频数字化(数字与模拟-音频广播)】谈了音频的广播,这次我们聊电视系统,这是音频+视频的采集、传输、接收系统,相对比较复杂。 音频系统的广播是将声音转为电信号,再调制后发射出去,利用“共振”原理,收音机接收后解调,将音频信号还原再推动扬声器,我…

Mysql 的高可用详解

Mysql 高可用 复制 复制是解决系统高可用的常见手段。其思路就是&#xff1a;不要把鸡蛋都放在一个篮子里。 复制解决的基本问题是让一台服务器的数据与其他服务器保持同步。一台主库的数据可以同步到多台备库上&#xff0c;备库本身也可以被配置成另外一台服务器的主库。主…

windows11本地深度学习环境搭建Anacond,keras,tensorflow,pytorch, jupyter notebook

前言 工欲善其事&#xff0c;必先利其器。 第一步 安装Anaconda 下载地址&#xff1a; https://www.anaconda.com/download 路径默认 这里都勾选上 然后会卡在这里&#xff0c;卡很久&#xff0c;不用管&#xff0c;等着就行 第二步 配置环境 conda env list 列出所有…

LDR6328 PD诱骗芯片:优化小家电Type-C接口充电体验与安全性的关键技术

随着科技的日新月异&#xff0c;小家电设备日趋智能化&#xff0c;Type-C接口因其便捷性在小家电领域的应用也日益增多。然而&#xff0c;Type-C接口的多样性导致设备在识别和使用不同充电方式时面临挑战。为应对这一问题&#xff0c;PD诱骗芯片应运而生&#xff0c;成为解决充…

CentOS 7全系列免费

CentOS 7 全系列免费&#xff1a;桌面版、工作站版、服务器版等等………… 上文&#xff0c;关于CentOS 7这句话&#xff0c;被忽略了。 注意版本&#xff1a;知识产权、网络安全。