标签 Javascript 下的文章

2024-08-07

在HTML和JavaScript联动时，通常是通过事件监听器来实现的。以下是一个简单的例子，演示了如何在HTML按钮点击时，通过JavaScript更改页面上的文本内容。

HTML代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML与JavaScript联动示例</title>
</head>
<body>
    <p id="displayText">等待点击按钮...</p>
    <button id="myButton">点击我</button>
    <script src="script.js"></script>
</body>
</html>

JavaScript代码 (script.js)：




document.getElementById('myButton').addEventListener('click', function() {
    document.getElementById('displayText').innerText = '按钮被点击了！';
});

在这个例子中，我们有一个段落(<p>)元素和一个按钮(<button>)元素。段落元素的id是"displayText"，按钮元素的id是"myButton"。当按钮被点击时，我们通过addEventListener为按钮的'click'事件添加一个事件监听器。当按钮被点击时，事件监听器函数会被调用，该函数更改段落的innerText，显示"按钮被点击了！"。

- 阅读更多 -

使用ffmpeg.js在Web上实现流媒体处理

System

2024-08-07

所有,javascript




// 引入ffmpeg.js库
ffmpeg.load().then(async () => {
  // 获取用户选择的视频文件
  const file = document.getElementById('input').files[0];
  const videoElement = document.getElementById('video');
 
  // 创建FileReader实例
  const reader = new FileReader();
  reader.onload = (e) => {
    // 当文件读取完成后，将视频源设置给video元素
    videoElement.src = e.target.result;
  };
 
  // 读取视频文件
  reader.readAsDataURL(file);
 
  // 等待视频加载完成
  await new Promise((resolve, reject) => {
    videoElement.onloadeddata = resolve;
    videoElement.onerror = reject;
  });
 
  // 执行视频滤镜操作
  const buffer = await ffmpeg.write('mpegts', {
    // 设置输出格式为mpegts
    muxer: 'mpegts',
  });
 
  // 将处理后的视频流发送到服务器或进行其他操作
  // 例如，可以将buffer发送到服务器进行进一步处理
  // 这里仅为示例，通常需要使用fetch或XMLHttpRequest来发送数据
  console.log('视频处理完成，输出的buffer为：', buffer);
});

这段代码展示了如何在Web应用中使用ffmpeg.js来处理用户上传的视频文件。首先，它引入并初始化ffmpeg.js库，然后获取用户选择的文件并将其读取为DataURL。接下来，使用ffmpeg.js的write方法将视频流转换为mpegts格式的数据，最后打印出转换后的数据。在实际应用中，可以将转换后的数据发送到服务器进行进一步处理或者创建下载链接供用户下载处理后的视频。

- 阅读更多 -

【JS】实现 Base64 编码和解码（及中文乱码问题）

System

2024-08-07

所有,javascript




// 编码函数
function encode64(str) {
    var buffer = new Buffer(str.toString(), 'utf-8');
    return buffer.toString('base64');
}
 
// 解码函数
function decode64(str) {
    var buffer = new Buffer(str, 'base64');
    return buffer.toString('utf-8');
}
 
// 测试代码
var str = 'Hello, World!';
var encodedStr = encode64(str);
var decodedStr = decode64(encodedStr);
 
console.log('原始字符串:', str);
console.log('编码后:', encodedStr);
console.log('解码后:', decodedStr);

注意：以上代码示例使用了Node.js的Buffer类来实现Base64编码和解码，并且在编码和解码时指定了UTF-8字符编码来确保中文字符正确处理。在浏览器环境中，可以使用btoa()和atob()函数来实现相同的功能。

System

2024-08-07

所有,vue.js




// 防抖函数
function debounce(fn, wait) {
    let timeout = null;
    return function() {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        let callNow = !timeout;
        timeout = setTimeout(() => {
            timeout = null;
        }, wait);
        if (callNow) fn.apply(context, args);
    };
}
 
// 节流函数
function throttle(fn, wait) {
    let previous = 0;
    return function() {
        let context = this;
        let args = arguments;
        let now = new Date();
        if (now - previous > wait) {
            fn.apply(context, args);
            previous = now;
        }
    };
}
 
