分类 javascript 下的文章

2024-08-19

OpenCV.js是OpenCV（Open Source Computer Vision Library）在Web上的版本，它允许在浏览器中使用计算机视觉功能。

要在网页中使用OpenCV.js，你需要在HTML文件中包含OpenCV.js库。你可以从OpenCV的GitHub仓库或通过CDN获取OpenCV.js。

以下是一个简单的HTML示例，展示了如何在网页中包含OpenCV.js并使用它来读取图像：




<!DOCTYPE html>
<html>
<head>
    <title>OpenCV.js Example</title>
</head>
<body>
    <img id="image" src="example.jpg" alt="Image to process" />
    <script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvLoaded();"></script>
    <script type="text/javascript">
        function onOpenCvLoaded() {
            const imgElement = document.getElementById('image');
            const src = cv.imread(imgElement);
            cv.imshow('Canvas', src);
            // 清理资源
            src.delete();
        }
    </script>
</body>
</html>

在这个例子中，我们首先在<head>标签中包含了OpenCV.js库。我们使用onload事件确保在OpenCV.js加载完成后执行一个函数onOpenCvLoaded()。在这个函数中，我们使用cv.imread()函数读取图像，然后使用cv.imshow()在网页上显示图像。最后，我们使用delete()方法清理资源。

请注意，由于浏览器的安全限制，你不能直接从本地文件系统读取文件并使用OpenCV.js进行操作。你需要将你的网页和图像文件托管在web服务器上才能正常工作。

- 阅读更多 -

Nodejs使用mysql2操作数据库【完整讲解】

System

2024-08-19

所有,javascript




// 引入mysql2模块
const mysql = require('mysql2');
 
// 创建连接对象
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '你的数据库密码',
  database: '你的数据库名'
});
 
// 开启连接
connection.connect();
 
// 执行查询操作
connection.query('SELECT * FROM your_table_name', (error, results, fields) => {
  if (error) throw error;
  // 处理查询结果
  console.log(results);
});
 
// 关闭连接
connection.end();

确保替换 '你的数据库密码' 和 '你的数据库名' 为你自己的数据库信息，同时将 'your_table_name' 替换为你要查询的表名。这段代码展示了如何使用 mysql2 模块在 Node.js 中连接到 MySQL 数据库，执行一个简单的查询，并处理结果。

- 阅读更多 -

js音频指定扬声器

System

2024-08-19

所有,javascript

在JavaScript中，指定音频通过哪个扬声器通常涉及到操作系统级别的设置，这通常不是Web浏览器JavaScript可以直接控制的。但是，如果你想控制音频播放的音量，你可以通过Web Audio API来实现。

以下是一个简单的例子，展示如何通过Web Audio API来控制音频的音量，并将其输出到指定的扬声器：




// 获取用户的音频输出设备信息
navigator.mediaDevices.enumerateDevices().then(function(devices) {
    // 假设我们要用的设备ID已经知道
    var outputDeviceId = '你的扬声器ID';
 
    // 过滤出音频输出设备
    var audioOutputDevices = devices.filter(function(device) {
        return device.kind === 'audiooutput';
    });
 
    // 检查所需的设备是否存在
    var targetDevice = audioOutputDevices.find(function(device) {
        return device.deviceId === outputDeviceId;
    });
 
    if (targetDevice) {
        // 如果找到了目标设备，则设置为当前的输出设备
        var context = new AudioContext();
        context.close(); // 关闭旧的AudioContext
        context = new AudioContext(); // 创建新的AudioContext
 
        // 创建一个源节点（例如，一个MediaStreamAudioSourceNode）
        // 然后连接到一个分离节点（GainNode），最后连接到目标设备
 
        // 示例代码中省略了创建源节点的部分，你需要根据实际情况来创建
        // 假设已经有了一个名为mediaStreamSource的MediaStreamAudioSourceNode
 
        var gainNode = context.createGain();
        gainNode.gain.value = 0.5; // 设置音量为50%
 
        mediaStreamSource.connect(gainNode);
        gainNode.connect(context.destination);
 
        // 切换输出设备
        context.destination.channel = new Array(context.destination.maxChannelCount);
        context.destination.channel[0] = targetDevice;
    } else {
        console.error('指定的音频设备未找到');
    }
}).catch(function(err) {
    console.error(err);
});

