当前位置: 首页 > 科技观察

JavaScript技巧——检查文件大小等

时间:2023-03-14 13:34:07 科技观察

在本文中,我们将研究一些常见JavaScript问题的解决方案。使用JavaScript使窗口全屏显示我们可以使用全屏API使窗口全屏显示。例如我们可以这样写:document.documentElement.requestFullscreen();我们只需调用requestFullScreen方法将窗口更改为全屏模式。然后我们可以调用document.exitFullScreen退出全屏模式。将JavaScriptNodeList转换为数组的最快方法我们可以使用展开运算符(...)或Array.from方法将JavaScriptNodeList转换为数组。例如,我们可以这样写:constels=Array.from(document.querySelectorAll('p'));我们可以通过以下方式使用展开运算符:constels=[...document.querySelectorAll('p')];every将每个单词的首字母大写我们可以使用一些数组方法将每个单词的首字母大写。例如,我们可以这样写:str=str.toLowerCase().split('').map((s)=>`${s.charAt(0).toUpperCase()}${s.substring(1)}`).加入('');我们首先将字符串转换为小写,然后使用split来拆分单词。然后我们调用map来匹配每个单词,使第一个字母大写,其余字母小写。最后,我们调用join将单词重新组合在一起。JavaScript文件上传大小验证我们可以在不使用任何库的情况下验证文件的大小。例如,我们可以这样写:然后我们可以这样写:constvalidateSize=(file)=>{constfileSize=file.files[0].size;if(fileSize>2*(1024**2)){console.log('Filesizeexceeds2MB');}else{//...}}我们只获取file.files[0].size属性来验证第一个文件选择的大小的。file是文件输入。files有一个或多个选定的文件。尺寸就是尺寸。向DOM元素添加类要向DOM元素添加类,我们可以使用classList属性的add方法。比如我们可以这样写:constelement=document.querySelector('div');element.classList.add('baz');我们得到了div元素,然后我们就可以使用classList的add方法来添加类名了。将%用于模运算%运算符用于将一个数的余数除以另一个数。但我们也可以用它来获得一个数字模另一个。例如,我们可以这样写:constmod=(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中查找一个元素。例如,我们可以这样写:constfileInput=document.querySelector("input[type=file]");我们使用querySelector获取文件输入。它接受任何CSS选择器,包括属性选择器。type是属性,file是值。我们还可以使用querySelectorAll获取一组具有相同选择器的元素。