常见JavaScript问题的解决方案是怎样的
这期内容当中小编将会给大家带来有关常见JavaScript问题的解决方案是怎样的,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
创新互联建站-专业网站定制、快速模板网站建设、高性价比商州网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式商州网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖商州地区。费用合理售后完善,10多年实体公司更值得信赖。
使用JavaScript使窗口全屏显示
我们可以使用全屏API使窗口全屏显示。
例如,我们可以这样写:
document.documentElement.requestFullscreen();
我们只是调用 requestFullScreen 方法将窗口更改为全屏模式。
然后,我们可以调用 document.exitFullScreen 退出全屏模式。
将JavaScript NodeList转换为数组的最快方法
我们可以使用扩展运算符(...)或 Array.from 方法将JavaScript NodeList转换为数组。
例如,我们可以这样写:
const els = Array.from(document.querySelectorAll('p'));
我们可以通过以下方式使用传播运算符:
const els = [...document.querySelectorAll('p')];
每个单词的首字母大写
我们可以使用一些数组方法将每个单词的首字母大写。
例如,我们可以这样写:
str = str.toLowerCase() .split(' ') .map((s) => `${s.charAt(0).toUpperCase()}${s.substring(1)}`) .join(' ');
我们首先将字符串转换为小写,然后使用 split 拆分单词。
然后我们调用 map 来匹配每个单词,使其首字母大写,其余小写。
最后,我们调用 join 将单词重新组合在一起。
JavaScript文件上传大小验证
我们可以在不使用任何库的情况下验证文件的大小。
例如,我们可以这样写:
然后我们可以写:
const validateSize = (file) => { const fileSize = file.files[0].size; if (fileSize > 2 * (1024 ** 2)) { console.log('File size exceeds 2 MB'); } else { //... } }
我们只是获得 file.files[0].size 属性来验证所选的第一个文件的大小。
file 是文件输入。
files 具有一个或多个选定文件。
size 就是大小。
将类添加到DOM元素
要将类添加到DOM元素,我们可以使用 classList 属性的 add 方法。
例如,我们可以这样写:
const element = document.querySelector('div'); element.classList.add('baz');
我们得到了div元素,然后可以使用 classList 的 add 方法添加类名。
使用%来进行模块运算
% 运算符用于将一个数字的余数除以另一个。
但我们也可以用它来得到一个数字mod另一个数字。
例如,我们可以这样写:
const mod = (m, n) => ((m % n) + n) % n;
我们首先得到 m 除以 n 的余数。
然后我们再加上 n ,使之成为正数。
最后,我们得到该值除以 n 的余数 。
并列N个数组的最有效方法
我们可以使用 push 方法连接一个或多个数组。
为此,我们可以编写:
arr.push(...a, ...b)
然后,来自 a 和 b 的所有项目将附加到 arr。
我们还可以将 concat 与多个数组一起使用。
例如,我们可以这样写:
arr = arr.concat(array, array1, array2, array3);
我们调用 concat,这样我们就把每个数组的条目放在 arr 的条目之后的新数组中。
然后返回该数组。
因此,我们必须把它分配给 arr,以更新它的返回值。
根据属性值在DOM中查找元素
我们可以基于属性值在DOM中找到一个元素。
例如,我们可以这样写:
const fileInput = document.querySelector("input[type=file]");
我们通过使用 querySelector 获得文件输入。
它接受任何CSS选择器,包括属性选择器。
type 是属性,file 是值。
我们也可以通过使用 querySelectorAll 得到一组具有相同选择器的元素。
上述就是小编为大家分享的常见JavaScript问题的解决方案是怎样的了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。
文章标题:常见JavaScript问题的解决方案是怎样的
转载来于:http://azwzsj.com/article/jpoogj.html