Three.js實(shí)現(xiàn)3d面積圖功能詳細(xì)代碼示例
更新時(shí)間：2025年11月27日 10:54:24 作者：夢(mèng)凡塵
Three.js是一個(gè)用于在Web瀏覽器中創(chuàng)建和渲染3D圖形的JavaScript庫,它提供了一系列強(qiáng)大的功能和工具,使開發(fā)者能夠輕松地在網(wǎng)頁中創(chuàng)建交互式的3d效果,這篇文章主要介紹了Three.js實(shí)現(xiàn)3d面積圖功能的相關(guān)資料,需要的朋友可以參考下
一，使用 Line2 創(chuàng)建線框
使用 Line2 創(chuàng)建的線段可以修改線段粗細(xì)。
/**
* @description: 根據(jù)頂點(diǎn)坐標(biāo)數(shù)組繪制線段
* @return {*}
*/
const createLine = (points: number[], linewidth = 0.8, lineColor = 0x7a7a7a) => {
const geometry = new LineGeometry();
geometry.setPositions(points); // 設(shè)置頂點(diǎn)坐標(biāo)
const material = new LineMaterial({
color: lineColor,
linewidth: linewidth, // 控制粗細(xì)
resolution: new THREE.Vector2(canvasRef.value?.offsetWidth, canvasRef.value?.offsetHeight)
});
const line = new Line2(geometry, material);
line.layers.set(0)
state.scene.add(line);
}二，ExtrudeGeometry 創(chuàng)建拉伸幾何體
1，獲取面積圖上方二維點(diǎn)集。
將 y 軸真實(shí)數(shù)據(jù)值轉(zhuǎn)換為三維坐標(biāo)，其中最重要的是根據(jù)真實(shí)值獲取 y 軸最大值，然后根據(jù) y 軸真實(shí)數(shù)據(jù)最大值和 y 軸分段數(shù)計(jì)算出 y 軸轉(zhuǎn)換比例。
根據(jù)接口返回的數(shù)據(jù)獲取 y 軸最大值 maxValue
根據(jù) y 軸最大值獲取 y 軸坐標(biāo)最大值
// 根據(jù)當(dāng)前系列最大值計(jì)算坐標(biāo)軸最大值
// 獲取小數(shù)點(diǎn)前面的整數(shù)位，字符串
let tempIntegerStr = '';
// 先判斷最大值是否包含小數(shù)
if(String(maxValue).includes('.')){
// 包含小數(shù), 向下取整
tempIntegerStr = String(Math.floor(maxValue));
}else{
// 不包含小數(shù), 直接賦值
tempIntegerStr = String(maxValue);
}
// 可以適當(dāng)縮小tempPower 以控制坐標(biāo)軸最大值的精確度，分母越大，精確度越高
// 例如： 默認(rèn) tempPower = Math.pow(10, tempIntegerStr.length - 1)；
// 當(dāng) tempPower = Math.pow(10, tempIntegerStr.length - 1) / 2 時(shí)的坐標(biāo)軸的最大值精確度就會(huì)更高
// 直到坐標(biāo)軸的最大值等于數(shù)據(jù)中的最大值，再增加分母，計(jì)算的坐標(biāo)軸的最大值就不再會(huì)改變。
const tempPower = Math.pow(10, tempIntegerStr.length - 1) / 2;
// 向上取整,計(jì)算坐標(biāo)軸合適的最大值
state.yAxisMaxValue = Math.ceil(maxValue / tempPower) * tempPower;
// 坐標(biāo)軸最大值保留兩位小數(shù)
state.yAxisMaxValue = Number(state.yAxisMaxValue.toFixed(2));根據(jù) y 軸坐標(biāo)最大值和三維分段數(shù)計(jì)算 y 軸轉(zhuǎn)換比例及 x 軸轉(zhuǎn)換比例。
// 計(jì)算 y 軸三維坐標(biāo)系與數(shù)值轉(zhuǎn)換比例，保留兩位小數(shù)
state.yAxisRate = Number(( state.yAxisMaxValue / BoxSize.height).toFixed(2));
// 計(jì)算 x 軸的轉(zhuǎn)換比例,也就是 x 軸每段的長(zhǎng)度
state.xAxisRate = Number((BoxSize.width / state.seriesData[0].data.length).toFixed(2));獲取二維點(diǎn)集
// 獲取當(dāng)前系列的二維點(diǎn)集合
const points = [] as THREE.Vector2[];
item?.data?.forEach((cItem: DataItem, cIndex: number) => {
points.push(new THREE.Vector2(cItem.x, cItem.y / state.yAxisRate));
})2，生成 shape，使用 shape 創(chuàng)建拉伸幾何體
根據(jù) shapeGeometry.boundingBox 可以獲取 uv 坐標(biāo)的取值范圍，便于創(chuàng)建漸變 shader
shape 經(jīng)過拉伸之后形成的幾何體共有兩個(gè)面，一個(gè)是前面和后面，一個(gè)是經(jīng)過拉伸形成的面。
// 創(chuàng)建二維點(diǎn)集虛線
const splineCurve = new THREE.SplineCurve(points);
// 創(chuàng)建 shape
const shape = new THREE.Shape(splineCurve.getPoints(1000));
// 連接右平面
shape.lineTo(points[points.length -1].x, 0);
// 連接 x 所在的底邊
shape.lineTo(points[0].x, 0);
// 連接左平面
shape.lineTo(points[0].x, points[0].y);
// 拉伸 shape
const shapeGeometry = new THREE.ExtrudeGeometry(shape, {
depth: BoxSize.depth,
step:2,
bevelEnabled: false,
curveSegments: 1000,
bevelThickness: 0.1,
bevelSegments: 0,
});
shapeGeometry.computeBoundingBox();
console.log('拉伸幾何體-----', shapeGeometry.boundingBox, state.scene)
// 創(chuàng)建材質(zhì)集合
const materialList = [gradientShaderMaterial1, gradientShaderMaterial2];
// const materialList = [colorShaderMaterial, colorShaderMaterial];
// 創(chuàng)建網(wǎng)格
const mesh = new THREE.Mesh(shapeGeometry, materialList);
mesh.name = AreaName.areaGeometryMesh;
mesh.position.set(0, 0, 0);
mesh.layers.set(0);
state.scene.add(mesh);其中 gradientShaderMaterial1 創(chuàng)建線形漸變，gradientShaderMaterial2 創(chuàng)建居中漸變。
三，使用精靈貼圖生成坐標(biāo)軸文本
將 canvas 創(chuàng)建的文本作為精靈材質(zhì)的紋理參數(shù)，生成精靈圖，會(huì)一直面向相機(jī)。
/**
* @description: 創(chuàng)建文本
* @param {*} text
* @param {*} axis
* @return {*}
*/
const createText = (text: string, axis: number[],textPos:number[],scale: number[]) => {
// 創(chuàng)建一個(gè) canvas 元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = 'bold 98px Arial';
ctx.fillStyle = '#ffffff';
// ctx?.fillRect(0, 0, canvas.width, canvas.height);
// ctx.fillStyle = '#ff0000';
ctx.fillText(text, textPos[0], textPos[1]);
// 創(chuàng)建一個(gè)紋理
const texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
// 創(chuàng)建一個(gè)精靈圖材質(zhì)
const spriteMaterial = new THREE.SpriteMaterial({
map: texture,
// transparent: true,
});
// 創(chuàng)建一個(gè)精靈圖
const sprite = new THREE.Sprite(spriteMaterial);
sprite.position.set(axis[0], axis[1] - 1, axis[2]);
sprite.scale.set(12, 12, 1);
state.scene.add(sprite);
sprite.layers.set(0);
}四，創(chuàng)建帶有高斯模糊的鏡面反射
在后面、左側(cè)面、底面分別創(chuàng)建鏡面
修改 Reflector 源碼，添加高斯模糊
void main() {
vec4 sum = vec4( 0.0 );
//縱向高斯模糊
sum += texture2D( tDiffuse, vec2( vUv.x / vUv.w, ( vUv.y - 4.0 * v) / vUv.w ) ) * (0.051/4.0);
sum += texture2D( tDiffuse, vec2( vUv.x / vUv.w, ( vUv.y - 3.0 * v ) / vUv.w ) ) * (0.0918/4.0);
sum += texture2D( tDiffuse, vec2( vUv.x / vUv.w, ( vUv.y - 2.0 * v ) / vUv.w ) ) * (0.12245/4.0);
sum += texture2D( tDiffuse, vec2( vUv.x / vUv.w, ( vUv.y - 1.0 * v ) / vUv.w ) ) * (0.1531/4.0);
sum += texture2D( tDiffuse, vec2( vUv.x / vUv.w, vUv.y / vUv.w ) ) * (0.1633/4.0);
sum += texture2D( tDiffuse, vec2( vUv.x / vUv.w, ( vUv.y + 1.0 * v ) / vUv.w ) ) * (0.1531/4.0);
sum += texture2D( tDiffuse, vec2( vUv.x / vUv.w, ( vUv.y + 2.0 * v ) / vUv.w ) ) * (0.12245/4.0);
sum += texture2D( tDiffuse, vec2( vUv.x / vUv.w, ( vUv.y + 3.0 * v ) / vUv.w ) ) * (0.0918/4.0);
sum += texture2D( tDiffuse, vec2( vUv.x / vUv.w, ( vUv.y + 4.0 * v ) / vUv.w ) ) * (0.051/4.0);
//橫向高斯模糊
sum += texture2D( tDiffuse, vec2( ( vUv.x - 4.0 * h ) / vUv.w, vUv.y / vUv.w ) ) * (0.051/4.0);
sum += texture2D( tDiffuse, vec2( ( vUv.x - 3.0 * h ) / vUv.w, vUv.y / vUv.w ) ) * (0.0918/4.0);
sum += texture2D( tDiffuse, vec2( ( vUv.x - 2.0 * h ) / vUv.w, vUv.y / vUv.w ) ) * (0.12245/4.0);
sum += texture2D( tDiffuse, vec2( ( vUv.x - 1.0 * h ) / vUv.w, vUv.y / vUv.w ) ) * (0.1531/4.0);
sum += texture2D( tDiffuse, vec2( vUv.x / vUv.w, vUv.y / vUv.w ) ) * (0.1633/4.0);
sum += texture2D( tDiffuse, vec2( ( vUv.x + 1.0 * h ) / vUv.w, vUv.y / vUv.w ) ) * (0.1531/4.0);
sum += texture2D( tDiffuse, vec2( ( vUv.x + 2.0 * h ) / vUv.w, vUv.y / vUv.w ) ) * (0.12245/4.0);
sum += texture2D( tDiffuse, vec2( ( vUv.x + 3.0 * h ) / vUv.w, vUv.y / vUv.w ) ) * (0.0918/4.0);
sum += texture2D( tDiffuse, vec2( ( vUv.x + 4.0 * h ) / vUv.w, vUv.y / vUv.w ) ) * (0.051/4.0);
}五，編寫流動(dòng) shader
1，獲取三維點(diǎn)集使用THREE.CatmullRomCurve3，THREE.TubeGeometry 創(chuàng)建外輪廓
/**
* @description: 根據(jù)點(diǎn)集和顏色創(chuàng)建單條外輪廓線，并將網(wǎng)格返回
* @param {*} points 三維點(diǎn)集
* @param {*} color 顏色
* @return {THREE.Mesh}
*/
const createSingleOutLine = (points:any, color:THREE.Color, name = 'outLine') => {
// 首先根據(jù)點(diǎn)集創(chuàng)建曲線路徑
const outlinePath = new THREE.CatmullRomCurve3(points);
// 然后根據(jù)路徑創(chuàng)建管道
const outlineTubeGeometry = new THREE.TubeGeometry(outlinePath, 100, 0.3, 100, false);
// 添加材質(zhì)
const outlineMaterial = new THREE.MeshBasicMaterial({
color,
transparent: true,
opacity: 0.2,
side: THREE.DoubleSide, // 兩面都可見
depthWrite: false,
});
// 添加網(wǎng)格
const outlineMesh = new THREE.Mesh(outlineTubeGeometry, outlineMaterial);
outlineMesh.name = name;
outlineMesh.layers.set(0);
// 添加進(jìn)場(chǎng)景
state.scene.add(outlineMesh);
// 返回網(wǎng)格，有助于進(jìn)行保存，進(jìn)行顯示隱藏操作
return outlineMesh;
};2，編寫居中漸變 shander 并傳入時(shí)間參數(shù)使其流動(dòng)起來
使用 THREE.TubeGeometry 創(chuàng)建管道幾何體傳入 shader 材質(zhì)，修改時(shí)間參數(shù)即可。
/**
* @description: 繪制發(fā)光線路
* @param {*} points 發(fā)光路線的三維點(diǎn)集
* @param {*} material 發(fā)光輪廓線材質(zhì)
* @return {*}
*/
const drawLightLine = (points:THREE.Vector3, material:THREE.ShaderMaterial) => {
const linePath = new THREE.CatmullRomCurve3(points);
const lineGeometry = new THREE.TubeGeometry(linePath, 100, 0.3, 100, false);
const lineMesh = new THREE.Mesh(lineGeometry, material);
// 將發(fā)光物體網(wǎng)格設(shè)置到圖層 1 上
lineMesh.layers.set(1);
state.scene.add(lineMesh);
return lineMesh;
}; state.highlightMaterials[item.key] = new THREE.ShaderMaterial({
transparent: true,
side: THREE.DoubleSide,
// color: 0xcdcccc,
uniforms: {
time: { value: 0.0 }, // 運(yùn)動(dòng)時(shí)間
len: { value: 0.5 }, // 運(yùn)動(dòng)點(diǎn)距離范圍
size: { value: 0.5 }, // 管道增加寬度
uDirection: { value: 0 },
uColor: { value: new THREE.Color(item.color) },
uSpeed: { value: 1.0 },
uFade: { value: new THREE.Vector2(0, 0.8) },
},
vertexShader: `varying vec2 vUv;
void main(void) {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}`,
// 片元著色器
fragmentShader: `
varying vec2 vUv;
uniform float uSpeed;
uniform float time;
uniform vec2 uFade;
uniform vec3 uColor;
uniform float uDirection;
void main() {
vec3 color = uColor;
//流動(dòng)方向
float s = time * uSpeed;
float v = 0.0;
if(uDirection == 1.0) {
v = vUv.x;
} else {
v = -vUv.x;
}
float d = mod((v + s), 1.0);
if(d > uFade.y){
discard;
} else {
float alpha = 0.0;
if( d <= uFade.y / 2.0){
//平滑透明度漸變
alpha = smoothstep(uFade.x, uFade.y, d*2.0);
} else {
alpha = smoothstep(uFade.y, uFade.x, (d - (uFade.y / 2.0)) * 2.0);
}
//透明度太小時(shí)不顯示
if(alpha < 0.001)
discard;
gl_FragColor = vec4(color, alpha);
}
}`,
})需要注意的是如果使用 requestAnimationFrame 修改時(shí)間參數(shù)時(shí)會(huì)出現(xiàn)在不同的顯示器中光效流動(dòng)速度不一致的情況。
因?yàn)?requestAnimationFrame 的執(zhí)行速度和顯示器的刷新率保持一致，所以需要根據(jù)不同的屏幕刷新率設(shè)置合適的時(shí)間增加速度。
/**
* @description: 添加動(dòng)畫
* @return {*}
*/
const animateAction = () => {
state.endTime = state.startTime;
state.startTime = performance.now();
state.intervalTime = ( state.startTime - state.endTime ) / 1000;
// 計(jì)算每秒執(zhí)行多少次保留0位小數(shù)
const fps = Math.round(1 / state.intervalTime);
let tSpeed = 0.005;
if(fps < 60){
tSpeed *= 2;
}
if (state.highlightMaterials[props.data[0]?.key] && state.highlightMaterials[props.data[1]?.key]) {
state.highlightMaterials[props.data[0]?.key].uniforms.time.value += tSpeed;
state.highlightMaterials[props.data[1]?.key].uniforms.time.value += tSpeed;
if (state.highlightMaterials[props.data[0]?.key].uniforms.time.value > 1) {
state.highlightMaterials[props.data[0]?.key].uniforms.time.value = 0;
}
if (state.highlightMaterials[props.data[1]?.key].uniforms.time.value > 1) {
state.highlightMaterials[props.data[1]?.key].uniforms.time.value = 0;
}
}
};六，UnrealBloomPass 實(shí)現(xiàn)局部輝光后期效果
通過創(chuàng)建兩個(gè)后期處理組合器，bloomComposer 負(fù)責(zé)渲染輝光材質(zhì)，finallyComposer 負(fù)責(zé)最后的后期處理渲染。并將輝光網(wǎng)格和普通幾何體網(wǎng)格分別放到不同的圖層中渲染，從而達(dá)到局部輝光效果
/**
* @description: 動(dòng)畫
* @return {*}
*/
const render = () =>{
state.controls.update();
state.renderer.autoClear = false;
state.renderer.clear();
state.camera.layers.set(1);
state.bloomComposer?.render();
state.renderer.clearDepth();
state.camera.layers.set(0);
state.finallyComposer?.render();
// state.renderer?.render(state.scene, state.camera);
state.renderer.autoClear = true;
requestAnimationFrame(animate);
animateAction()
}使用 shaderPass 疊加輝光圖層和普通圖層，需要過濾背景色防止場(chǎng)景設(shè)置的背景色被改變
/**
* @description: 添加后期處理
* @return {*}
*/
const createPostProcessing = () => {
// 添加基礎(chǔ)渲染通道
const renderPass = new RenderPass(state.scene, state.camera);
const bloomPass = new UnrealBloomPass(
new THREE.Vector2(canvasRef.value?.offsetWidth, canvasRef.value?.offsetHeight),
10,
12,
2
)
bloomPass.threshold = state.params.threshold;
bloomPass.strength = state.params.strength;
bloomPass.radius = state.params.radius;
const outputPass = new OutputPass();
// 添加輝光效果組合器
state.bloomComposer = new EffectComposer(state.renderer);
state.bloomComposer.setSize(canvasRef.value?.offsetWidth * 2, canvasRef.value?.offsetHeight * 2);
// 創(chuàng)建最終效果組合器
state.finallyComposer = new EffectComposer(state.renderer);
state.finallyComposer.setSize(canvasRef.value?.offsetWidth * 2, canvasRef.value?.offsetHeight * 2);
const mixPass = new ShaderPass(
new THREE.ShaderMaterial({
uniforms: {
baseTexture: { value: null },
bloomTexture: { value: state.bloomComposer.renderTarget2.texture },
bgColor: { value: new THREE.Color(0x14172a) },
},
vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}`,
fragmentShader: `
uniform sampler2D baseTexture;
uniform sampler2D bloomTexture;
uniform vec3 bgColor;
varying vec2 vUv;
void main() {
vec4 base_color = texture2D(baseTexture, vUv);
vec4 bloom_color = texture2D(bloomTexture, vUv);
// 定義顏色比較閾值
float threshold = 0.001;
float lum = 0.21 * bloom_color.r + 0.71 * bloom_color.g + 0.07 * bloom_color.b;
if(abs(0.078 - base_color.r)< threshold && abs(0.090 - base_color.g)< threshold && abs(0.165 - base_color.b)< threshold){
gl_FragColor = vec4(base_color.rgb, max(base_color.a, lum));
}else{
gl_FragColor = vec4(base_color.rgb + bloom_color.rgb, max(base_color.a, lum));
}
// if(abs(0.0 - base_color.r)< threshold && abs(0.0 - base_color.g)< threshold && abs(0.0 - base_color.b)< threshold){
// // 輸出背景色
// gl_FragColor = vec4(bloom_color.rgb, 1.0);
// }else{
// gl_FragColor = vec4(base_color.rgb + bloom_color.rgb, 1.0);
// }
// gl_FragColor = vec4(bloom_color.rgb, 1.0);
}
`,
defines: {},
}),
'baseTexture',
);
mixPass.renderToScreen = true;
mixPass.needsSwap = true;
state.bloomComposer.addPass(renderPass);
state.bloomComposer.addPass(bloomPass);
state.bloomComposer.addPass(mixPass);
state.bloomComposer.addPass(outputPass);
const finallyRenderPass = new RenderPass(state.scene, state.camera);
state.finallyComposer.addPass( finallyRenderPass);
// 時(shí)域抗鋸齒
const taaRenderPass = new TAARenderPass(state.scene, state.camera);
// taaRenderPass.accumulate = true;
taaRenderPass.sampleLevel = 2;
// state.finallyComposer.addPass(taaRenderPass);
state.finallyComposer.addPass(mixPass);
// 增加抗鋸齒后期處理通道
const fxaaPass = new ShaderPass(FXAAShader);
fxaaPass.uniforms['resolution'].value.set(1 / canvasRef.value?.offsetWidth, 1 / canvasRef.value?.offsetHeight);
state.finallyComposer.addPass(fxaaPass);
}七，平面坐標(biāo)、三維坐標(biāo)轉(zhuǎn)換
先將鼠標(biāo)坐標(biāo)轉(zhuǎn)換為三維坐標(biāo)，然后使用 THREE.Raycaster 獲取鼠標(biāo)碰撞物體交點(diǎn)的坐標(biāo)，
/**
* @description: 鼠標(biāo)移動(dòng)事件
* @return {*}
*/
const canvasMouseMove = (event: MouseEvent) =>{
event.preventDefault;
const bounding = canvasRef.value?.getBoundingClientRect();
const mouse = new THREE.Vector2();
// 將鼠標(biāo)位置轉(zhuǎn)換為歸一化設(shè)備坐標(biāo)
mouse.x = ((event.clientX - bounding.left) / bounding.width) * 2 - 1;
mouse.y = -((event.clientY - bounding.top) / bounding.height) * 2 + 1;
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, state.camera);
const intersects = raycaster.intersectObjects(state.scene.children, true);
if(intersects.length > 0){
console.log('鼠標(biāo)碰撞物體------', intersects)
const intersect = intersects[0];
const { point } = intersect;
if(point.x && intersect){
let helfStepNums = Math.ceil(point.x / state.xAxisRate * 2);
if(helfStepNums % 2 == 0){
helfStepNums -=1;
}
if(helfStepNums < 0) return;
state.leftPlaneMesh.position.x = helfStepNums * state.xAxisRate / 2;
}
}
}八，監(jiān)聽窗口變化，添加響應(yīng)式設(shè)置
/**
* @description: 窗口尺寸發(fā)生變化時(shí)的處理函數(shù)
* @return {*}
*/
const viewResizeHandle = () => {
if(canvasRef.value){
// 當(dāng)窗口改變時(shí)調(diào)整畫布寬高
canvasRef.value.style.width = '55%';
canvasRef.value.style.height = '50%';
state.camera.aspect = canvasRef.value.offsetWidth / canvasRef.value.offsetHeight;
state.camera.updateProjectionMatrix();
state.renderer.setSize(canvasRef.value.offsetWidth, canvasRef.value.offsetHeight);
state.renderer.render(state.scene, state.camera);
}
}總結(jié)
到此這篇關(guān)于Three.js實(shí)現(xiàn)3d面積圖功能的文章就介紹到這了,更多相關(guān)Three.js實(shí)現(xiàn)3d面積圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
微信實(shí)現(xiàn)自動(dòng)跳轉(zhuǎn)到用其他瀏覽器打開指定APP下載
這篇文章主要介紹了微信實(shí)現(xiàn)自動(dòng)跳轉(zhuǎn)到用其他瀏覽器打開指定APP下載，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
JS實(shí)現(xiàn)Cookie讀、寫、刪除操作工具類示例
這篇文章主要介紹了JS實(shí)現(xiàn)Cookie讀、寫、刪除操作工具類,涉及javascript針對(duì)cookie的讀、寫、刪除、清空等相關(guān)操作實(shí)現(xiàn)技巧,并附帶了簡(jiǎn)單cookie操作插件供大家參考,需要的朋友可以參考下2018-08-08
一文帶你掌握J(rèn)avaScript中worker的具體使用
Worker?是在Web應(yīng)用程序中實(shí)現(xiàn)多線程的機(jī)制,它可以在一個(gè)單獨(dú)的線程中運(yùn)行腳本,獨(dú)立于主線程,下面小編就和大家詳細(xì)介紹一下JavaScript中worker的具體使用吧2026-01-01
有一組數(shù)據(jù)，大概10萬個(gè)左右，每一單位的值不會(huì)大于30000，要求按照由大到小的順序不重復(fù)輸出。2010-07-07
這篇文章主要介紹了fullCalendar日歷插件玩法示例解析,包括Fullcalendar安裝,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01
如何在JavaScript中使用msgpack-lite 和zlib實(shí)現(xiàn)大數(shù)據(jù)文件的壓縮和讀取
本文介紹msgpack-lite和zlib在JavaScript中的應(yīng)用,結(jié)合實(shí)例代碼講解如何在JavaScript中使用msgpack-lite 和zlib實(shí)現(xiàn)大數(shù)據(jù)文件的壓縮和讀取,感興趣的朋友跟隨小編一起看看吧2025-09-09
Bootstrap學(xué)習(xí)筆記之環(huán)境配置(1)
這篇文章主要為大家詳細(xì)介紹了Bootstrap學(xué)習(xí)筆記之環(huán)境配置的具體操作方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
本文詳細(xì)介紹了js中Json的語法與編寫格式，有需要的朋友可以看下2016-11-11
基于JavaScript實(shí)現(xiàn)復(fù)選框的全選和取消全選
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)復(fù)選框的全選和取消全選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
微信小程序?qū)崿F(xiàn)Session功能及無法獲取session問題的解決方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)Session功能及無法獲取session問題的解決方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05