Arr.shift
时间: 2023-08-27 18:07:57 浏览: 24
`Arr.shift()` 是 JavaScript 数组方法之一,用于移除并返回数组的第一个元素。这个方法会改变原数组,将所有元素向前移一位,所以数组的长度会减小1。如果数组为空,则返回 `undefined`。例如:
```
const arr = [1, 2, 3];
const firstElement = arr.shift(); // 移除并返回 1
console.log(arr); // [2, 3]
console.log(firstElement); // 1
```
需要注意的是,数组的 `shift()` 方法是一个比较耗时的操作,因为需要移动数组中的所有元素,所以在处理大量数据时应该尽量避免使用。
相关问题
function playVoice(arr, music) { //playFile 保存arr头一个音频文件 let playFile = arr.shift() //playFile 为空时结束语音播放 if (!playFile) { music = null // music.extractData() return } music.src = playFile music.play() music.onStop(function(res) { if (arr.length == 0) { music = null } else { playVoice(arr, music) } }) }
这是一段 JavaScript 代码,它定义了一个名为 `playVoice` 的函数,该函数接受两个参数:一个数组 `arr` 和一个音乐对象 `music`。该函数的作用是播放 `arr` 中的音频文件。
具体来说,该函数会从 `arr` 中取出第一个音频文件,并将其赋值给 `playFile` 变量。如果 `playFile` 为空,则说明 `arr` 中的所有音频文件已经播放完毕,此时将音乐对象 `music` 置为空并退出函数。
如果 `playFile` 不为空,则将其赋值给音乐对象的 `src` 属性,并调用 `play` 方法开始播放音频文件。同时,该函数还监听了音乐对象的 `onStop` 事件。当该事件被触发时,说明当前播放的音频文件已经播放完毕,此时会判断 `arr` 中是否还有未播放的音频文件。如果还有,则递归调用 `playVoice` 函数继续播放下一个音频文件;否则将音乐对象 `music` 置为空。
export default function canvasBg(){ window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); var c = document.getElementById('canvas'); var $ = c.getContext('2d'); var w = c.width = window.innerWidth; var h = c.height = window.innerHeight; var _w = w * 0.5; var _h = h * 0.5; var arr = []; var cnt = 0; window.addEventListener('load', resize); window.addEventListener('resize', resize, false); function resize() { c.width = w = window.innerWidth; c.height = h = window.innerHeight; c.style.position = 'absolute'; c.style.left = (window.innerWidth - w) * .01 + 'px'; c.style.top = (window.innerHeight - h) * .01 + 'px'; } function anim() { cnt++; if (cnt % 6) draw(); window.requestAnimFrame(anim); } anim(); function draw() { var splot = { x: rng(_w - 900, _w + 900), y: rng(_h - 900, _h + 900), r: rng(20, 80), spX: rng(-1, 1), spY: rng(-1, 1) }; arr.push(splot); while (arr.length > 100) { arr.shift(); } $.clearRect(0, 0, w, h); for (var i = 0; i < arr.length; i++) { splot = arr[i];; $.fillStyle = rndCol(); $.beginPath(); $.arc(splot.x, splot.y, splot.r, 0, Math.PI * 2, true); $.shadowBlur = 80; $.shadowOffsetX = 2; $.shadowOffsetY = 2; $.shadowColor = rndCol(); $.globalCompositeOperation = 'lighter'; $.fill(); splot.x = splot.x + splot.spX; splot.y = splot.y + splot.spY; splot.r = splot.r * 0.96; } } function rndCol() { var r = Math.floor(Math.random() * 180); var g = Math.floor(Math.random() * 60); var b = Math.floor(Math.random() * 100); return "rgb(" + r + "," + g + "," + b + ")"; } function rng(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } }
这是一个用 JavaScript 实现的 canvas 背景效果,它会在 canvas 元素上绘制一些圆形的粒子,并给这些粒子添加阴影和颜色渐变,形成一个动态的背景效果。具体实现方式是通过 setInterval() 方法不断调用 draw() 函数来更新画布。在 anim() 函数中通过 requestAnimationFrame() 方法来循环调用 draw() 函数,以达到动态更新的效果。resize() 函数会在页面大小发生改变时调用,重新设置 canvas 元素的宽高和位置。rng() 函数用来生成一个指定范围内的随机数,rndCol() 函数用来生成一个随机的颜色值。