1. 首页
  2. 分类
  3. javascript
HTML与JavaScript联动
System
2024-08-07
所有,javascript

在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()函数来实现相同的功能。

- 阅读更多 -
【JavaScript+自然语言处理+HTML+CSS】实现Web端的智能聊天问答客服实战（超详细必看）
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开发中的一个常用模式。这个例子省略了服务器通信的细节，重点在于展示前端的逻辑处理。

- 阅读更多 -
用js实现斐波那契数列
System
2024-08-07
所有,javascript

斐波那契数列是一个每个数字是前两个数字之和的序列，可以通过递归或循环来实现。下面是使用JavaScript实现斐波那契数列的两种方法：

递归方法：




function fibonacci(n) {
    if (n < 2) {
        return n;
    }
    return fibonacci(n - 1) + fibonacci(n - 2);
}
 
// 打印前 10 个斐波那契数
for (let i = 0; i < 10; i++) {
    console.log(fibonacci(i));
}

循环方法（更高效）：




function fibonacci(n) {
    let fib = [0, 1];
    for (let i = 2; i <= n; i++) {
        fib[i] = fib[i - 1] + fib[i - 2];
    }
    return fib[n];
}
 
// 打印前 10 个斐波那契数
for (let i = 0; i < 10; i++) {
    console.log(fibonacci(i));
}
- 阅读更多 -
【HTML】使用js给input标签增加disabled属性
System
2024-08-07
所有,javascript

在HTML中，可以使用JavaScript来给input元素添加disabled属性，这会禁用该input元素，使其不可交互。以下是一个简单的例子：

HTML:




<input type="text" id="myInput" />
<button onclick="disableInput()">禁用输入框</button>

JavaScript:




function disableInput() {
  document.getElementById('myInput').disabled = true;
}

在这个例子中，当点击按钮时，会调用disableInput函数，该函数通过getElementById找到ID为myInput的input元素，并将其disabled属性设置为true，从而禁用该输入框。

- 阅读更多 -
uniapp （h5）使用pdf.js
System
2024-08-07
所有,javascript

在uniapp中使用pdf.js来展示PDF文件，你需要按照以下步骤操作：

  1. 安装pdf.js库。

    你可以通过npm安装pdf.js依赖：

    


npm install pdfjs-dist

  2. 在uniapp项目中引入pdf.js。

    在main.js或需要使用PDF的页面中引入pdf.js和设置PDF.js的worker文件路径。

    


import pdfjsLib from 'pdfjs-dist/build/pdf';
 
pdfjsLib.GlobalWorkerOptions.workerSrc = 'path/to/pdf.worker.js'; // 修改为worker文件实际路径

  3. 使用PDF.js加载并渲染PDF。

    在<template>中添加一个用于显示PDF的canvas元素，然后在<script>中编写加载和渲染的逻辑。

    


<template>
  <view>
    <canvas canvas-id="pdf-canvas"></canvas>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      pdfDoc: null,
      pageNum: 1,
      pageRendering: false,
      canvas: null,
      ctx: null
    };
  },
  mounted() {
    this.loadPDF('path/to/your/pdf/file.pdf');
  },
  methods: {
    loadPDF(url) {
      const loadingTask = pdfjsLib.getDocument(url);
      loadingTask.promise.then(pdfDoc => {
        this.pdfDoc = pdfDoc;
        this.renderPage(this.pageNum);
      }).catch(error => {
        console.error('Error loading PDF: ', error);
      });
    },
    renderPage(pageNum) {
      this.pageRendering = true;
      this.pdfDoc.getPage(pageNum).then(page => {
        const viewport = page.getViewport({ scale: 1.5 });
        const canvas = this.$refs['pdf-canvas'];
        const ctx = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        const renderContext = {
          canvasContext: ctx,
          viewport: viewport
        };
        page.render(renderContext).promise.then(() => {
          this.pageRendering = false;
          if (this.pageNumPending !== null) {
            this.renderPage(this.pageNumPending);
            this.pageNumPending = null;
          }
        });
      });
    }
  }
}
</script>

在上述代码中，loadPDF函数负责获取PDF文档，renderPage函数负责渲染指定页码的PDF。注意，你需要将path/to/your/pdf/file.pdf替换为你的PDF文件路径。

以上代码仅提供了基本的PDF加载和渲染功能，你可能需要根据自己的需求进行扩展，比如添加页面跳转、缩放控制等功能。

- 阅读更多 -
（HTML/H5）JS导入本地json文件数据的三类方法
System
2024-08-07
所有,javascript

在HTML5中，你可以使用以下三种方法来导入本地的JSON文件数据：

  1. 使用XMLHttpRequest（对于现代浏览器）
  2. 使用fetch API
  3. 使用FileReader API和一个input元素