请注意，上述代码中的 你的扬声器ID 需要替换为实际的设备ID，这通常在用户选择输出设备时获取。此外，Web Audio API的具体实现可能会根据浏览器的不同而有所差异，所以上述代码可能无法在所有浏览器上工作。

- 阅读更多 -

Nest.js 实战：使用 Swagger 优雅地生成 API 文档

System

2024-08-19

所有,javascript




import { Module } from '@nestjs/common';
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
import { AppController } from './app.controller';
 
@Module({
  imports: [],
  controllers: [AppController],
})
export class AppModule {
  constructor() {
    const config = new DocumentBuilder()
      .setTitle('Cats example')
      .setDescription('The cats API description')
      .setVersion('1.0')
      .addTag('cats')
      .build();
    const document = SwaggerModule.createDocument(this, config);
    SwaggerModule.setup('api', this, document);
  }
}

这段代码演示了如何在Nest.js框架中使用Swagger来生成API文档。首先，我们创建了一个DocumentBuilder实例，并通过这个实例设置了API的标题、描述、版本和标签。然后，我们使用这个配置创建了一个OpenAPI文档对象，并将其挂载到'/api'路径。这样，当Nest.js应用启动时，就可以通过访问http://<host>:<port>/api来查看生成的API文档了。

- 阅读更多 -

JS 解构赋值

System

2024-08-19

所有,javascript

解构赋值是一种表达式，它允许我们将数组或对象的值解压到不同的变量中。在JavaScript中，解构赋值可以用于数组、对象、字符串、以及函数参数。

数组解构




let [a, b, c] = [1, 2, 3];
console.log(a); // 输出1
console.log(b); // 输出2
 
// 可以使用rest运算符获取剩余元素
let [x, ...rest] = [1, 2, 3, 4];
console.log(rest); // 输出[2, 3, 4]
 
// 可以设置默认值，当数组中的值为undefined时，会使用默认值
let [a = 5, b = 7] = [undefined, 2];
console.log(a); // 输出5
console.log(b); // 输出2

对象解构




let {x, y} = {x: 1, y: 2};
console.log(x); // 输出1
console.log(y); // 输出2
 
// 可以使用别名
let {x: a, y: b} = {x: 1, y: 2};
console.log(a); // 输出1
console.log(b); // 输出2
 
// 可以设置默认值
let {x = 5, y = 7} = {x: 1};
console.log(x); // 输出1
console.log(y); // 输出7

字符串解构




const [a, b, c] = 'abc';
console.log(a); // 输出'a'
console.log(b); // 输出'b'

函数参数解构




function add([x, y]) {
  return x + y;
}
console.log(add([1, 2])); // 输出3
 
// 使用剩余参数
function subtract(...[a, b]) {
  return a - b;
}
console.log(subtract(1, 2, 3)); // 输出-1

以上是解构赋值的一些基本用法，它可以极大地简化代码，提高开发效率。

System

2024-08-19

所有,javascript

题目：20天拿下华为OD笔试之【贪心+优先队列】

给定一个正整数数组arr，代表每个工作的难度值。每个工作都可以选择立即开始或等待一天来完成。你需要找到最少的天数，在这些天数内可以完成所有工作。

注意：

完成工作的难度值总是大于等于完成它所需要的天数。
工作可以在任何非负整数时间点开始，但是必须连续完成。

例如：

输入：arr = [2, 4, 6, 8, 10]

输出：3

解释：可以选择在第1天，第2天，第4天完成工作。

输入：arr = [10, 15, 30, 20, 25]

输出：3

解释：可以选择在第1天，第2天，第4天完成工作。

输入：arr = [1, 2, 4, 5, 6, 7, 8, 9, 10]

