JavaScript
学而不思则忘
一切都可以
展开
-
for 循环中使用 setTimeout 的问题
问题引入下面代码的输出结果不是间隔3秒依次输出 1, 2, 3, 4, 5。而是隔了3秒连续输出6。这是为什么呢? for (var i = 1; i <= 5; i++){ setTimeout(function timer() { console.log(i) }, 3000); }先说JS的执行机制和作用域首先,JavaScript是单线程环境,代码从上到下依次执行。这种执行方式被称作为是“同步执行”。但是,JavaScript引进了异步执行机制。所原创 2020-08-28 10:34:49 · 1121 阅读 · 1 评论 -
数组扁平化——flat方法理解
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flatflat方法的使用:flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。参数:指定要提取嵌套数组的结构深度,默认值为 1。简单理解:就是要减去数组的层数(要讲数组降低几层)const arr1 = [0, 1, 2, [3, 4]];console.lo原创 2020-08-27 16:47:38 · 3364 阅读 · 0 评论 -
原生JS禁用<button>按钮的方法
document.getElementById("button1").disabled = true document.getElementById("button1").setAttribute("disabled", "true")原创 2020-08-26 20:16:35 · 3528 阅读 · 0 评论 -
JavaScript时间处理函数的封装
export function formatDate(date, fmt) { // 获取年份 if (/(y+)/.test(fmt)) { // RegExp.$1 ——> 就是匹配到的结果: yyyy // date.getFullYear() + '' ——> 将数字转化为字符串 // substr(4 - RegExp.$1.length) ——> 从第几位开始截取. 如果是 yy , 就从第2位开始截取 fmt = fmt.re原创 2020-08-20 16:56:39 · 255 阅读 · 0 评论 -
JavaScript高阶函数的使用
filter()函数的使用filter()函数中回调函数要求:必须返回一个boolean值true:当返回为true时,函数内部会自动将这次回调的 n 加入到新的数组中false:当返回false时,函数内部会过滤掉这次的 nconst nums = [10, 12, 20, 50, 60, 120, 420, 321];let newNums = nums.filter(function (n) { return n < 100;})console.log(newNums);原创 2020-07-08 23:46:46 · 143 阅读 · 0 评论 -
JavaScript动画特效——Canvas粒子动画
这次,将制作飘雪的效果,如果用CSS动画样式来做的话,可以想象,那是有多么难。所以就用JavaScript来制作。Canvas官方教程,很详细:http://canvas.migong.org/category/canvas-animation要使用Canvas,则需要在HTML中插入相应的DOM结构:<canvas id="myCanvas" width="1000" height=...原创 2019-09-15 15:28:07 · 2071 阅读 · 0 评论 -
GSAP动画效果一
GSAP是第三方动画引擎类库,用GSAP来制作一些动画。先插入一个飞机照片:<img src="shuttle.png" id="shuttle">对其与页面先进行设置:飞机图片定位到下边中间。 html, body{ height: 100%; } body{ background: #363434b6; margin: 0%; ...原创 2019-09-15 19:59:45 · 4092 阅读 · 0 评论 -
GSAP动画效果二
使用GSAP简单的绘制一个线条变化的盒子:<div id="box"></div>设置CSS样式,显示盒子: <style type="text/css"> html, body{ height: 100%; } body{ ...原创 2019-09-15 21:16:48 · 708 阅读 · 0 评论 -
GSAP动画效果三——3D动画
这次多设计几个盒子,来制作3D动画。 <body> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box">&...原创 2019-09-15 21:32:18 · 1011 阅读 · 0 评论