分类 javascript 下的文章

2024-08-08

JavaScript 无法通过 contentDocument 获取到 iframe 内容的原因可能有几个：

跨域限制：如果 iframe 内容来自一个与父文档不同的域，出于安全考虑，浏览器会阻止访问 contentDocument。
浏览器兼容性：在某些情况下，即使是同源 iframe，也可能因为浏览器的兼容性问题导致无法访问 contentDocument。
iframe还未加载完成：如果 iframe 还未完全加载内容，contentDocument 也会是不可用的。

解决方法：

检查跨域策略：确保 iframe 内容来自允许的域。如果跨域，可能需要通过同源服务器代理来间接获取内容。
检查浏览器兼容性：确保使用的方法在目标浏览器上有效。
确保iframe加载完成：可以在 iframe 加载完成后再尝试访问 contentDocument。可以通过监听 load 事件来知道 iframe 何时加载完成。

示例代码：




var iframe = document.getElementById('myIframe');
 
iframe.onload = function() {
    var contentDocument = iframe.contentDocument || iframe.contentWindow.document;
    // 现在可以安全地使用contentDocument了
};

以上代码首先获取了 id 为 myIframe 的 iframe 元素，然后设置了一个 onload 事件处理函数，在 iframe 加载完成后再尝试访问 contentDocument。这样可以确保不会在 iframe 未完全加载内容时尝试访问它。

html + css + js 实现简易轮播图

2024-08-08

以下是一个使用HTML、CSS和JavaScript实现的简易轮播图的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Slider</title>
<style>
  .slider {
    position: relative;
    width: 300px;
    height: 200px;
    margin: auto;
  }
  .slider img {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s;
  }
  .slider img.active {
    opacity: 1;
  }
</style>
</head>
<body>
 
<div class="slider">
  <img class="active" src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>
 
<script>
window.onload = function() {
  var currentIndex = 0;
  var images = document.querySelectorAll('.slider img');
  var imageCount = images.length;
 
  setInterval(function() {
    images[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % imageCount;
    images[currentIndex].classList.add('active');
  }, 3000); // Change image every 3 seconds
};
</script>
 
</body>
</html>

这段代码实现了一个简单的轮播图功能。它使用了setInterval函数来定期切换图片，并使用CSS进行样式设置。每张图片都是<img>标签，并且都在.slider容器内。JavaScript脚本用于切换.active类以显示当前图片，并隐藏其他图片。这个例子假设有三张图片，分别命名为image1.jpg、image2.jpg和image3.jpg放在与HTML同一个文件夹内。

【JS+H5+CSS实现烟花特效】

2024-08-08

以下是一个简单的烟花特效实现的代码示例：




<!DOCTYPE html>
<html>
<head>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #111;
  }
  .confetti {
    --size-min: 1px;
    --size-max: 6px;
    --speed-min: 0.5s;
    --speed-max: 2s;
    --density: 2000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    animation: confetti-animation linear infinite;
  }
  @keyframes confetti-animation {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(
        calc(
          (var(--size-max) - var(--size-min)) * 
            (random() - 0.5) * 2 + var(--size-min)
        ),
        calc(
          (var(--size-max) - var(--size-min)) * 
            (random() - 0.5) * 2 + var(--size-min) + 
          var(--size-max) * 2
        ),
        0
      );
      opacity: 0;
    }
  }
</style>
</head>
<body>
<div class="confetti" style="--size-min: 2px; --size-max: 4px; --speed-min: 0.2s; --speed-max: 1s; --density: 5000;"></div>
<script>
  const confetti = document.querySelector('.confetti');
  const random = (min, max) => Math.random() * (max - min) + min;
  const range = (min, max) => new Array(max - min + 1).fill(min).map((n, i) => n + i);
  const createConfetti = () => {
    const size = `${random(2, 6)}px`; // min and max size
    const speed = `${random(0.5, 2)}s`; // min and max animation duration
    const style = `
      width: ${size};
      height: ${size};
      background: rgba(255, 255, 255, ${random(0.2, 0.8)});
      animation-duration: ${speed};
      animation-delay: ${random(0, 10)}s;
    `;
    return `<div style="${style}"></div>`;
  };
  const density = confetti.style['--density'];
  const confettiCount = document.querySelectorAll('.confetti div').length;
  if (confettiCount < density) {
    const confettiFragments = range(density - confettiCount).map(createConfetti).join('');
    confetti.insertAdjacentHTML('beforeend', confettiFragments);
  }
</script>
</body>
</html>

这段代码会在页面上

2024-08-08