// 使用场景示例
// 防抖应用于搜索框输入
let searchBox = document.getElementById('search-box');
let debouncedInput = debounce(search, 500);
searchBox.addEventListener('input', debouncedInput);
 
// 节流应用于鼠标移动
let mouseMove = throttle(handleMouseMove, 1000);
document.addEventListener('mousemove', mouseMove);

这段代码展示了如何使用防抖和节流函数来优化事件处理。防抖确保事件处理器在 n 秒内不会被频繁触发，而节流则限制了一定时间内事件处理器的调用频率。这两种技术在输入字段的实时验证、滚动事件的处理和高频率触发的按钮点击等场景中有着广泛的应用。

- 阅读更多 -

搜索Mysql的JSON字段的值

System

2024-08-07

所有,mysql

在MySQL中，你可以使用JSON_EXTRACT函数来搜索JSON字段的值。以下是一个例子，假设我们有一个名为orders的表，其中包含一个名为details的JSON类型的列，我们想要搜索details列中customer_id为特定值的行。




SELECT *
FROM orders
WHERE JSON_EXTRACT(details, '$.customer_id') = '12345';

在这个例子中，$.customer_id是一个JSON路径表达式，它指定了我们想要在details字段的JSON数据结构中查找的路径。如果customer_id的值是数字而不是字符串，则不需要引号。

如果你使用的是MySQL 5.7及以上版本，你也可以使用->>运算符来提取JSON对象的值：




SELECT *
FROM orders
WHERE details->>'$.customer_id' = '12345';

这里的->>运算符更加简洁，它直接返回文本形式的值，而不是返回JSON子对象。

System

2024-08-07

所有,nodejs

在Node.js中，使用officecrypto-tool库来读取加密的Excel（.xls或.xlsx）和Word（.docx）文件，首先需要安装这个库：




npm install officecrypto-tool

然后，你可以使用以下代码示例来读取加密的文件：




const Office = require('officecrypto-tool');
 
// 读取加密的Excel文件
Office.xlsx.decryptLocalFile('encrypted_file.xlsx', 'password', (err, data) => {
  if (err) {
    console.error('读取Excel文件时发生错误：', err);
    return;
  }
  console.log('解密的Excel数据：', data);
});
 
// 读取加密的Word文件
Office.docx.decryptLocalFile('encrypted_file.docx', 'password', (err, data) => {
  if (err) {
    console.error('读取Word文件时发生错误：', err);
    return;
  }
  console.log('解密的Word数据：', data);
});

请确保替换encrypted_file.xlsx和encrypted_file.docx为你的加密文件名，以及将password替换为用于加密文件的密码。

注意：officecrypto-tool库可能不支持最新版本的Office文件格式，如果遇到读取问题，请确保文件格式兼容性。

System

2024-08-07

所有,npm

报错信息 npm ERR! code ENOTFOUND 和 npm ERR! errno ENOTFOUND 表示 npm 在尝试进行网络请求时无法解析域名。这通常意味着 npm 无法连接到指定的服务器或资源。

解决方法：

检查网络连接：确保你的设备可以正常访问互联网。
检查代理设置：如果你在使用代理服务器，确保 npm 配置正确。
清除 npm 缓存：运行 npm cache clean --force 清除缓存后再尝试。
检查 npm 源：运行 npm config get registry 查看当前的 npm 源地址，如果有必要，可以更换到官方源或者其他的镜像源。
尝试使用不同的网络或VPN：有时候特定的网络环境可能导致连接问题。
重启 npm 服务：如果可能，尝试重启计算机或者结束所有的 npm 进程后再次尝试。

如果以上步骤都不能解决问题，可能需要进一步检查是否有其他软件（如防火墙或安全软件）阻止了 npm 的网络请求，或者联系你的网络管理员寻求帮助。

2024-08-07

要为网站的鼠标点击事件添加富强多样的内容，可以使用JavaScript来动态地向页面元素添加事件监听器。以下是一个简单的例子，它在用户点击页面时添加一段富含的内容：




