-
-
<!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> <button type="button" onclick="addRow()">添加</button> <button type="button" onclick="delRow()">删除</button> <div style="height: 50vh;"> <table> <thead><tr><td>表头</td></tr></thead> <tbody id="tb"></tbody> </table> </div> </body><script> function addRow(){ var html = '' for (let i = 0; i < 100000; i++) { html += '<tr><td>'+i+'</td></tr>' } document.getElementById('tb').innerHTML = html } function delRow(){ document.getElementById('tb').innerHTML = '' }</script></html>一段简单的表格添加行代码，为什么刚开始我在谷歌浏览器的任务管理器上看到的标签页内存占用是30M，然后点击添加后内存变成510M，点击删除后内存占用还有500M，而且刷新页面内存还是占用500M，想问下有没有解决方法（不使用虚拟滚动）。下图为内存占用情况
-
JavaScript 是一种广泛使用的编程语言，主要用于网页开发，使网页具有交互性和动态功能。以下是 JavaScript 的主要特点和用途：1. 基本概念脚本语言：JavaScript 是一种解释型语言，代码在浏览器中直接执行，无需编译。跨平台：支持所有主流浏览器（如 Chrome、Firefox、Safari、Edge）和操作系统。动态类型：变量类型在运行时确定，无需提前声明。2. 主要用途前端开发：与 HTML 和 CSS 结合，用于创建动态网页，如表单验证、动画、内容更新等。后端开发：通过 Node.js，JavaScript 也可用于服务器端编程，处理数据库操作和 API 开发。移动应用开发：借助 React Native 等框架，JavaScript 可用于开发跨平台移动应用。桌面应用开发：通过 Electron 等框架，JavaScript 可用于构建跨平台桌面应用。3. 核心特性事件驱动：通过事件监听和回调函数响应用户操作，如点击、键盘输入等。异步编程：支持 Promise 和 async/await，便于处理异步操作，如网络请求。面向对象：支持基于原型的面向对象编程，允许创建类和对象。4. 基本语法变量声明：使用 var、let 或 const 声明变量。函数：使用 function 关键字定义函数，支持箭头函数。条件与循环：支持 if、else、switch 等条件语句，以及 for、while 等循环结构。5. DOM 操作文档对象模型 (DOM)：JavaScript 可以操作 DOM，动态修改网页内容和结构。选择元素：使用 document.getElementById、document.querySelector 等方法选择元素。修改内容：通过 innerHTML、textContent 等属性修改元素内容。6. 工具与框架开发工具：常用工具包括 Chrome DevTools、VS Code 等。前端框架：流行的框架有 React、Angular、Vue.js 等。构建工具：常用工具有 Webpack、Babel 等。7. 示例代码javascript复制// 简单的 JavaScript 示例let message = "Hello, World!";console.log(message);// 函数示例function greet(name) { return "Hello, " + name + "!";}// 事件监听示例document.getElementById("myButton").addEventListener("click", function() { alert("Button clicked!");});8. 学习资源MDN Web Docs：提供全面的 JavaScript 文档和教程。JavaScript.info：适合初学者的教程网站。Codecademy：提供互动式 JavaScript 课程总结：JavaScript 是现代 Web 开发的核心语言，掌握它将为你在前端、后端及全栈开发领域提供坚实的基础。 -
前端开发是构建网页和Web应用程序用户界面的过程，主要涉及HTML、CSS和JavaScript等技术。以下是对这些技术的简要介绍：1. HTML（超文本标记语言）HTML是前端开发的基础，用于定义网页的结构和内容。它通过标签（tags）来标记文本、图像、链接等元素，使浏览器能够正确解析和显示网页内容。基本结构：html复制<!DOCTYPE html><html><head> <title>页面标题</title></head><body> <h1>这是一个标题</h1> <p>这是一个段落。</p></body></html> 运行 HTML常用标签：<h1> 到 <h6>：标题标签，表示不同级别的标题。<p>：段落标签。<a>：超链接标签，用于创建链接。<img>：图像标签，用于插入图片。<div> 和 <span>：容器标签，用于布局和样式控制。2. CSS（层叠样式表）CSS用于控制网页的样式和布局，使网页内容更加美观和易于阅读。它通过选择器（selectors）来指定需要样式化的HTML元素，并通过属性和值来定义样式。基本语法：css复制h1 { color: blue; font-size: 24px;}常用属性：color：文本颜色。font-size：字体大小。margin 和 padding：外边距和内边距。display：控制元素的显示方式（如块级、内联等）。flexbox 和 grid：用于创建复杂的布局。3. JavaScriptJavaScript是一种脚本语言，用于实现网页的交互功能。它可以在浏览器中动态地修改HTML和CSS，处理用户输入，以及与服务器进行通信。基本语法：javascript复制document.getElementById("demo").innerHTML = "Hello, World!";常用功能：DOM操作：通过JavaScript可以动态地修改HTML元素的内容、属性和样式。事件处理：可以为HTML元素添加事件监听器，响应用户的点击、输入等操作。AJAX：通过异步JavaScript和XML（AJAX）技术，可以在不重新加载页面的情况下与服务器进行数据交换。ES6+：现代JavaScript引入了许多新特性，如箭头函数、模板字符串、解构赋值、Promise、async/await等，使代码更加简洁和易于维护。4. 前端框架和库为了提高开发效率和代码质量，前端开发者通常会使用一些流行的框架和库：React：由Facebook开发的一个用于构建用户界面的JavaScript库，采用组件化开发模式。Vue.js：一个轻量级、易上手的JavaScript框架，适合构建单页应用（SPA）。Angular：由Google开发的一个全面的前端框架，适合构建大型应用。5. 前端工具前端开发中还涉及到许多工具，用于代码的构建、调试和优化：包管理器：如npm和Yarn，用于管理项目依赖。构建工具：如Webpack和Parcel，用于打包和优化代码。版本控制：如Git，用于代码的版本管理和协作开发。调试工具：如Chrome DevTools，用于调试和优化网页性能。6. 响应式设计响应式设计是一种使网页能够适应不同设备和屏幕尺寸的技术。通过使用CSS媒体查询（Media Queries）和弹性布局（Flexbox、Grid），可以确保网页在桌面、平板和手机等设备上都能良好显示。媒体查询示例：css复制@media (max-width: 600px) { body { background-color: lightblue; }}7. 前端性能优化前端性能优化是提升网页加载速度和用户体验的关键。常见的优化手段包括：减少HTTP请求：通过合并文件、使用CSS Sprites等方式减少请求次数。压缩资源：压缩HTML、CSS、JavaScript和图片等资源，减少文件大小。使用CDN：通过内容分发网络（CDN）加速静态资源的加载。懒加载：延迟加载非关键资源，如图片和视频，直到用户滚动到它们的位置。总结前端开发涉及多种技术和工具，HTML、CSS和JavaScript是基础，而框架、库和工具则帮助开发者更高效地构建复杂的Web应用。
-
【问题来源】黑龙江农信社【问题简要】开发 vxml 版本自助语音流程时，使用grammer 标签 的 src 属性上送语法文件是，流程跟踪日志中，提示异常【问题类别】vxml 版本自主语音流程开发【AICC解决方案版本】AICC 版本：AICC 22.200.0【问题现象描述】页面中通过 grammar 标签 读取项目中一个 grammar.xml 文件流程文件中提示异常 There was a DEFINE_GRAMMAR failure 语法文件内容如下
-
当涉及到网页元素的实时尺寸变化监测时,element-resize-detector 是一个值得推荐的开源库,本文主要介绍了element-resize-detector监听普通元素的实现示例,感兴趣的可以了解一下目录说明：在进行后台系统开发时，经常会用到一些图表展示，当改变浏览大小后，这些图表本身是没有响应式的，可以借助第三方插件element-resize-detector来监听窗口的变化一、element-resize-detector 安装当涉及到网页元素的实时尺寸变化监测时，element-resize-detector 是一个值得推荐的开源库。它能以惊人的速度实现跨浏览器的元素大小调整监听，比传统方法快了约37倍。让我们深入了解这个神器。1npm install element-resize-detectorelement-resize-detector 使用了两种不同的监听策略：对象方式：修改元素CSS属性使其触发布局更新，从而捕获尺寸变化。滚动方式（默认）：通过在元素内部创建滚动区域并监听滚动事件，达到无闪烁、高性能的监控效果。该库在处理性能和兼容性方面做了大量工作，包括：对于静态定位（position: static）的元素，会自动转换为相对定位。添加隐藏元素作为内部监听器，以确保在所有浏览器中的稳定运行。二、插件使用1.插件引入1import elementResizeDetectorMaker from "element-resize-detector";2.创建实例对象1234567let erd = elementResizeDetectorMaker();//如果有快速滚动,如果没有不需要进行如下配置let erdUltraFast = elementResizeDetectorMaker({ strategy: "scroll"});3.监听元素12345678910erd.listenTo( document.getElementById("endlistenEartagEchart"), //第一个参数是要监听的dom function (element) { setTimeout(() => { // that.chartBoxW = // document.getElementById("endlistenEartagEchart").offsetWidth - 30; // that.setEchart(); }, 0); } //第二个参数回调 执行dom变化执行的方法 );到此这篇关于element-resize-detector监听普通元素的实现示例的文章就介绍到这了转载自https://www.jb51.net/javascript/3235458vu.htm -
介绍 使用 Swagger 你只需要按照它的规范去定义接口及接口相关的信息，就可以做到生成接口文档，以及在线接口调试页面官网: swagger.io/ Knife4j 是为 Java MVC 框架集成 Swagger 生成 Api 文档的增强解决方案 使用方式 1. 导入坐标 <dependency> <groupId>com.github.xiaoymin</groupId> <artifactId>knife4j-spring-boot-starter</artifactId> </dependency> 2. 在配置类中加入 knife4j 相关配置 /** * 通过knife4j生成接口文档 * @return */ @Bean public Docket docket() { ApiInfo apiInfo = new ApiInfoBuilder() .title("苍穹外卖项目接口文档") .version("2.0") .description("苍穹外卖项目接口文档") .build(); Docket docket = new Docket(DocumentationType.SWAGGER_2) .apiInfo(apiInfo) .select() .apis(RequestHandlerSelectors.basePackage("com.sky.controller")) .paths(PathSelectors.any()) .build(); return docket; } 3. 设置静态资源映射，否则接口文档页面无法访问 /** * 设置静态资源映射 * @param registry */ protected void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/doc.html").addResourceLocations("classpath:/META-INF/resources/"); registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/"); } 常用注解 查看效果 附完整配置类代码: package com.sky.config;import com.sky.interceptor.JwtTokenAdminInterceptor;import lombok.extern.slf4j.Slf4j;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.InterceptorRegistry;import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;import springfox.documentation.builders.ApiInfoBuilder;import springfox.documentation.builders.PathSelectors;import springfox.documentation.builders.RequestHandlerSelectors;import springfox.documentation.service.ApiInfo;import springfox.documentation.spi.DocumentationType;import springfox.documentation.spring.web.plugins.Docket;/** * 配置类，注册web层相关组件 */@Configuration@Slf4jpublic class WebMvcConfiguration extends WebMvcConfigurationSupport { @Autowired private JwtTokenAdminInterceptor jwtTokenAdminInterceptor; /** * 注册自定义拦截器 * * @param registry */ protected void addInterceptors(InterceptorRegistry registry) { log.info("开始注册自定义拦截器..."); registry.addInterceptor(jwtTokenAdminInterceptor) .addPathPatterns("/admin/**") .excludePathPatterns("/admin/employee/login"); } /** * 通过knife4j生成接口文档 * @return */ @Bean public Docket docket() { log.info("准备生成接口文档..."); ApiInfo apiInfo = new ApiInfoBuilder() .title("苍穹外卖项目接口文档") .version("2.0") .description("苍穹外卖项目接口文档") .build(); Docket docket = new Docket(DocumentationType.SWAGGER_2) .apiInfo(apiInfo) .select() .apis(RequestHandlerSelectors.basePackage("com.sky.controller")) .paths(PathSelectors.any()) .build(); return docket; } /** * 设置静态资源映射 * @param registry */ protected void addResourceHandlers(ResourceHandlerRegistry registry) { log.info("开始设置静态资源映射..."); registry.addResourceHandler("/doc.html").addResourceLocations("classpath:/META-INF/resources/"); registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/"); }} ———————————————— 原文作者：全网第一菜鸡 转自链接：https://learnku.com/articles/85427 版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请保留以上作者信息和原文链接。
-
网站>网站用于集中提供各种相关的网页。网页>主页，指网站中的首页，通常命名为index.*。当URL中不包含文件名时，即访问网站的主页。HTML文档> 超文本标记语言或超文本链接标示语言（标准通用标记语言下的一个应用）HTML（HyperText Mark-up Language）是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。 它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文件是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML文件的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>页面标题</title></head><body>我是快乐的小男孩<img src="images/boy.gif" /></body></html>经浏览器解析后呈现为超媒体页面，如图： -
【问题来源】黑龙江农信社【问题简要】开发 vxml 版本自助语音流程时，本地修改代码后，服务器疑似存在缓存问题【问题类别】vxml 版本自主语音流程开发【AICC解决方案版本】AICC 版本：AICC 8.0.71【问题现象描述】在本地开发 vxml 版本自助语音流程时，通过华为配置管理系统，将流程文件连接到本地项目。华为服务器疑似存在缓存问题。如：在原有main请求响应代码中，播放音频文件 1050.wav，本地修改代码为 busy.wav后，通过电话拨号。提示音依旧播放的是 1050.wav 内容重启华为服务器 或过了不确定时长的时间后，才能生效变成 busy.wav还有个问题，如下图：经常不定时的出现 这个错误，造成电话直接挂机麻烦帮忙定位下造成这两个问题的原因，谢谢
-
在开发h5项目的时候 经常需要使用window.open 来打开新页面，但有时会出现失效的情况。 问题复现： 在接口请求完成后，根据返回的结果调用window.open 失效 原因：浏览器出于安全的考虑，会拦截掉非用户操作打开的新页面；实际上，在异步的方法中以及非用户操作打开的新页面都会被拦截（不同浏览器不同版本表现不同，不是所有情况都会被拦截，但是任然需要做兼容处理） 例如： fetch(url,option).then(res=>{ window.open('http://www.test.com')})setTimeout(() => { window.open(this.url, '_blank')}, 100)。。。if (success) window.open(data);解决方案：1、尽量让将调用window.open的方法 写在用户事件中，例如： if (success) { Dialog.alert({ content: '即将跳转单证链接', onConfirm: () => { window.open(data); }, }); }交互上的小修改，这样写需要用户手动确定才会跳转2、 使用a标签进行跳转ajax().then(res => { asyncOpen(res.url)})function asyncOpen(url) { var a = document.createElement('a') a.setAttribute('href', url) a.setAttribute("target", "_blank"); a.setAttribute("download", 'name'); document.body.appendChild(a); a.click(); a.remove();}3、使用中转页面一定要把window.open定义在接口请求的外部，保证新开空白窗口不会被拦截。var newWin = window.open('loading page') ajax().then(res => { newWin.location.href = 'target url'}).catch(() => { newWin.close()})———————————————— 版权声明：本文为CSDN博主「MissXu666」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/MissXu666/article/details/129210313
-
1 前言 网页端一般会遇到各种文件，比如：txt、doc、docx、pdf、xml、xls、xlsx、ppt、pptx、zip、png、jpg等等。 有时候我们不想要把文件下载下来，而是想在线打开文件预览 ，这个时候如果每一种格式都需要我们去写代码造轮子去实现预览功能就太复杂了，并且自己实现的话会有很多兼容性问题。 这个时候 kkFileView 的出现就解决了我们的问题。 2 kkFileView介绍 kkFileView为文件文档在线预览解决方案，该项目使用流行的spring boot搭建，易上手和部署，基本支持主流办公文档的在线预览，如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等等 kkFileView 官网 kkFileView 码云地址官网 kkFileView github地址官网 3 kkFileView安装 自 v4.1.0 版本开始 kkFileView 不再免费提供 Windows 和 Linux 的发行安装包了，以前旧版本的安装包也取消了下载入口，要下载安装包还要花99块钱进那个KK开源社区群获取。不过我之前下载过 v4.0.0 版，也够用了，为了方便大家我已经上传百度云了，你可以通过下面文章中的链接进行下载，本文的安装使用教程也是基于 v4.0.0 版本进行操作 。 部署指南参考kkFileView - 在线文件预览 下面介绍Windows、Linux、docker三种安装方式。 3.1 下载Windows或Linux的 v4.0.0 安装包 3.1.1 Windows安装包下载 链接：https://pan.baidu.com/s/1YsuYcYB7oGK4w-byM5VUuQ 提取码：jer1 3.1.2 Linux安装包下载 链接：https://pan.baidu.com/s/1saGMphibd7434GNy5L5Lfw 提取码：axnu 3.2 在Windows或Linux上安装 3.2.1 Windows上安装 第一步:下载的 zip 压缩包解压后进入 bin 目录，双击 startup.bat 启动 kkFileView,如图: 第二步:30秒后进入 log 目录查看 kkFileView.log 日志，打印【kkFileView 服务启动完成，耗时:26.8350973s，演示页请访问: http://127.0.0.1:8012 】则说明启动成功。 3.2.2 Linux上安装（centos为例） 第一步:root用户下将 kkFileView-4.0.0.tar.gz 上传到服务器 ，使用命令 tar -zxvf kkFileView-4.0.0.tar.gz 解压，开放 8012 端口。 第二步:root用户下解压后进入 kkFileView-4.0.0/bin 目录，执行 ./startup.sh 开始安装和启动，安装过程中会下载需要的组件需要输入y 第三步:安装字体。若不安装字体转化出的pdf文件可能会因为缺少字体乱码。字体下载（链接：http://kkfileview.keking.cn/fonts.zip）或者 百度云下载（链接：https://pan.baidu.com/s/1TESdE8Xi02NqtnnKlp0BvQ 提取码：lfw5 ） 将下载的字体fonts.zip上传到 /usr/share/fonts 目录解压后执行命令 mkfontscale 若 mkfontscale 提示没有命令则先 yum install mkfontscale 安装命令 再分别依次执行 mkfontscale、mkfontdir、fc-cache 命令。 第四步: 安装完成后 kkFileView-4.0.0/bin/ 目录下使用命令 ./showlog.sh 查看日志 如果出现： 【kkFileView 服务启动完成，耗时:5.99157928s，演示页请访问: http://127.0.0.1:8012 】，则表示安装启动成功。 第五步: 如果日志提示报错信息【找不到office组件，请确认’office.home’配置是否有误 】，则需要下载LibreOffice组件安装。 LibreOffice下载 (链接：https://downloadarchive.documentfoundation.org/libreoffice/old/7.1.4.2/rpm/x86_64/) 或者 百度云下载（链接：https://pan.baidu.com/s/1aRY66KlzZD9UJSo8Gjf2Fg 提取码：6exh ） 将 LibreOffice_7.1.4.2_Linux_x86-64_rpm.tar.gz 上传服务器，然后解压后进入RPMS目录执行 yum localinstall *.rpm 进行安装。 第六步:如果日志提示报错信息【Caused by: java.lang.IllegalStateException: a process with acceptString ‘socket,host=127.0.0.1,port=2001’ is already running】 （1）用 ps -ef|grep java 命令查询出Java相关运行的进程，然后关闭kkFileView相关的进程， 并查看2001和2002端口的进程并关闭该进程。然后再执行 ./startup.sh 启动并查看日志。 （2）如果是安装在Linux上并且关闭了kkFileView相关的进程以及2001和2002端口，启动日志任 然存在该问题，那么可能是你远程连接服务器的软件导致的这个问题，改用window的cmd， 用ssh连接服务器启动程序尝试。 第七步: 如果日志提示报错信息【Caused by: org.artofsolving.jodconverter.office.OfficeException: could not establish connection】，可参考 centos下启动失败：启动office组件失败，请检查office组件是否可用 3.2.3 通过docker安装 第一步:拉取镜像: docker pull keking/kkfileview 第二步:运行: docker run -dit -p 8012:8012 keking/kkfileview 第三步:进入运行起来的容器中，然后可以进入 /opt/kkFileView-4.1.0-SNAPSHOT/bin 安装目录, 运行命令 ./showlog.sh 查看日志 4 kkFileView的配置修改 4.1 修改启动脚本 测试发现如果 kkfileview 安装在 Windows 上预览 txt 文件会乱码，所以需要修改 kkfileview 的 bin 目录下的 startup.bat 脚本。 在最后一行的 java 后添加 -Dfile.encoding=UTF-8 修改后如下： @echo offset "KKFILEVIEW_BIN_FOLDER=%cd%"cd "%KKFILEVIEW_BIN_FOLDER%"echo Using KKFILEVIEW_BIN_FOLDER %KKFILEVIEW_BIN_FOLDER%echo Starting kkFileView...echo Please check log file in ../log/kkFileView.log for more informationecho You can get help in our official homesite: https://kkFileView.keking.cnecho If this project is helpful to you, please star it on cid:link_0/stargazersjava -Dfile.encoding=UTF-8 -Dspring.config.location=..\config\application.properties -jar kkFileView-4.0.0.jar -> ..\log\kkFileView.log4.2 关闭演示页面 kkFileView安装启动成功后可以打开 http://安装的ip:8012 （或者本机 http://127.0.0.1:8012） 查看演示页面上传文件以及查看预览效果。 如果项目上线后为了安全要关闭演示页面，可以在修改kkFileView安装目录的config文件夹中的 application.properties配置文件，将file.upload.disable设置为false禁用演示首页文件上传。 其他配置可根据 官网配置说明 进行配置。 5 kkFileView的使用 只需要创建一个html文件,再加上如下代码: <html> <head> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script> </head> <script> var url = 'https://public.fuyingy.com/79e5c202204201011493290.jpg'; //图片随便写了一个 window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url))); </script></html>转载自https://blog.csdn.net/qq_37284798/article/details/129377354?spm=1001.2014.3001.5502
-
一、箭头函数的介绍 1.1 什么是箭头函数 ES6中允许使用=>来定义函数。箭头函数相当于匿名函数，并简化了函数定义。 1.2 基本语法 // 箭头函数 let fn = (name) => { // 函数体 return `Hello ${name} !`; }; // 等同于 let fn = function (name) { // 函数体 return `Hello ${name} !`; }; 箭头函数在语法上比普通函数简洁多。箭头函数就是采用箭头=>来定义函数，省去关键字function。 函数的参数放在=>前面的括号中，函数体跟在=>后的花括号中 1.3 箭头函数的参数 ①如果箭头函数没有参数，写空括号 //没有参数，写空括号 let fn = () => { console.log('hello'); }; ②如果箭头函数有一个参数，也可以省去包裹参数的括号 //只有一个参数，可以省去参数括号 let fn = name => { console.log(`hello ${name}!`) }; ③如果箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中。 let fn = (val1, val2, val3, val4) => { return [val1, val2, val3, val4]; } 1.4 箭头函数的函数体 ①如果箭头函数的函数体只有一句执行代码，简单返回某个变量或者返回一个简单的js表达式，可以省去函数体花括号{ } //返回某个简单变量val let f = val => val; // 等同于 let f = function (val) { return val }; //返回一个简单的js表达式num1+num2 let sum = (num1, num2) => num1 + num2; // 等同于 let sum = function(num1, num2) { return num1 + num2; }; ②如果箭头函数的函数体只有一句代码，返回的不是变量和简单的js表达式，而是一个对象。 //错误写法—花括号会被解释为函数体 let getItem = id => { id: id, name: 'gaby' }; //正确写法 let getItem = id => ({ id: id, name: 'gaby' }); ③如果箭头函数的函数体只有一条语句且不需要返回值（最常用于回调函数），加上void关键字 let fn = () => void doesNotReturn(); 1 箭头函数用于回调函数，常见简洁 //栗子1 //普通函数 [1, 2, 3].map(function (x) { return x + x; }); //ES6箭头函数 [1, 2, 3].map(x => x + x); //栗子2 //普通函数 var result = [2, 4, 5, 1, 6].sort(function (a, b) { return a - b; }); //ES6箭头函数 var result = [2, 4, 5, 1, 6].sort((a, b) => a - b); 二、箭头函数的this指向规则 2.1 箭头函数没有原型prototype，因此箭头函数没有this指向 let fn = () => { console.log('Hello World !') }; console.log(fn.prototype); // undefined 2.2 箭头函数不会创建自己的this，如果存在外层第一个普通函数，在定义的时候会继承它的this 箭头函数没有自己的this指向，它会捕获自己定义所处的外层执行环境，并且继承这个this值。箭头函数的this指向在被定义的时候就确定了，之后永远都不会改变。（！永远） （1）栗子1 var id = 'Global'; //普通函数 function fn1() { setTimeout(function () { console.log(this.id) }, 1000); } //箭头函数 function fn2() { setTimeout(() => { console.log(this.id) }, 1000); } fn1.call({ id: 'obj' });//Global fn2.call({ id: 'obj' });//obj 解析：普通函数的setTimeout 一秒后执行是在全局作用域，所有this指向window对象，this.id指向了全局变量id，输出Golbal。箭头函数的this在定义的时候就确定了，继承fn2的执行环境中的this，fn2的this指向被call方法改变绑定到obj这个对象 （2）栗子2 var id = 'Global'; var obj = { id: 'OBJ', a: function () { console.log(this.id) },//方法a普通函数定义 b: () => { console.log(this.id) }//方法b用箭头函数定义 }; obj.a();//OBJ obj.b();//Global 解析：普通函数作为对象的方法调用，this指向所属的对象（谁调用它就指向谁），this.id 就是obj.id；箭头函数继承定义它的执行环境的this，指向window对象，指向全局变量，输出Global。花括号{}无法形成一个单独的执行环境，所有它依然在全局中。 2.3 箭头函数的this是继承而来的永远不会变，call/apply/bind也无法改变 .call()/.apply()/.bind()方法可以用来动态修改函数执行时this的指向，但由于箭头函数的this定义时就已经确定且永远不会改变 var name = 'gaby' var person = { name: 'gabrielle', say: function () { console.log('say hello', this.name) }, //普通函数 say2: () => { console.log('say2 hello', this.name) } //箭头函数 } person.say.call({ name: 'Mike' }) person.say2.call({ name: 'Amy' }) 解析：say的普通函数通过call调用已经改变this指向。say2箭头函数调用call绑定尝试改变this指向，但是仍然打印出外一层普通函数的this指向，window对象的全局变量name。 2.4 箭头函数this指向只能间接修改 间接修改：修改被继承的普通函数的this指向，箭头函数的this指向也会跟着改变。 箭头函数的this指向定义时所在的外层第一个普通函数，跟使用的位置没有关系。 let al let aObj = { msg: 'a的this指向' }; bObj = { msg: 'b的this指向' }; a.call(aObj); //将a的this指向aObj b.call(bObj); //将b普通函数的this指向bObj 箭头函数内部的this指向也会指向bObj function b() { al(); } function a() { al = () => { console.log(this, 'this指向定义时外层第一个普通函数 ') }; } 2.5 箭头函数外层没有函数，严格模式和非严格模式下它的this都会指向window全局对象 箭头函数的this指向继承自外层第一个普通函数的this，那么如果没有外层函数，它的this指向哪里？ this的绑定规则：非严格模式下，默认绑定的this指向全局对象，严格模式下this指向undefined。 如果箭头函数外层没有普通函数继承，箭头函数在全局作用域下，严格模式和非严格模式下它的this都会指向window(全局对象) 2.6 多层嵌套函数this指向 箭头函数中的this引用的是最近作用域中的this，是向外层作用域中，一层层查找this，直到有this的定义。 2.7 箭头函数不能作为构造函数使用new 构造函数做了什么？ ①JS内部首先会先生成一个对象 ②再把函数中的this指向该对象 ③然后执行构造函数中的语句 ④最终返回该对象实例 箭头函数没有自己的this，this继承外层执行环境中的this，且this永远不会改变。new会报错 let fn = (name, age) => { this.name = name; this.age = age; }; let person = new fn('gaby', 20) 2.8 箭头函数不支持new.target ES6新引入的属性，普通函数可以通过new调用，new.target返回该函数的引用。用于确定构造函数是否为new调用。箭头函数并不能作为构造函数使用new，自然也不支持new.targer。 （1）箭头函数的this指向全局对象，在箭头函数中使用箭头函数会报错 let fn = () => { console.log(new.target) }; fn() （2）箭头函数的this指向普通函数，它的new.target就是指向该普通函数的引用 new fn2(); function fn2() { let fn = () => { console.log(new.target) }; fn(); } 三、箭头函数的arguments规则 3.1 箭头函数没有自己的arguments （1）箭头函数处于全局作用域中 箭头函数的this指向全局对象，会报arguments未声明的错。 let fn = name => { console.log(arguments) } let fn2 = function (name) { console.log(arguments) } //fn() fn2() let fn = name => { console.log(arguments) } let fn2 = function (name) { console.log(arguments) } fn() fn2() 解析：普通函数可以打印arguments，箭头函数报错。因为箭头函数处于全局作用域中，在全局作用域没有arguments的定义，箭头函数本身没有arguments，所以报错。 （2）箭头函数的this如果指向普通函数,它的argumens继承于该普通函数 let fn2 = function (name) { console.log('fn2:', arguments) let fn = name => { console.log('fn:', arguments) } fn() } fn2('gaby') 解析：两个函数打印的argument相同，都是fn2函数的arguments。 总结 箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值。 3.2 可以用rest替代，rest参数获取函数的多余参数 rest是ES6的API，用于获取函数不定数量的参数数组。这个API可以用来替代arguments。 （1）基本用法 //形式是...变量名 let fn = (first, ...arr) => { console.log(first, arr); } fn(1, 2, 3, 4); 解析：rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。获取函数的第一个确定的参数，以及用一个变量接收其他剩余函数的实例。 （2）使用注意事项 ①rest必须是函数的最后一位参数 let a = (first, ...rest, three) => { console.log(first, rest, three); }; a(1, 2, 3, 4); ②函数的length属性不包括rest （3）rest和arguments函数比较 ①箭头函数和普通函数都可以使用rest参数，而arguments只能普通函数用。 ②接收参数rest比arguments更加灵活，完全可以自定义。 ③rest是一个真正的数组可以使用数组API，arguments只是一个类数组。 3.3 箭头函数不支持重复函数参数的名称 function fn(name, name) { console.log('fn2:', name) } let fn2 = (name, name) => { console.log('fn:', name) } fn('wang', 'gaby') fn2('wang', 'gaby') 3.4 箭头函数不能用作Generator，不能使用yeild关键字 四、箭头函数的注意事项 ①函数箭头一条语句返回对象字面量，需要加括号。 ②箭头函数在参数和箭头之间不能换行 ③箭头函数的解析顺序相对||靠前 五、箭头函数不适用场景 （1）对象方法，且方法使用了this 对象无法构造单独的作用域 var name = 'gaby' var person = { name: 'gabrielle', say: function () { console.log('say hello', this.name) }, //普通函数 say2: () => { console.log('say2 hello', this.name) } //箭头函数 } person.say() person.say2() 解析：person.say2()方法是一个箭头函数，调用person.say2()的时候this指向全局对象，达不到预期。对象无法构成单独的作用域，定义say2()箭头函数的时候作用域在全局作用域。 （2）回调函数的动态this var button = document.querySelector('.btn'); button.addEventListener('click', () => { this.classList.toggle('on'); }); 解析：报错。按钮点击是一个回调函数，而箭头函数内部的this指向外一层普通函数的this，在这里就是window，所以报错。改成普通函数就不会报错 六、箭头函数与普通函数简单区别总结 （1）箭头函数语法更简洁清晰，快捷。 （2）箭头函数没有原型prototype，并不会自己创建this，并且this不能被修改，call等都不能修改到。只能间接修改被继承的this （3）箭头函数的this在定义时就定了，继承外一层的普通函数 （4）如果箭头函数外一层再外一层都不能找到普通函数，在严格和非严格情况下都会指向window对象 （5）箭头函数的this指向全局，使用arguments会报未声明的错误 （6）箭头函数的this指向外一层的普通函数，使用argument继承该普通函数 （7）箭头函数不能构造函数，不能new.target，不能new，没有constructor （8）箭头函数不支持重复命名参数，普通函数可以重复命名参数 ———————————————— 版权声明：本文为CSDN博主「傲娇味的草莓」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/weixin_45709829/article/details/123931582
-
部分代码不法暂时 某尾有原文链接前言 学了HTML、CSS和JS有了一个月了，JS还未学完，偷懒写一个小项目，用了一个下午，顺便巩固一下所学知识。（内容比较简陋，适合新手） 源代码：https://github.com/yeziyuhai/QQ-login-interface 简介 左边是我的，右边是官方的。没有设计稿和素材，只能自己找，所以是无法做到一模一样的，不够这样子也差不多了。 布局思路 很明显，简陋的做法是上下两个盒子，中间头像可以定位上面的父级也可以定位下面的父级，这里我选择的是上面，中间内容用一个表单包裹。注册账号和二维码使用定位，父级是大盒子。 .html <!-- 登录界面 --> <div> <div class="login"> <!-- 顶部 --> <div class="top"> <div class="left"> <span class="iconfont icon-QQ"></span>QQ </div> <div class="right"> <span class="iconfont icon-shezhi"></span> <span class="iconfont icon-jianhao"></span> <span class="iconfont icon-chenghao"></span> </div> <div class="head"> <div class="green"></div> </div> </div> <!-- 底部 --> <div class="bottom"> <!-- 表单 --> <form action="javascript:;"> <div class="input"> <div class="text"> <label for=""><span class="iconfont icon-QQ"></span></label> <label for=""><span class="iconfont icon-xiala"></span></label> <input type="text" placeholder="QQ号码/手机/邮箱" name="uname"> </div> <div class="password"> <label for=""><span class="iconfont icon-suoding_huaban"></span></label> <label for=""><span class="iconfont icon-jianpan_o"></span></label> <input type="password" placeholder="密码"> </div> </div> <div class="check"> <!-- 点击文字也可以选中 --> <label><input type="checkbox" >自动登录</label> <label><input type="checkbox">记住密码</label> <a href="https://accounts.qq.com/find?aquin" target="_blank">找回密码</a> </div> <input type="submit" value="登录" class="loginBtn"> </form> <!-- 其他 --> <a href="https://ssl.zc.qq.com/v3/index-chs.html?from=client®key=1720F6EE975B2AFF081EC88BCAE91F145C04012178E039924F1CC17DB69AC184&ADUIN=0&ADSESSION=0&ADTAG=CLIENT.QQ.5929_NewAccount_Btn.0&ADPUBNO=27255" class="signup" target="_blank">注册账号</a> <span class="iconfont icon-ico"></span> <!-- 手机登录二维码 --> </div> <div class="mobile"> <img src="./images/erweima.png" alt=""> <p>用QQ手机版扫描二维码安全登录</p> <button class="back">返回</button> </div> <!-- 设置 --> <div class="setup"> <p>懒得弄了</p> <button class="back">返回</button> </div> </div> </div>相关代码 颜色渐变动画 思路是渐变45度角倾斜，之后动画改变定位，当然和官方的不一样，做出差不多效果就行。 .css .login .top { position: relative; width: 100%; height: 40%; background: linear-gradient(-45deg, #23A6D5, rgba(106, 103, 255), rgba(158, 81, 255), #23A6D5, #23D5AB); background-size: 400% 400%; animation: bg 4s infinite linear forwards; color: #fff; } @keyframes bg { 0% { background-position: 0 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0 50%; } 头像 头像绝对定位，顶部相对定位，小绿点绝对定位。 .login .top .head { position: absolute; left: 50%; top: 100%; width: 50px; height: 50px; border-radius: 50%; border: 2px solid #fff; transform: translate(-50%, -50%); box-shadow: 0px 5px 10px 0px rgba(118, 118, 118, 0.4); background-image: url(/images/head.png); background-size: contain; background-repeat: no-repeat; background-color: rgba(234, 28, 39); } .login .top .head .green { position: absolute; right: -10px; bottom: -8px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; transform: translate(-50%, -50%); box-shadow: 0px 5px 10px 0px rgba(118, 118, 118, 0.4); background-color: rgba(9, 241, 117); } 表单区域 直接搬.less过来，清除一些。这里面挺多细节的，先说好字体大小浏览器最小只能是12px，除非你把自己浏览器最小字号调到10px，视觉上好看一些，不然下面复选框的字会换行。 添加了textChange类，因为需要点击输入框之后样式的改变。 这里耗费我比较多的时间，挺多细节，毕竟我这个人追求完美。 .less form { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; margin-top: 8px; .input { .text { position: relative; width: 100%; border-bottom: 1px solid #ccc; margin-bottom: 5px; .icon-QQ { position: absolute; left: 0; top: 0; color: rgba(184, 186, 188); } .icon-xiala { position: absolute; right: 0; top: 0; } } .password { position: relative; width: 100%; border-bottom: 1px solid #ccc; .icon-suoding_huaban { position: absolute; left: 2px; top: 4px; font-size: 12px; color: rgba(184, 186, 188); } .icon-jianpan_o { position: absolute; right: 0; top: 0; } } // 要放在后面，不然层叠 .textChange { border-bottom: 1px solid rgba(28, 196, 252); .icon-QQ { color: rgba(28, 196, 252); } } .passWordChange { border-bottom: 1px solid rgba(28, 196, 252); .icon-suoding_huaban { color: rgba(28, 196, 252); } } input { width: 80%; height: 20px; /* 去掉默认边框样式 */ border: 0; outline: none; } } .check { display: flex; justify-content: space-between; width: 100%; margin: 5px 0; font-size: 10px; color: rgba(166, 166, 166); // 多选框大小 input { // ohhhhhhhhhhh float: left; transform: scale(.8); } label { position: relative; margin-right: 12px; } a { color: rgba(166, 166, 166); } a:hover { color: rgba(166, 190, 177); } } // 点击登录 .loginBtn { width: 100%; height: 28px; border-radius: 3px; background-color: rgba(28, 196, 252); color: #fff; font-size: 12px; } .loginBtn:active { background-color: rgba(34, 174, 250); } } .signup { position: absolute; left: 0; bottom: 0; margin: 5px; font-size: 10px; color: rgba(166, 166, 166); } .signup:hover { color: rgba(166, 190, 177) } JS相关 拖拽界面、界面关闭、输入框显示、点击二维码使用手机登录 部分代码不法暂时 某尾有原文链接 .js // window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，CSS文件等），就调用的处理函数。 window.addEventListener('load', function() { // 1.登录界面 // 关闭 var jianhao = this.document.querySelector('.icon-jianhao'); var chenghao = this.document.querySelector('.icon-chenghao'); var login = this.document.querySelector('.login'); jianhao.addEventListener('click', function() { login.style.display = 'none'; }) chenghao.addEventListener('click', function() { login.style.display = 'none'; }) // 输入框 var text = this.document.querySelector('.text'); var password = this.document.querySelector('.password'); var textInput = text.querySelector('input'); var passwordInput = password.querySelector('input'); textInput.addEventListener('focus', function() { this.placeholder = ''; text.className = 'text textChange'; }) textInput.addEventListener('blur', function() { this.placeholder = 'QQ号码/手机/邮箱'; text.className = 'text'; }) passwordInput.addEventListener('focus', function() { this.placeholder = ''; password.className = 'password passWordChange'; }) passwordInput.addEventListener('blur', function() { this.placeholder = '密码'; password.className = 'password'; }) // 拖拽界面 // 新的坐标 = 鼠标离盒子内距离 - 鼠标距离在网页距离 var top = this.document.querySelector('.top'); top.addEventListener('mousedown', function(e) { var x = e.pageX - login.offsetLeft; var y = e.pageY - login.offsetTop; document.addEventListener('mousemove', move); function move(e) { login.style.left = e.pageX - x + 'px'; login.style.top = e.pageY - y + 'px'; } document.addEventListener('mouseup', function() { document.removeEventListener('mousemove', move); }) }) // 手机登录 var ico = this.document.querySelector('.icon-ico'); var mobile = this.document.querySelector('.mobile'); var bottom = this.document.querySelector('.bottom'); var head = this.document.querySelector('.head'); var back = this.document.querySelector('.back'); ico.addEventListener('click', function() { mobile.style.display = 'block'; bottom.style.display = 'none'; head.style.display = 'none'; }) back.addEventListener('click', function() { bottom.style.display = 'block'; head.style.display = 'block'; mobile.style.display = 'none'; }) }) 总结 多动手技术才会提升，写代码才会熟练，之后也会更新这一系列文章。 ———————————————— 版权声明：本文为CSDN博主「叶子与海」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/btufdycxyffd/article/details/127507693 -
部分代码无法暂时 某尾有原文链接可查HTML+CSS+JavaScript实现 先点赞后观看,养成好习惯 “不想动手的小伙伴可以直接拿网盘成品” 阿里云盘------提取码: 0d5j 效果图 注:任意浏览器都可以,建议使用谷歌浏览器 代码部分 代码如下仅供参考 可以直接拿去复制粘贴 <!DOCTYPE html> <html> <head> <title></title> <script src="js/jquery.min.js"></script> </head> <style> * { padding: 0; margin: 0; } html, body { height: 100%; padding: 0; margin: 0; background: #000; } .aa { position: fixed; left: 50%; bottom: 10px; color: #ccc; } .container { width: 100%; height: 100%; } canvas { z-index: 99; position: absolute; width: 100%; height: 100%; } </style> <body> <!-- 樱花 --> <div id="jsi-cherry-container" class="container"> <audio autoplay="autopaly"> <source src="renxi.mp3" type="audio/mp3" /> </audio> <img class="img" src="./123.png" alt="" /> <!-- 爱心 --> <canvas id="pinkboard" class="container"> </canvas> </div> </body> </html>
-
如何让单选框选中后下次进入后还能保持选中啊？或者如何让网页自动判断单选框被选择过？
推荐直播
-
HDC深度解读系列 - Serverless与MCP融合创新，构建AI应用全新智能中枢2025/08/20 周三 16:30-18:00
张昆鹏 HCDG北京核心组代表
HDC2025期间，华为云展示了Serverless与MCP融合创新的解决方案，本期访谈直播，由华为云开发者专家(HCDE)兼华为云开发者社区组织HCDG北京核心组代表张鹏先生主持，华为云PaaS服务产品部 Serverless总监Ewen为大家深度解读华为云Serverless与MCP如何融合构建AI应用全新智能中枢
回顾中 -
关于RISC-V生态发展的思考2025/09/02 周二 17:00-18:00
中国科学院计算技术研究所副所长包云岗教授
中科院包云岗老师将在本次直播中，探讨处理器生态的关键要素及其联系，分享过去几年推动RISC-V生态建设实践过程中的经验与教训。
回顾中 -
一键搞定华为云万级资源，3步轻松管理企业成本2025/09/09 周二 15:00-16:00
阿言 华为云交易产品经理
本直播重点介绍如何一键续费万级资源，3步轻松管理成本，帮助提升日常管理效率！
回顾中
热门标签