JavaScript图片打印方案实例详解
最近有个页面打印图片的小需求。就是系统界面展示有一些证件照片,我们希望可以点击图片旁边的打印小按钮,就可以将这张图片直接打印到A4纸张上,例如下图效果: 其实浏览器 window 对象提供了 print 方法,就可以对整个页面进行打印。只需要点击按钮执行以下方法即可。 window.prin »
JavaScript图片打印方案实例详解
最近有个页面打印图片的小需求。就是系统界面展示有一些证件照片,我们希望可以点击图片旁边的打印小按钮,就可以将这张图片直接打印到A4纸张上,例如下图效果: 其实浏览器 window 对象提供了 print 方法,就可以对整个页面进行打印。只需要点击按钮执行以下方法即可。 window.prin »
JavaScript DOM API的使用教程及综合案例
目录 一. 什么是DOM 二. 最常用的DOM API 1. 选中页面元素 2. 操作元素的属性 2.1 事件概念 2.2 获取/修改元素内容 2.4 获取/修改元素属性 2.5 获取/修改表单元素属性 2.6 获取修改样式属性 3. 操作页面节点 3.1 新增节点 3.2 删除节点 »
javascript获取时间戳的5种方法详解
js/javascript获取时间戳的5种方法 1.获取时间戳精确到秒,13位 const timestamp = Date.parse(new Date()); console.log(timestamp); //输出 1591669256000 13位 2.获取时间戳精确到毫 »
JavaScript利用el-table实现绘制热度表
实现效果 实现代码 <div class="gray w-full h-100 mt-4 table" v-if="props.brandId"> <el-table :data="brandHotList" :header-cell-style="{ »
JavaScript实现异步任务循环顺序执行详解
目录 一、错误的实现 简单的错误实现 使用 Promise.all 的错误实现 二、正确的实现 需求场景:数组的元素作为异步任务的参数,循环遍历该数组,并执行异步任务。 一、错误的实现 简单的错误实现 // 异步任务的参数数组 const arr = [1, 2, 3, 4] »
JavaScript实现异步任务循环顺序执行详解
目录 一、错误的实现 简单的错误实现 使用 Promise.all 的错误实现 二、正确的实现 需求场景:数组的元素作为异步任务的参数,循环遍历该数组,并执行异步任务。 一、错误的实现 简单的错误实现 // 异步任务的参数数组 const arr = [1, 2, 3, 4] »
JavaScript去除字符串两端空格的三种方法
本文主要介绍了JavaScript去除字符串两端空格的三种方法,具体如下: //方法一:正则表达式 function _trim(string) { // 补全代码 var reg=/^s*|s*$/g; //使用正则表达式,s为空格,^s为开头的空格,*代 »
JavaScript去除字符串两端空格的三种方法
本文主要介绍了JavaScript去除字符串两端空格的三种方法,具体如下: //方法一:正则表达式 function _trim(string) { // 补全代码 var reg=/^s*|s*$/g; //使用正则表达式,s为空格,^s为开头的空格,*代 »
JavaScript实现树结构转换的五种方法总结
目录 方法一:使用递归 方法二:使用循环 方法三:使用 reduce 方法四:使用哈希表 方法五:使用深度优先搜索 总结 在 JavaScript 编程中,将数组转换为树结构是一个常见的需求。本篇博客将介绍五种常用的方法来实现数组转树结构,并讨论每种方法的时间复杂度、空间复杂度和最优解。 假 »
JavaScript实现树结构转换的五种方法总结
目录 方法一:使用递归 方法二:使用循环 方法三:使用 reduce 方法四:使用哈希表 方法五:使用深度优先搜索 总结 在 JavaScript 编程中,将数组转换为树结构是一个常见的需求。本篇博客将介绍五种常用的方法来实现数组转树结构,并讨论每种方法的时间复杂度、空间复杂度和最优解。 假 »
JavaScript实现封装一个快速生成目录树的全局脚本
目录 说在前面 思路分析 功能实现 一、使用命令行交互来获取所需参数 二、编写目录文件树生成逻辑 三、封装成全局插件 四、插件安装使用 源码地址 说在前面 我们在很多地方都可以看到有这样的目录树结构,目录树可以很好的介绍项目中各文件目录的用途,帮助读者了解整个项目结构。由于自己在 »
JavaScript实现封装一个快速生成目录树的全局脚本
目录 说在前面 思路分析 功能实现 一、使用命令行交互来获取所需参数 二、编写目录文件树生成逻辑 三、封装成全局插件 四、插件安装使用 源码地址 说在前面 我们在很多地方都可以看到有这样的目录树结构,目录树可以很好的介绍项目中各文件目录的用途,帮助读者了解整个项目结构。由于自己在 »
JavaScript+Canvas实现带跳动效果的粒子动画
目录 前言 实现过程 运行效果 总结 前言 用 HTML5 的 Canvas 元素实现一个带有跳动效果的粒子动画。会用到 Canvas 的2D渲染上下文,通过 JavaScript 编写绘图代码,实现画布上一系列粒子的随机运动和相互作用。还会使用 CSS3 动画属性,使得画布背景颜色和粒子 »
JavaScript+Canvas实现带跳动效果的粒子动画
目录 前言 实现过程 运行效果 总结 前言 用 HTML5 的 Canvas 元素实现一个带有跳动效果的粒子动画。会用到 Canvas 的2D渲染上下文,通过 JavaScript 编写绘图代码,实现画布上一系列粒子的随机运动和相互作用。还会使用 CSS3 动画属性,使得画布背景颜色和粒子 »
浅析JavaScript中的Proxy对象
目录 什么是Proxy Proxy的用途 数据验证 日志记录 性能分析 缓存 创建Proxy对象 Proxy的限制 总结 什么是Proxy Proxy是JavaScript的一个内置对象,它允许您拦截并自定义对象的行为。它提供了一种拦截对象操作的方式,这意味着您可以在对象上执行操 »
JavaScript的concat方法实例代码(数组连接)
目录 1.连接2个数组 2.连接3个数组 3.连接值到数组 有趣的知识 对象也是可以连的 数组默认展开 对象默认不展开 字符串的concat方法 JavaScript concat() 方法 定义和用法 concat() 方法用于连接两个或多个数组。 该方法不会改变现有的数组,而是 »
javascript中的Array对象(数组的合并、转换、迭代、排序、堆栈)
目录 创建数组和数组检测 1、使用Array构造函数 创建数组。 2、使用 数组字面量法 创建数组 3、检测数组 数组转换 队列和栈 合并&拼接 concat() splice() 项的位置 数组排序 数组迭代 总结 创建数组和数组检测 1、使用Array构造 »
前端性能精进之浏览器(五)——JavaScript
JavaScript 是一种通过解释执行的高级编程语言,同时也是一门动态、弱类型的直译脚本语言,适合面向对象(基于原型)和函数式的编程风格。 直译语言可以直接在解释器中运行,而与直译语言相对应的编译语言(例如 C++),要先将代码编译为机器码,然后才能运行。 不过直译语言有一个弱点,就是 »
前端性能精进之浏览器(五)——JavaScript
JavaScript 是一种通过解释执行的高级编程语言,同时也是一门动态、弱类型的直译脚本语言,适合面向对象(基于原型)和函数式的编程风格。 直译语言可以直接在解释器中运行,而与直译语言相对应的编译语言(例如 C++),要先将代码编译为机器码,然后才能运行。 不过直译语言有一个弱点,就是 »