TransformControls 是 Three.js 中的一个类，它用于在 Web 页面上操作和变换 3D 场景中的物体。这个类提供了一种交互式的方式，允许用户在浏览器中通过鼠标或触摸操作来移动、旋转和缩放物体。

以下是一个简单的使用 TransformControls 的例子：




// 假设我们已经有了一个Three.js的场景(scene)和相机(camera)
// 创建一个渲染器并将其附加到DOM元素
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建TransformControls对象
const controls = new THREE.TransformControls(camera, renderer.domElement);
scene.add(controls);
 
// 加载一个模型（例如一个3D对象）
const loader = new THREE.GLTFLoader();
loader.load('path/to/model.glb', (gltf) => {
  scene.add(gltf.scene);
 
  // 当模型加载完成后，我们选中这个模型
  controls.attach(gltf.scene);
});
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  controls.update(); // 更新TransformControls的状态
}
animate();

在这个例子中，我们首先创建了一个Three.js场景和相机，然后创建了一个 TransformControls 对象并将其添加到场景中。我们使用 GLTFLoader 加载一个3D模型，并在模型加载完成后，我们用 controls.attach(object) 方法将模型与 TransformControls 关联起来。最后，我们进入一个渲染循环，在循环中我们调用 controls.update() 方法来更新 TransformControls 的状态。

nodejs用config库实现配置文件读取(详解)

2024-08-08




// 引入Node.js内置的path模块用于处理路径
const path = require('path');
// 引入config库
const config = require('config');
 
// 获取默认配置文件的路径
const defaultConfigFile = path.join(__dirname, '..', 'config.json');
 
// 使用config库读取配置文件
const configData = config.util.loadFileConfigs(defaultConfigFile);
 
// 打印读取到的配置信息
console.log(configData);
 
// 获取特定配置项的值
const someSetting = config.get('someSetting');
console.log(someSetting);
 
// 输出配置文件中的数据库连接字符串
console.log(config.get('db.url'));

这段代码展示了如何使用Node.js中的config库来读取配置文件。首先，我们使用path.join来构造配置文件的路径。然后，我们使用config.util.loadFileConfigs方法来加载配置文件。最后，我们使用config.get方法来获取特定的配置项。这个例子简单明了地展示了如何使用config库，并且可以作为开发者在实际项目中使用配置文件的参考。

2024-08-08




// 引入Three.js的核心文件
import * as THREE from 'three';
 
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建一个3D对象，例如一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
// 创建一个raycaster实例并设置光线
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
 
function onMouseClick(event) {
  // 将鼠标位置转换成归一化设备坐标(-1 到 +1)
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
 
  // 使用相机和鼠标位置更新光线
  raycaster.setFromCamera(mouse, camera);
 
  // 计算物体和光线的交点
  const intersects = raycaster.intersectObjects(scene.children);
 
  for (const intersect of intersects) {
    // 对交集的物体进行操作，例如改变颜色
    intersect.object.material.color.set(0xff0000);
    // 渲染场景
    renderer.render(scene, camera);
  }
}
 
// 监听鼠标点击事件
window.addEventListener('click', onMouseClick, false);
 
// 渲染初始场景
renderer.render(scene, camera);

这段代码展示了如何在Three.js中使用Raycaster来处理鼠标点击事件。当用户点击屏幕时，代码会计算出从摄像机发出的光线，并检查这条光线与场景中的哪些物体相交。如果发生了碰撞，代码会改变碰撞的物体的颜色。这是一个基本的示例，但在实际应用中，可以在intersects数组中找到的物体信息可以用来触发更复杂的交互效果。

vue3引入three.js渲染3D模型图

2024-08-08

在Vue 3中引入Three.js来渲染3D模型图，你可以按照以下步骤操作：

安装Three.js：




npm install three

创建一个Vue组件，并在mounted生命周期钩子中初始化Three.js场景、相机、渲染器和3D模型：




<template>
  <div ref="threeContainer"></div>
</template>
 
<script setup>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
const threeContainer = ref(null);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
threeContainer.value.appendChild(renderer.domElement);
 
let controls;
const loader = new GLTFLoader();
loader.load('path/to/your/model.glb', (gltf) => {
  scene.add(gltf.scene);
  gltf.scene.position.set(0, -2, 0);
  animate();
}, undefined, (error) => {
  console.error(error);
});
 
camera.position.z = 5;
 
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  controls && controls.update();
}
 
onMounted(() => {
  controls = new OrbitControls(camera, renderer.domElement);
  animate();
});
</script>
 
