当前位置: 首页 > news >正文

后盾人JS--JS值类型使用

章节介绍与类型判断

看看构造函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd=[]let hdcms = {}console.log(hd instanceof Array)        //判断是否在原型链上(是否由这个构造函数创建出来console.log(hdcms instanceof Object)</script>
</body>
</html>

都是true 

字符串转义与模板字面量使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = 'houdun\'人'console.log(hd)</script>
</body>
</html>

加个\就成了 

模板字面量浅谈使用技巧

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let lessons= [{title:"媒体查询响应式布局"},{title:"FLEX弹性盒模型"},{title:"GRID栅格系统"}]function template(){return `<ul>${lessons.map(item=>`<li>${item.title}</li>`).join('')}</ul>`}document.body.innerHTML=template()
</script>
</body>
</html>

神奇的标签模板实例操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let name = '后盾人'let web = "houdunren.com"console.log(tag`在线教程${name},网址是${web}`)function tag(strings,...vars){console.log(vars)console.log(strings)}</script>
</body>
</html>

 

打印出来是这样的

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>let lessons = [{ title: "后盾人媒体查询响应式布局", author: '后盾人向军' },{ title: "FLEX弹性盒模型", author: '后盾人' },{ title: "GRID栅格系统后盾人教程", author: '古老师' }]function template() {return `<ul>${lessons.map(item => links`<li>作者:${item.author},课程:${item.title}</li>`).join('')}</ul>`}function links(strings, ...vars) {return strings.map((str, key) => {      //将字符替换成链接return str + (vars[key] ? vars[key].replace("后盾人",`<a href="https://www.houdunren.com">     后盾人</a>`) : "")  //变量数量多}).join('')}document.body.innerHTML += template()</script>
</body></html>

这是把字符替换成链接了 

字符串及基本函数使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="text" name="password"><span></span><script>let ps = document.querySelector("[name='password']")ps.addEventListener('keyup',function(){this.value = this.value.trim()let error = " "let span = document.getElementsByTagName('span')if(this.value.length<5){error="密码不能小于五位"}span[0].innerHTML=error})</script>
</body>
</html>

 可以做渐变(可能)效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = 'houdunren'for(let i =0;i<hd.length;i++){let span = document.createElement("span")span.style.fontSize = (i+1)*10+'px'span.innerHTML = hd[i]document.body.append(span)}</script>
</body>
</html>

字符串截取操作

让我们看一下字符串的截取操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = "houdunren.com"console.log(hd.slice(1,3))console.log(hd.substr(1,3))console.log(hd.substring(1,3))console.log(hd.slice(-3,-1))console.log(hd.substr(-3))console.log(hd.substring(-3,2))</script>
</body>
</html>

 

解锁字符串使用技巧

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>const hd = "houdunren.com"//从哪个位置开始找,找不到就是-1if (hd.indexOf('h') != -1) {console.log('找到了')}console.log(hd.includes("h",8))     //和上面的作用一样console.log(hd.startsWith('H'))     //返回布尔类型,看是否在开始console.log(hd.lastIndexOf('o',9))  //从后向前查</script>
</body></html>

这是数组的some方法 

 

 查找字符串方法:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const word = ["php","css"]const string = "我喜欢在后盾人学习php与css芝士"const status = word.some(word=>{console.log(word)return string.includes(word)})if(status){console.log('找到了')}</script>
</body>
</html>

字符串替换标题关键词

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const hd = "houdunren.com"console.log(hd.replace('houdunren','hdcms'))const word = ["php" , "css"]const string = "我其实不喜欢学php和css"const repaceString = word.reduce((pre,word)=>{return pre.replace(word,`<a href="?w=${word}">${word}</a>`)},string)console.log(repaceString)document.body.innerHTML += repaceString</script>
</body>
</html>

好吧,好难理解 

相关文章:

后盾人JS--JS值类型使用

章节介绍与类型判断 看看构造函数 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</t…...

1月11日

[WUSTCTF2020]CV Maker 可以看到有个注册页面&#xff0c;尝试注册一个用户登进去看看 进来后第一眼就看到文件上传&#xff0c;尝试上传&#xff0c;上传php后返回了 文件上传后端检测exif_imagetype()函数 他提示不是image&#xff0c;也就是需要我们构造一个文件头为图像类…...

【深度学习】Pytorch:加载自定义数据集

本教程将使用 flower_photos 数据集演示如何在 PyTorch 中加载和导入自定义数据集。该数据集包含不同花种的图像&#xff0c;每种花的图像存储在以花名命名的子文件夹中。我们将深入讲解每个函数和对象的使用方法&#xff0c;使读者能够推广应用到其他数据集任务中。 flower_ph…...

最近在盘gitlab.0.先review了一下docker

# 正文 本猿所在产品的代码是保存到了一个本地gitlab实例上&#xff0c;实例是别的同事搭建的。最近又又又想了解一下&#xff0c;而且已经盘了一些了&#xff0c;所以写写记录一下。因为这个事儿没太多的进度压力&#xff0c;索性写到哪儿算哪儿&#xff0c;只要是新了解到的…...

OA项目登录

导入依赖,下面的依赖是在这次OA登录中用到的 <!--web依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.sprin…...

verilogHDL仿真详解

前言 Verilog HDL中提供了丰富的系统任务和系统函数&#xff0c;用于对仿真环境、文件操作、时间控制等进行操作。&#xff08;后续会进行补充&#xff09; 正文 一、verilogHDL仿真详解 timescale 1ns/1ps //时间单位为1ns&#xff0c;精度为1ps&#xff0c; //编译…...

基于http协议的天气爬虫

该系统将基于目前比较流行的网络爬虫技术&#xff0c; 对网站上的天气数据进行查询分析&#xff0c; 最终使客户能够通过简单的操作&#xff0c; 快速&#xff0c; 准确的获取目标天气数据。主要包括两部分的功能&#xff0c; 第一部分是天气数据查询&#xff0c; 包括时间段数…...

_STM32关于CPU超频的参考_HAL

MCU: STM32F407VET6 官方最高稳定频率&#xff1a;168MHz 工具&#xff1a;STM32CubeMX 本篇仅仅只是提供超频&#xff08;默认指的是主频&#xff09;的简单方法&#xff0c;并未涉及STM32超频极限等问题。原理很简单&#xff0c;通过设置锁相环的倍频系数达到不同的频率&am…...

C#,图论与图算法,任意一对节点之间最短距离的弗洛伊德·沃肖尔(Floyd Warshall)算法与源程序

一、弗洛伊德沃肖尔算法 Floyd-Warshall算法是图的最短路径算法。与Bellman-Ford算法或Dijkstra算法一样&#xff0c;它计算图中的最短路径。然而&#xff0c;Bellman Ford和Dijkstra都是单源最短路径算法。这意味着他们只计算来自单个源的最短路径。另一方面&#xff0c;Floy…...

AWS云计算概览(自用留存,整理中)

目录 一、云概念概览 &#xff08;1&#xff09;云计算简介 &#xff08;2&#xff09;云计算6大优势 &#xff08;3&#xff09;web服务 &#xff08;4&#xff09;AWS云采用框架&#xff08;AWS CAF&#xff09; 二、云经济学 & 账单 &#xff08;1&#xff09;定…...

1. npm 常用命令详解

npm 常用命令详解 npm&#xff08;Node Package Manager&#xff09;是 Node.js 的包管理工具&#xff0c;用于安装和管理 Node.js 应用中的依赖库。下面是 npm 的一些常用命令及其详细解释和示例代码。 镜像源 # 查询当前使用的镜像源 npm get registry# 设置为淘宝镜像源 …...

js:根据后端返回数据的最大值进行计算然后设置这个最大值为百分之百,其他的值除这个最大值

问&#xff1a; 现在tabData.value 接收到了后端返回的数据&#xff0c; [{text:人力,percentage&#xff1a;‘90’}&#xff0c;{text:物品,percentage&#xff1a;‘20’}&#xff0c;{text:物理,percentage&#xff1a;‘50’}&#xff0c;{text:服务,percentage&#xff…...

【Spring】@Size 无法拦截null的原因

问题复现 在构建 Web 服务时&#xff0c;我们一般都会对一个 HTTP 请求的 Body 内容进行校验&#xff0c;例如我们来看这样一个案例及对应代码。当开发一个学籍管理系统时&#xff0c;我们会提供了一个 API 接口去添加学生的相关信息&#xff0c;其对象定义参考下面的代码&…...

【Block总结】掩码窗口自注意力 (M-WSA)

摘要 论文链接&#xff1a;https://arxiv.org/pdf/2404.07846 论文标题&#xff1a;Transformer-Based Blind-Spot Network for Self-Supervised Image Denoising Masked Window-Based Self-Attention (M-WSA) 是一种新颖的自注意力机制&#xff0c;旨在解决传统自注意力方法在…...

用 HTML5 Canvas 和 JavaScript 实现雪花飘落特效

这篇文章将带您深入解析使用 HTML5 Canvas 和 JavaScript 实现动态雪花特效的代码原理。 1,效果展示 该效果模拟了雪花从天而降的动态场景,具有以下特点: 雪花数量、大小、透明度和下落速度随机。雪花会在屏幕底部重置到顶部,形成循环效果。随窗口大小动态调整,始终覆盖…...

【cocos creator】【ts】事件派发系统

触发使用&#xff1a; EventTool.emit(“onClick”) 需要监听的地方&#xff0c;onload调用&#xff1a; EventTool.on(“onClick”, this.onClickEvent, this) /**事件派发*/class EventTool {protected static _instance: EventTool null;public static get Instance(): Eve…...

《探索鸿蒙Next上开发人工智能游戏应用的技术难点》

在科技飞速发展的当下&#xff0c;鸿蒙Next系统为应用开发带来了新的机遇与挑战&#xff0c;开发一款运行在鸿蒙Next上的人工智能游戏应用更是备受关注。以下是在开发过程中可能会遇到的一些技术难点&#xff1a; 鸿蒙Next系统适配性 多设备协同&#xff1a;鸿蒙Next的一大特色…...

CSS | CSS实现两栏布局(左边定宽 右边自适应,左右成比自适应)

目录 一、左边定宽 右边自适应 1.浮动 2.利用浮动margin 3.定位margin 4.flex布局 5.table 布局 二、左右成比自适应 1:1 1flex布局 table布局 1:2 flex布局 <div class"father"><div class"left">左边自适应</div><div class"r…...

acwing_3195_有趣的数

acwing_3195_有趣的数 // // Created by HUAWEI on 2024/11/17. // #include<iostream> #include<cstring> #include<algorithm>#define int long longusing namespace std;const int N 1000 50; const int MOD 1e9 7; int C[N][N]; //组合数signed mai…...

Liunx-搭建安装VSOMEIP环境教程 执行 运行VSOMEIP示例demo

本文安装环境为Liunx&#xff0c;搭建安装VSOMEIP环境并运行基础例子。 1. 安装基础环境 使用apt-get来安装基础环境&#xff0c;受网络影响可以分开多次安装。环境好的也可以一次性执行。 sudo apt-get install gcc g sudo apt-get install cmake sudo apt-get install lib…...

机器学习模型评估中的构念效度:超越基准测试分数的科学推断

1. 项目概述与核心问题在机器学习的日常研究和工程实践中&#xff0c;我们每天都在和各种各样的基准测试&#xff08;Benchmark&#xff09;打交道。无论是为了比较新提出的ResNet变体在ImageNet上的Top-1准确率&#xff0c;还是评估一个大型语言模型在MMLU上的常识推理能力&am…...

Tftpd32/Tftpd64不止是TFTP!手把手教你玩转它的DHCP和Syslog服务器功能

Tftpd32/Tftpd64&#xff1a;解锁DHCP与Syslog服务的隐藏潜力当大多数人提起Tftpd32/Tftpd64时&#xff0c;第一反应往往是它作为TFTP服务器的功能。这款轻量级工具确实在文件传输领域表现出色&#xff0c;但它的能力远不止于此。今天&#xff0c;我们将深入探索这款软件中两个…...

别再乱算相似度了!用Python实战二元变量聚类:从Jaccard系数到病人分组

医疗数据分析实战&#xff1a;用Python实现基于Jaccard系数的病人症状聚类在医疗数据分析领域&#xff0c;如何从海量病人症状数据中发现潜在规律一直是临床研究的难点。传统方法往往依赖医生经验或简单统计&#xff0c;而现代数据挖掘技术为我们提供了更科学的解决方案。本文将…...

告别浪费!SolidWorks企业级共享方案,实现降本增效全攻略

还在为 SolidWorks 高昂的硬件投入和混乱的图纸管理头疼&#xff1f;告别“一人一机”的浪费模式&#xff0c;企业级共享方案才是降本增效的正解。这套攻略基于“1 台高性能服务器 云飞云共享云桌面”架构&#xff0c;帮你把硬件成本砍掉 60%&#xff0c;把软件利用率翻倍。一…...

终极免费方案:WandEnhancer完整解锁WeMod Pro功能快速指南

终极免费方案&#xff1a;WandEnhancer完整解锁WeMod Pro功能快速指南 【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer 你是否渴望享受WeMod Pro会员的所…...

yolo视频识别 车辆速度估计识别 yolo11视频实时速度测量与测速估计

文章目录YOLOv11&#xff1a;视频实时速度测量与测速估计一、YOLOv11概述二、速度测量原理三、距离测量方法四、应用场景五、实践案例以下是关于使用YOLOv11进行视频实时速度测量与测速估计的介绍&#xff1a; YOLOv11&#xff1a;视频实时速度测量与测速估计 随着计算机视觉…...

量子纠错码VarQEC:原理、实现与硬件优化

1. 量子纠错码基础与实验背景量子纠错码&#xff08;Quantum Error Correction Codes, QEC&#xff09;是量子计算中保护量子信息免受噪声影响的核心技术。与经典纠错码不同&#xff0c;量子纠错需要应对量子态特有的退相干和纠缠特性。传统QEC如[[5,1,3]]完美码虽然理论完备&a…...

3分钟掌握JetBrains IDE试用期重置:终极完整指南

3分钟掌握JetBrains IDE试用期重置&#xff1a;终极完整指南 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter JetBrains IDE试用期重置工具&#xff08;ide-eval-resetter&#xff09;是一个开源项目&#xff0c;专…...

学习日志(三)【php语法学习,iscc校赛wp】

1. 任务 1.1.1.1.1.1. 知识部分 rce看【之前的笔记&#xff1f;】php的知识点学习继续jwt token好像是比赛的题目考察内容&#xff0c;我看看php伪协议 1.1.1.1.1.2. 题目 参加iscc比赛【五一】rce题目 1.1.1.1.1.3. 环境配置 把vscode搞好&#xff0c;上学期没有把Php配…...

NBTExplorer:让Minecraft数据编辑从专业工具变成人人可用的可视化平台

NBTExplorer&#xff1a;让Minecraft数据编辑从专业工具变成人人可用的可视化平台 【免费下载链接】NBTExplorer A graphical NBT editor for all Minecraft NBT data sources 项目地址: https://gitcode.com/gh_mirrors/nb/NBTExplorer 你是否曾经面对Minecraft世界文件…...