// 为document添加click事件监听器
document.addEventListener('click', function(event) {
    // 创建一个新的div元素
    var newDiv = document.createElement('div');
    // 设置div的内容
    newDiv.innerHTML = '<h1>富强多样的内容</h1>' +
                       '<p>这是随机生成的内容，可以是图片、视频、链接等等。</p>' +
                       '<img src="https://placekitten.com/200/200" alt="一只小猫">';
    // 将新div添加到body中
    document.body.appendChild(newDiv);
 
    // 如果需要阻止进一步的点击事件处理，可以调用event.stopPropagation()
    // event.stopPropagation();
});

这段代码会在用户每次点击页面时，在body中动态添加一个包含文本和图片的新div元素。如果你想要添加更多的内容，比如视频或者其他富媒体，只需要修改newDiv.innerHTML中的内容即可。

请注意，在实际的生产环境中，你可能需要对生成的内容进行更多的错误处理和安全性检查，以确保用户体验和网站的安全。

- 阅读更多 -

JQuery-JavaScript代码库-动画篇—我耀学IT

System

2024-08-07

所有,jquery




// 使用jQuery实现一个简单的淡入淡出动画
$(document).ready(function() {
    // 当点击按钮时，触发淡入动画
    $('#fadeInButton').click(function() {
        $('#box').fadeIn();
    });
 
    // 当点击另一个按钮时，触发淡出动画
    $('#fadeOutButton').click(function() {
        $('#box').fadeOut();
    });
});

这段代码展示了如何使用jQuery库中的fadeIn()和fadeOut()函数来创建简单的淡入和淡出动画。当用户点击页面上的特定按钮时，关联的动画效果会被触发，并应用于ID为box的元素上。这是jQuery动画库中的一个基本示例，展示了如何利用这个库来增强网页的交互性。

System

2024-08-07

所有,javascript

由于篇幅所限，以下是实现Web端智能聊天问答客服的核心函数，包括发送消息和接收消息的处理。




// 初始化聊天界面
function initChat() {
    // 发送消息到服务器
    document.getElementById('chat-input').addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            sendMessage(this.value);
            this.value = '';
        }
    });
 
    // 接收服务器发送的消息
    // 假设receiveMessage是一个异步函数，从服务器接收消息
    receiveMessage().then(function(response) {
        handleMessage(response);
    }).catch(function(error) {
        console.error('Error receiving message:', error);
    });
}
 
// 发送消息到服务器
function sendMessage(message) {
    // 假设sendMessageToServer是一个异步函数，向服务器发送消息
    sendMessageToServer(message).then(function(response) {
        handleMessage({ text: message, type: 'outgoing' });
    }).catch(function(error) {
        console.error('Error sending message:', error);
    });
}
 
// 处理接收到的消息
function handleMessage(message) {
    var chatLog = document.getElementById('chat-log');
    var messageElement = document.createElement('div');
 
    if (message.type === 'incoming') {
        messageElement.classList.add('incoming-message');
    } else {
        messageElement.classList.add('outgoing-message');
    }
 
    messageElement.innerHTML = message.text;
    chatLog.appendChild(messageElement);
    chatLog.scrollTop = chatLog.scrollHeight;
}
 
// 假设的服务器通信函数
function sendMessageToServer(message) {
    return new Promise(function(resolve, reject) {
        // 这里应该是发送消息到服务器的代码
        // 发送成功后调用resolve(response)，失败时调用reject(error)
    });
}
 
function receiveMessage() {
    return new Promise(function(resolve, reject) {
        // 这里应该是从服务器接收消息的代码
        // 接收成功后调用resolve(response)，失败时调用reject(error)
    });
}
 
initChat();

这段代码展示了如何初始化聊天界面，监听用户输入并发送消息，以及如何处理接收到的消息。同时，它使用了Promise来处理异步操作，这是现代JavaScript开发中的一个常用模式。这个例子省略了服务器通信的细节，重点在于展示前端的逻辑处理。

- 阅读更多 -