以下是每种方法的示例代码：

  1. 使用XMLHttpRequest：



var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var json = JSON.parse(xhr.responseText);
    console.log(json);
  }
};
xhr.send();
  1. 使用fetch API：



fetch('data.json')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => console.error('Error fetching JSON:', error));
  1. 使用FileReader API和input元素：



<input type="file" id="jsonFile" />
 
<script>
  const jsonFile = document.getElementById('jsonFile');
  jsonFile.addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = function(e) {
      try {
        const json = JSON.parse(e.target.result);
        console.log(json);
      } catch (error) {
        console.error('Error parsing JSON:', error);
      }
    };
    reader.readAsText(file);
  });
</script>

请确保你的JSON文件和HTML文件位于同一个目录中，或者提供正确的文件路径。此外，如果你从本地文件系统加载数据，浏览器可能会因为安全限制而阻止这些操作，这时你可能需要在本地运行一个本地服务器或使用特定的开发工具。

- 阅读更多 -
React NextJS App Router 实时获取API
System
2024-08-07
所有,javascript



import { useEffect, useState } from 'react';
import Router from 'next/router';
 
// 定义API路由和方法
const API_ROUTES = {
  'GET /api/data': async () => {
    const response = await fetch('/api/data');
    return await response.json();
  }
};
 
// 使用useEffect进行API调用和状态更新
function useLiveApi(route) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    setIsLoading(true);
    let isCancelled = false;
 
    async function fetchData() {
      try {
        const apiRoute = API_ROUTES[route];
        if (apiRoute) {
          const result = await apiRoute();
          if (!isCancelled) {
            setData(result);
          }
        } else {
          throw new Error('Route not found');
        }
      } catch (error) {
        if (!isCancelled) {
          setError(error);
        }
      } finally {
        if (!isCancelled) {
          setIsLoading(false);
        }
      }
    }
 
    fetchData();
 
    return () => {
      isCancelled = true;
    };
  }, [route]);
 
  return { data, isLoading, error };
}
 
// 使用自定义Hook
function MyComponent() {
  const { data, isLoading, error } = useLiveApi('GET /api/data');
 
  if (error) {
    return <div>Error: {error.message}</div>;
  }
 
  if (isLoading) {
    return <div>Loading...</div>;
  }
 
  return <div>{JSON.stringify(data)}</div>;
}
 
export default MyComponent;

这个代码实例展示了如何在React组件中使用自定义的useLiveApi钩子来实现对API的实时获取。它定义了一个模拟的API路由对象，并在组件中调用该钩子，根据路由获取数据，并展示加载状态和错误处理。这是一个简化的例子，但它展示了如何将实时数据获取集成到React应用程序中的核心概念。

- 阅读更多 -
vue+pdf.js预览本地pdf文件（可以复制文本，滚动页码展示）
System
2024-08-07
所有,javascript

要在Vue中使用PDF.js预览本地PDF文件并能够滚动查看页码，你可以遵循以下步骤：

  1. 安装 pdf.js 库。
  2. 在Vue组件中引入并使用PDF.js。
  3. 创建一个canvas元素来渲染PDF页面。
  4. 实现滚动功能。

以下是一个简单的Vue组件示例，展示如何实现这个功能：




<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>
 
<script>
import * as pdfjsLib from 'pdfjs-dist/webpack';
 
export default {
  props: {
    pdfFile: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.showPDF(this.pdfFile);
  },
  methods: {
    showPDF(pdfFile) {
      // 使用PDF.js加载PDF文件
      pdfjsLib.getDocument(pdfFile).promise.then(pdfDoc => {
        // 获取第一页
        pdfDoc.getPage(1).then(page => {
          const viewport = page.getViewport({ scale: 1.5 });
          const canvas = this.$refs.pdfCanvas;
          const context = canvas.getContext('2d');
 
          canvas.height = viewport.height;
          canvas.width = viewport.width;
 
          // 渲染页码
          const renderContext = {
            canvasContext: context,
            viewport: viewport
          };
          page.render(renderContext).promise.then(() => {
            // 渲染完成
          });
        });
      });
    }
  }
};
</script>

在这个例子中，我们假设你已经通过npm安装了pdfjs-dist包。pdfFile属性应该是PDF文件的本地路径或者URL。mounted钩子函数中调用了showPDF方法来加载和显示PDF。

请注意，由于浏览器的安全限制，本地文件通常只能在本地开发环境中使用，在生产环境中，你需要通过服务器提供这些文件。另外，如果需要处理更复杂的PDF渲染需求，例如文本选择、查找等，你可能需要编写额外的逻辑来实现这些功能。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号