<style>
/* 确保Three.js渲染区域全屏 */
div {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

在这个例子中，我们创建了一个Vue组件，在组件挂载后，使用GLTFLoader加载一个3D模型（.glb格式），并将其添加到Three.js的场景中。我们还初始化了相机和渲染器，并使用OrbitControls来允许用户通过鼠标滚轮和鼠标拖动来控制模型的视图。最后，我们在组件的mounted生命周期钩子中启动动画循环。

请确保替换path/to/your/model.glb为你的3D模型文件的实际路径。这个Vue组件可以被嵌入到你的Vue应用的任何页面中，以渲染3D模型。

2024-08-08

NVM (Node Version Manager) 是一个用来管理 Node.js 版本的工具，它可以让你在同一台设备上安装和使用不同版本的 Node.js。

安装 NVM 后，你可以通过以下步骤来使用它：

安装 NVM：

在终端中运行以下命令（可能需要使用 curl 或者 wget，取决于你的系统配置）：




curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
# 或者
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

上述命令会安装 NVM 以及最新版本的 Node.js。

重新加载终端会话，或者关闭并重新打开终端，以使 NVM 命令生效。
使用 NVM 安装特定版本的 Node.js：
```
nvm install 14.17.0
```
切换到特定版本的 Node.js：
```
nvm use 14.17.0
```
验证 Node.js 和 npm 是否正确安装：
```
node -v
npm -v
```

如果你在使用 NVM 后遇到“找不到 npm”的问题，可能是因为当前环境变量没有正确设置。你可以尝试以下步骤：

重新打开一个新的终端会话。
再次使用 nvm use 命令来切换 Node.js 版本。
验证 npm 是否可用：
```
npm -v
```

如果你在安装过程中遇到了问题，可能是因为网络问题或者权限问题。确保你有足够的权限来安装软件，并且网络连接正常。

如果你遇到了具体的错误信息，请提供错误信息的详细内容，以便能够提供更具体的帮助。

使用js操作xpath

2024-08-08

在JavaScript中，操作XPath通常是为了在DOM（文档对象模型）中查找特定的节点。然而，JavaScript的核心库不包含XPath解析器，因此你需要使用外部库，如xpath.js。

以下是使用xpath.js库来查找DOM中的节点的步骤：

引入xpath.js库。
使用document对象创建一个domHelper实例。
使用xpath.eval函数执行XPath表达式。

示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>XPath Example</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/xpath.js/dist/xpath.min.js"></script>
</head>
<body>
 
<div id="content">
    <p>Hello, World!</p>
</div>
 
<script type="text/javascript">
    // 引入xpath.js库
    // ...
 
    // 使用domHelper来查找节点
    var domHelper = xpath.domHelper;
    var select = xpath.select;
 
    // 获取页面内容区域的DOM元素
    var content = document.getElementById('content');
 
    // 使用XPath选择器查找子节点
    var result = select("p", content)[0]; // 返回第一个匹配的节点
 
    // 输出结果
    console.log(result);
</script>
 
</body>
</html>

在这个例子中，我们使用了xpath.js库来查找ID为content的元素下的所有<p>元素。这个库需要通过CDN引入，或者你可以从npm安装。

请注意，xpath.js不是标准库的一部分，所以在使用之前你需要确认它已经正确加载。如果你的项目不允许使用外部库，你可能需要寻找其他解决方案，如使用document.evaluate方法（如果浏览器支持）。

前端使用 pdf.js加载PDF文件

2024-08-08

要在前端使用 pdf.js 加载并显示 PDF 文件，你需要遵循以下步骤：

引入 pdf.js 库。
使用 PDFJS.getDocument() 方法加载 PDF 文件。
渲染 PDF 页面。

以下是一个简单的示例代码：




<!DOCTYPE html>
<html>
<head>
  <title>PDF.js Example</title>
</head>
<body>
 
<canvas id="pdf-canvas"></canvas>
 
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script>
// 使用同步方式加载，简化示例
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
 
const url = 'your_pdf_file.pdf'; // 替换为你的 PDF 文件 URL
const canvas = document.getElementById('pdf-canvas');
const context = canvas.getContext('2d');
 
pdfjsLib.getDocument(url).promise.then(pdfDoc => {
  // 获取第一页
  pdfDoc.getPage(1).then(page => {
    // 计算视口大小
    const viewport = page.getViewport({ scale: 1.5 });
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    
    // 渲染页面
    const renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext).promise.then(() => {
      console.log('Page rendered!');
    });
  });
});
</script>
 
</body>
</html>

确保替换 your_pdf_file.pdf 为你的 PDF 文件的实际 URL。这段代码会在网页上显示 PDF 文件的第一页。

注意：实际应用中，你可能需要处理错误，添加更多页面的支持，调整渲染的质量等。