输出：5

解释：可以选择在第1天，第2天，第4天，第5天，第10天完成工作。

请你设计一个算法，计算出最少需要的天数。

解决方案：

这是一个贪心加优先队列的问题。我们可以使用优先队列（最小堆）来保存工作，优先队列中的工作按照其完成的最早时间排序。然后我们从1开始迭代，如果当前有工作可以开始，我们就开始它。如果工作可以在当前这一天完成，我们就完成它。

以下是Python, Java, C++和JavaScript的解决方案：

Python:




from queue import PriorityQueue
 
def minDays(arr):
    pq = PriorityQueue()
    for work in arr:
        pq.put((work, 0))
    ans = 0
    while not pq.empty():
        day = 0
        while not pq.empty() and pq.queue[0][0] == day:
            work, _ = pq.get()
            day += work
        ans += 1
    return ans
 
# 测试代码
arr = [2, 4, 6, 8, 10]
print(minDays(arr))  # 输出：3

Java:




import java.util.PriorityQueue;
 
public class Solution {
    public int minDays(int[] arr) {
        PriorityQueue<int[]> pq = new PriorityQueue<>((a, b) -> a[0] - b[0]);
        for (int work : arr) {
            pq.offer(new int[]{work, 0});
        }
        int ans = 0;
        while (!pq.isEmpty()) {
            int day = 0;
            while (!pq.isEmpty() && pq.peek()[0] == day) {
                int[] work = pq.poll();
                day += work[0];
            }
            ans++;
        }
        return ans;
    }
 
    // 测试代码
    public static void main(String[] args) {
        Solution solution = new Solution();
        int[] arr = {2, 4, 6, 8, 10};
        System.out.println(solution.minDays(arr));  // 输出：3
    }
}

C++:




#include <queue>
#include <vector>
 
using namespace std;
 
int minDays(vector<int>& arr) {
    priority_queue<pair<int, int>> pq;
    for (int work : arr) {
        pq.emplace(work, 0);
    }
    int ans = 0;
    while (!

- 阅读更多 -

发现创新随机数生成库 —— Stochator.js

System

2024-08-19

所有,javascript

Stochator.js 是一个用于创建随机数的库，它提供了一种方法来生成符合特定概率分布的随机数。以下是如何使用 Stochator.js 生成一个随机整数的示例代码：




// 引入 Stochator 模块
const Stochator = require('stochator');
 
// 创建一个随机整数生成器，取值范围是 [1, 6]
const randomInt = Stochator.integer(1, 6);
 
// 生成一个随机整数
const value = randomInt.generate();
console.log(value); // 输出可能是 1, 2, 3, 4, 5, 6 中的任何一个

在这个例子中，我们首先引入了 Stochator 模块，然后使用 Stochator.integer(min, max) 方法创建了一个随机整数生成器，该生成器将在 min 和 max 指定的范围内生成整数。最后，我们调用 generate() 方法来获取一个随机生成的整数。

Stochator.js 提供了多种概率分布的随机数生成器，包括整数、小数、二项分布、伯努利分布等。使用时，请确保已经通过 npm 安装了 Stochator.js：




npm install stochator

Stochator.js 是一个实验性项目，目前可能不适合在生产环境中使用，因为它可能仍然在开发迭代中。在使用之前，请检查其文档和稳定性。

- 阅读更多 -

视频目录进度条的制作（html(js)+pr）

System

2024-08-19

所有,javascript

要创建一个视频目录进度条，你可以使用HTML、JavaScript和CSS来构建界面，并使用一些现成的JavaScript库，如Plyr或Video.js来处理视频播放。以下是一个简单的示例，展示如何制作一个基本的视频目录进度条：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Progress Bar</title>
<style>
  #myVideo {
    width: 100%;
  }
  .progress-bar {
    width: 0;
    height: 5px;
    background-color: #ddd;
    transition: width 0.3s;
  }
  .time-slider {
    position: relative;
    width: 100%;
    margin-top: 10px;
  }
  .time-slider input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    background: #555;
    outline: none;
    opacity: 0.7;
    -webkit-transition: 0.2s;
    transition: opacity 0.2s;
  }
  .time-slider input:hover {
    opacity: 1;
  }
  .time-slider input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: #4CAF50;
    cursor: pointer;
  }
  .time-slider input::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: #4CAF50;
    cursor: pointer;
  }
