标签 Javascript 下的文章

2024-08-12




const pulsar = require('pulsar-client');
 
// 创建一个Pulsar客户端实例
const client = new pulsar.Client({
    serviceUrl: 'pulsar://localhost:6650',
    operationTimeoutSeconds: 5,
});
 
// 创建一个生产者
async function createProducer() {
    const producer = await client.createProducer({
        topic: 'persistent://public/default/my-topic',
        sendTimeoutMs: 3000,
    });
    console.log('Producer has been created.');
 
    // 发送消息
    await producer.send({
        'key': 'message-key',
        'data': 'Hello, Pulsar!',
    });
    console.log('Message has been sent.');
 
    // 关闭生产者
    await producer.close();
    console.log('Producer has been closed.');
 
    // 关闭客户端
    await client.close();
    console.log('Client has been closed.');
}
 
// 异步函数调用
createProducer().catch(err => {
    console.error('An error occurred:', err);
});

这段代码展示了如何在Node.js环境中使用Pulsar客户端库创建一个Pulsar生产者，并向指定的topic发送一条消息。代码中使用了async/await来处理异步操作，使得代码更加简洁和易读。

System

2024-08-12

所有,nodejs

报错解释：

这个错误通常意味着你尝试访问一个未定义(undefined)对象的属性。在JavaScript/Node.js中，如果你尝试读取一个未定义的变量的属性，就会抛出这样的错误。

解决方法：

检查变量是否已经定义，并且不是undefined。
使用可选链操作符（Optional Chaining Operator）?.，它会在尝试访问一个可能是undefined的属性时避免抛出错误。
使用条件（三元）运算符来检查属性是否存在。

示例代码：




// 假设有一个可能未定义的对象
let myObject;
 
// 方法1: 检查对象是否定义
if (myObject !== undefined && myObject !== null) {
  console.log(myObject.property);
}
 
// 方法2: 使用可选链操作符
console.log(myObject?.property);
 
// 方法3: 使用条件运算符
console.log(myObject !== undefined && myObject !== null ? myObject.property : 'defaultValue');

选择使用哪种方法取决于你的具体情况和代码风格偏好。

- 阅读更多 -

前端JS特效第23集：jQuery+CSS3实现动画相册代码

System

2024-08-12

所有,css3




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery+CSS3实现动画相册</title>
    <style>
        /* 样式省略 */
    </style>
</head>
<body>
    <div class="container">
        <div class="album">
            <div class="album-item" style="background-image: url(img/1.jpg);"></div>
            <div class="album-item" style="background-image: url(img/2.jpg);"></div>
            <div class="album-item" style="background-image: url(img/3.jpg);"></div>
            <!-- 更多相册项 -->
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        // jQuery 代码
        $(document).ready(function(){
            // 初始化相册
            function initAlbum() {
                // 代码实现
            }
 
            // 相册项点击事件
            $('.album-item').on('click', function() {
                // 代码实现
            });
 
            // 初始化
            initAlbum();
        });
    </script>
</body>
</html>

这个代码实例展示了如何使用jQuery和CSS3创建一个简单的动画相册。在这个例子中，我们假设.album-item是每个相册项的类，并且每个项通过style属性设置了背景图片。实际的初始化相册和点击事件处理函数的代码实现将根据具体的动画效果和交互逻辑来编写。

- 阅读更多 -

用JS+CSS打造你自己的弹幕王国，让网页动起来！

System

2024-08-12

所有,css3

这是一个使用JavaScript和CSS创建弹幕王国的简单示例。这里只展示核心的JavaScript代码，CSS代码将会在这个例子中直接内联给出。




// 获取弹幕容器和按钮
const banner = document.getElementById('banner');
const button = document.getElementById('button');
 
// 弹幕生成函数
function createBalloon() {
  const balloon = document.createElement('div');
  balloon.classList.add('balloon');
  
  // 随机大小和颜色
  balloon.style.width = `${Math.random() * 100 + 50}px`;
  balloon.style.height = `${Math.random() * 50 + 20}px`;
  balloon.style.backgroundColor = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
  
  // 随机上升速度
  balloon.style.animationDuration = `${Math.random() * 2 + 2}s`;
  
  // 将弹幕添加到弹幕容器中
  banner.appendChild(balloon);
  
  // 3秒后移除弹幕
  setTimeout(() => balloon.remove(), 3000);
}
 
