文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript技巧—检查文件大小等

2024-12-11 19:04

关注
[[334516]]

使用JavaScript使窗口全屏显示

我们可以使用全屏API使窗口全屏显示。

例如,我们可以这样写:

  1. document.documentElement.requestFullscreen(); 

我们只是调用 requestFullScreen 方法将窗口更改为全屏模式。

然后,我们可以调用 document.exitFullScreen 退出全屏模式。

将JavaScript NodeList转换为数组的最快方法

我们可以使用扩展运算符(...)或 Array.from 方法将JavaScript NodeList转换为数组。

例如,我们可以这样写:

  1. const els = Array.from(document.querySelectorAll('p')); 

我们可以通过以下方式使用传播运算符:

  1. const els = [...document.querySelectorAll('p')]; 

每个单词的首字母大写

我们可以使用一些数组方法将每个单词的首字母大写。

例如,我们可以这样写:

  1. str = str.toLowerCase() 
  2.   .split(' '
  3.   .map((s) => `${s.charAt(0).toUpperCase()}${s.substring(1)}`) 
  4.   .join(' '); 

我们首先将字符串转换为小写,然后使用 split 拆分单词。

然后我们调用 map 来匹配每个单词,使其首字母大写,其余小写。

最后,我们调用 join 将单词重新组合在一起。

JavaScript文件上传大小验证

我们可以在不使用任何库的情况下验证文件的大小。

例如,我们可以这样写:

  1. "validateSize(this)" type="file"

然后我们可以写:

  1. const validateSize = (file) => { 
  2.   const fileSize = file.files[0].size
  3.   if (fileSize > 2 * (1024 ** 2)) { 
  4.     console.log('File size exceeds 2 MB'); 
  5.   } else { 
  6.     //... 
  7.   } 

我们只是获得 file.files[0].size 属性来验证所选的第一个文件的大小。

file 是文件输入。

files 具有一个或多个选定文件。

size 就是大小。

将类添加到DOM元素

要将类添加到DOM元素,我们可以使用 classList 属性的 add 方法。

例如,我们可以这样写:

  1. const element = document.querySelector('div'); 
  2. element.classList.add('baz'); 

我们得到了div元素,然后可以使用 classList 的 add 方法添加类名。

使用%来进行模块运算

% 运算符用于将一个数字的余数除以另一个。

但我们也可以用它来得到一个数字mod另一个数字。

例如,我们可以这样写:

  1. const mod = (m, n) => ((m % n) + n) % n; 

我们首先得到 m 除以 n 的余数。

然后我们再加上 n ,使之成为正数。

最后,我们得到该值除以 n 的余数 。

并列N个数组的最有效方法

我们可以使用 push 方法连接一个或多个数组。

为此,我们可以编写:

  1. arr.push(...a, ...b) 

然后,来自 a 和 b 的所有项目将附加到 arr。

我们还可以将 concat 与多个数组一起使用。

例如,我们可以这样写:

  1. arr = arr.concat(array, array1, array2, array3); 

我们调用 concat,这样我们就把每个数组的条目放在 arr 的条目之后的新数组中。

然后返回该数组。

因此,我们必须把它分配给 arr,以更新它的返回值。

根据属性值在DOM中查找元素

我们可以基于属性值在DOM中找到一个元素。

例如,我们可以这样写:

  1. const fileInput = document.querySelector("input[type=file]"); 

我们通过使用 querySelector 获得文件输入。

它接受任何CSS选择器,包括属性选择器。

type 是属性,file 是值。

我们也可以通过使用 querySelectorAll 得到一组具有相同选择器的元素。

 

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