</style>
</head>
<body>
 
<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
 
<div class="progress-bar"></div>
<div class="time-slider">
  <input type="range" min="0" max="100" value="0" class="time-slider" id="timeSlider">
</div>
 
<script>
// 获取视频和进度条元素
var video = document.getElementById('myVideo');
var progressBar = document.querySelector('.progress-bar');
var timeSlider = document.getElementById('timeSlider');
 
// 更新进度条和视频时间
function updateProgress() {
  var percent = (video.currentTime / video.duration) * 100;
  progressBar.style.width = percent + '%';
  timeSlider.value = percent;
}
 
// 设置视频时间到滑块位置
function setVideoTime() {
  var time = video.duration * (timeSlider.value / 100);
  video.currentTime = time;
}
 
// 绑定事件监听器
video.addEventListener('timeupdate', updateProgress);
timeSlider.addEventListener('input', setVideoTime);
</script>
 
</body>
</html>

在这个例子中，我们有一个HTML <video>元素和一个进度条.progress-bar。JavaScript用于更新进度条的宽度以匹配视频的当前播放时间，并允许用户通过拖动滑块来快进或快退视频。这个例子假设你有一个名为movie.mp4的视频文件在同一目录下。

- 阅读更多 -

【鸿蒙开发】之引入和使用第三方框架three.js

System

2024-08-19

所有,javascript

在鸿蒙（HarmonyOS）开发中引入和使用three.js，需要在项目中添加three.js的依赖，并确保鸿蒙的开发环境支持WebGL。以下是一个简单的例子：

在项目中的package.json文件中添加three.js的依赖：




"dependencies": {
    "three": "^0.132.2"
}

在需要使用three.js的.hml文件中引入three.js：




<script src="node_modules/three/build/three.js"></script>

创建一个3D场景并添加一个简单的3D对象：




<div class="container">
    <canvas id="three-canvas" style="width: 100%; height: 100%"></canvas>
</div>
 
<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('three-canvas').appendChild(renderer.domElement);
 
    var geometry = new THREE.BoxGeometry();
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
 
    camera.position.z = 5;
 
    function animate() {
        requestAnimationFrame(animate);
 
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
 
        renderer.render(scene, camera);
    }
 
    animate();
</script>

确保开发环境支持WebGL，并且在真实设备或模拟器上运行相应的代码。由于鸿蒙OS的兼容性和开发环境可能与标准Web开发环境有所不同，可能需要额外的工具或调整来确保three.js能够正常工作。

- 阅读更多 -

JS中如何拷贝一个DOM元素

System

2024-08-19

所有,javascript

在JavaScript中，您可以使用cloneNode方法来复制一个DOM元素。cloneNode接受一个布尔值参数，表示是否复制子元素。如果参数为true，则会复制元素以及所有子元素；如果为false，则只会复制元素本身，不包括子元素。

以下是一个使用cloneNode方法复制DOM元素的例子：




// 假设您要复制的元素具有id="elementToClone"
var elementToClone = document.getElementById('elementToClone');
 
// 复制元素及其所有子元素
var cloneWithChildren = elementToClone.cloneNode(true);
 
// 仅复制元素本身，不复制子元素
var cloneWithoutChildren = elementToClone.cloneNode(false);
 
// 将复制的元素插入到文档中
document.body.appendChild(cloneWithChildren);

使用cloneNode时，请注意新复制的元素可能还需要添加到文档中以便在页面上显示。此外，复制的元素将不会包含任何与原始元素关联的事件监听器或其他JavaScript状态。如果需要事件监听器和状态，您可能需要手动复制或重新初始化这些内容。

- 阅读更多 -