// 按钮点击事件监听
button.addEventListener('click', createBalloon);

以上代码中，createBalloon函数会创建一个新的弹幕元素，并给它设置随机的尺寸和颜色，以及随机的上升动画时长。然后将其添加到弹幕容器中，并在3秒后将其移除。通过点击按钮，触发这个函数，实现弹幕的生成和消失。

- 阅读更多 -

JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战

System

2024-08-12

所有,css




// 假设我们有一个页面，我们需要动态地调整元素的位置来防止被爬取
// 这里是一个简化的示例，仅用于说明如何进行位置偏移
 
// 获取页面中的元素
const element = document.getElementById('element-to-move');
 
// 计算偏移量
const offset = calculateOffset();
 
// 应用偏移量
element.style.position = 'relative';
element.style.left = offset.x + 'px';
element.style.top = offset.y + 'px';
 
// 计算偏移量的函数，这个函数需要根据实际情况进行编写
function calculateOffset() {
    // 这里只是一个示例，实际情况可能需要更复杂的逻辑
    const x = Math.random() * 100; // 产生一个0到100之间的随机数
    const y = Math.random() * 100; // 产生一个0到100之间的随机数
    return { x, y };
}

这段代码演示了如何在JavaScript中获取页面元素，计算偏移量，并将偏移量应用到元素上，从而达到反爬虫的效果。这只是一个简化的示例，实际应用中计算偏移量的逻辑和应用方式都会更加复杂。

- 阅读更多 -

threejs CSS2DRenderer(HTML元素作为标签)

System

2024-08-12

所有,css

CSS2DRenderer 是 Three.js 中用于将 HTML 元素作为标签附加到 3D 场景中的对象的一个工具。要使用 CSS2DRenderer 并将 HTML 元素作为标签，你需要首先创建一个 Three.js 场景，然后创建 CSS2DRenderer 实例并将其附加到Three.js 的场景中。

以下是一个简单的例子，展示如何使用 CSS2DRenderer 在 Three.js 场景中添加 HTML 元素作为标签：




import * as THREE from 'three';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 
// 创建一个Three.js场景
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);
 
// 创建CSS2DRenderer
const labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = 0;
document.body.appendChild(labelRenderer.domElement);
 
// 创建一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
// 创建HTML元素作为标签
const label = document.createElement('div');
label.style.color = 'red';
label.innerHTML = 'Hello, label!';
 
// 创建CSS2DObject
const labelObject = new CSS2DObject(label);
labelObject.position.set(0, 0, 0); // 设置标签位置
scene.add(labelObject);
 
camera.position.z = 5;
 
function animate() {
  requestAnimationFrame(animate);
 
  renderer.render(scene, camera);
  labelRenderer.render(scene, camera);
}
 
animate();

在这个例子中，我们首先创建了一个立方体，并且为它创建了一个 HTML 元素作为标签。然后，我们将这个标签作为 CSS2DObject 添加到了 Three.js 的场景中。最后，在动画循环中，我们分别使用 WebGLRenderer 和 CSS2DRenderer 来渲染场景。

这个例子提供了一个基本框架，你可以在其中添加更多的功能，比如对标签位置和样式的调整，或者添加更多的交互功能。

System

2024-08-12

所有,ajax

在这个系列中，我们将使用AJAX、Node.js、Webpack和Git来构建一个简单的前端应用程序。以下是第四部分的内容，其中我们将介绍如何使用AJAX发送GET和POST请求。

1. 使用AJAX发送GET请求




// 创建一个新的XMLHttpRequest对象
const xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'https://api.example.com/data', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('AJAX Request failed');
    }
  }
};
 
// 发送请求
xhr.send();

2. 使用AJAX发送POST请求




// 创建一个新的XMLHttpRequest对象
const xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('POST', 'https://api.example.com/data', true);
 
// 设置请求头，如内容类型
xhr.setRequestHeader('Content-Type', 'application/json');
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('AJAX Request failed');
    }
  }
};
 
// 发送包含数据的请求
xhr.send(JSON.stringify({ key: 'value' }));

以上代码演示了如何使用原生JavaScript的XMLHttpRequest对象来发送GET和POST请求。这是现代前端开发中一个非常基础且重要的概念，因为它允许我们从浏览器中异步获取数据。虽然现代开发中我们通常会使用更现代的API，如fetch，但是XMLHttpRequest对象在所有现代浏览器中都得到了支持，而且是理解AJAX基础的关键。

- 阅读更多 -

JavaWeb AJAX和JSON详解详解详解

System

2024-08-12

所有,ajax

AJAX和JSON是在现代Web应用程序中广泛使用的技术，它们可以提供更好的用户体验，使页面的部分更新成为可能。

AJAX：

AJAX（Asynchronous JavaScript and XML）技术允许在不重新加载页面的情况下更新网页的部分内容。这是通过在后台与服务器进行少量数据交换来实现的。

JSON：

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。

AJAX请求示例：




// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 配置HTTP请求
xhr.open('POST', 'your_server_endpoint', true);
 
// 设置请求头信息
xhr.setRequestHeader('Content-Type', 'application/json');
 
// 处理请求完成的响应
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功，处理响应的JSON数据
        var response = JSON.parse(xhr.responseText);
        console.log(response);
    }
};
 
// 发送JSON格式的数据
xhr.send(JSON.stringify({ key: 'value' }));

JSON响应示例：




// 假设服务器返回的JSON数据
var jsonResponse = {
    "name": "John",
    "age": 30,
    "city": "New York"
};
 
// 处理JSON数据
console.log(jsonResponse.name); // 输出 John

AJAX和JSON结合使用可以实现前后端的分离，提高开发效率。后端只需提供JSON格式的数据，前端可以用AJAX异步获取数据并更新页面。

- 阅读更多 -

JS魔法堂：函数节流（throttle）与函数去抖（debounce）

System

2024-08-12

所有,javascript




// 函数节流：确保一定时间内只执行一次函数
function throttle(fn, threshhold, scope) {
    threshhold || (threshhold = 250);
    var last,
        timer;
    return function () {
        var context = scope || this;
        var now = +new Date(),
            args = arguments;
        if (last && now - last < threshhold) {
            // 如果足够的时间没有过去，则清除定时器并重新设定执行时间
            clearTimeout(timer);
            timer = setTimeout(function () {
                last = now;
                fn.apply(context, args);
            }, threshhold);
        } else {
            // 如果时间到了，执行函数并重置执行时间
            last = now;
            fn.apply(context, args);
        }
    };
}
 
// 函数去抖：在函数执行完后等待一段时间，如果在这段时间内没有再次触发，则不再执行
function debounce(fn, delay) {
    var timer = null;
    return function () {
        var context = this,
            args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    };
}
 
// 使用示例
var myFunc = function() {
    console.log('Function triggered!');
};
 
// 节流
window.addEventListener('resize', throttle(myFunc, 1000));
 
// 去抖
window.addEventListener('scroll', debounce(myFunc, 500));

这段代码定义了两个函数throttle和debounce，它们可以用来控制函数的执行频率。throttle用于限制一个函数在一定时间内只能执行一次，而debounce则是在函数执行完后等待一段时间，如果在这段时间内没有再次触发，则不再执行该函数。这两种方式在不同的场景下都有其用处，例如滚动和调整浏览器大小时的事件监听。

- 阅读更多 -

3D数字孪生 - Three.js 项目介绍与基础环境搭建

System

2024-08-12

所有,javascript




// 引入必要的Three.js组件
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 
// 设置场景、相机和渲染器
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);
 
// 加载模型
const loader = new GLTFLoader();
loader.load('models/scene.gltf', function (gltf) {
  scene.add(gltf.scene);
}, undefined, function (error) {
  console.error(error);
});
 
// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  controls.update();
}
 
animate();

这段代码演示了如何使用Three.js创建一个基本的3D场景，加载一个模型，并使用OrbitControls来允许用户绕模型查看不同的视角。代码简洁，注重核心功能的实现，并提供了一个基本的3D环境的搭建示例。

- 阅读更多 -