分类前端技术下的文章

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>倒数计时器</title>
<style>
  body { font-family: Arial, sans-serif; }
  .timer { padding: 10px; background: #f0f0f0; margin-top: 20px; }
  .timer strong { font-size: 200%; }
</style>
</head>
<body>
 
<div class="timer">倒计时结束时间：<strong id="countdown"></strong></div>
 
<script>
// 设置倒计时结束时间（单位：毫秒）
const endTime = new Date('Jan 01, 2023 00:00:00').getTime();
 
// 更新倒计时显示
function updateCountdown() {
  const now = new Date().getTime();
  const distance = endTime - now;
 
  if (distance < 0) {
    clearInterval(intervalId);
    document.getElementById('countdown').innerHTML = '倒计时已经结束';
    return;
  }
 
  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);
 
  document.getElementById('countdown').innerHTML = days + '天 ' + hours + '小时 '
    + minutes + '分 ' + seconds + '秒';
}
 
// 每秒更新倒计时
const intervalId = setInterval(updateCountdown, 1000);
</script>
 
</body>
</html>

这段代码会创建一个简单的倒计时计时器，显示直到2023年1月1日的剩余时间。当倒计时结束时，计时器会清除并显示消息"倒计时已经结束"。这个示例提供了一个基本的倒数计时器实现，并且可以通过调整endTime变量的值来设置不同的结束时间。

- 阅读更多 -

【JS】JS小数乘以100精度丢失

System

2024-08-08

所有,javascript

在JavaScript中，进行小数运算时可能会遇到精度丢失的问题。这是因为JavaScript中的Number类型使用IEEE 754标准，这个标准定义的浮点数算法并不适用于金融计算。

为了解决精度问题，可以使用以下方法：

使用Math.round(), Math.floor(), 或者Math.ceil()方法来四舍五入到指定的小数位数。
使用BigInt来处理大整数，然后手动进行小数点后位数的运算。
使用第三方库，如decimal.js或bignumber.js，这些库提供了更加精确的处理小数运算的方法。

下面是使用BigInt来处理的一个例子：




function multiplyWithPrecision(num1, num2, precision) {
  // 将数字转换为BigInt
  let bigInt1 = BigInt(num1 * 10 ** precision);
  let bigInt2 = BigInt(num2 * 10 ** precision);
  // 乘法
  let result = bigInt1 * bigInt2;
  // 将结果转换回Number类型并返回
  return Number(result) / 10 ** precision;
}
 
let result = multiplyWithPrecision(0.12345, 100, 5); // 6 位精度
console.log(result); // 输出：12.345

在这个例子中，我们定义了一个multiplyWithPrecision函数，它接受三个参数：num1，num2是要进行乘法的数字，precision是要保留的小数位数。我们通过将数字乘以10的精度次幂来转换为BigInt进行运算，然后再将结果除以同样的10的次幂来恢复原来的精度。

System

2024-08-08

所有,javascript

在JavaScript中，函数是一段可以被多次调用执行的代码。函数可以通过多种方式进行声明和使用。以下是一些常见的函数使用方法：

声明函数：




function sum(a, b) {
  return a + b;
}

调用函数：




let result = sum(1, 2); // 结果为3

函数表达式：




let sum = function(a, b) {
  return a + b;
};

匿名函数：




let sum = function(a, b) {
  return a + b;
};

立即执行函数：




(function(a, b) {
  console.log(a + b);
})(1, 2); // 输出3

构造函数：




function Person(name, age) {
  this.name = name;
  this.age = age;
}
 
let person = new Person('Alice', 25);

这些是函数在JavaScript中的基本使用方式。每种方法都有其特定的用途，可以根据场景选择合适的方法来声明和使用函数。

- 阅读更多 -

JS中事件处理机制（秒懂事件委托、事件捕获和事件冒泡）

System

2024-08-08

所有,javascript

在JavaScript中，事件处理机制包含三个阶段：事件捕获、事件目标和事件冒泡。

事件捕获（Capturing）：事件从最外层开始，逐层向内传播，直至目标元素。
事件目标（Target）：事件在目标元素上触发。
事件冒泡（Bubbling）：事件从目标元素开始，向外逐层传播。

事件委托是一种利用事件冒泡，处理多个元素事件的高效方法。事件委托可以将一个事件处理器绑定到一个父元素，而不是为每个子元素单独设置事件处理器。当子元素触发事件时，由于事件冒泡，父元素的事件处理器会被触发，并且可以通过事件的 target 属性来确定是哪个子元素触发了事件。

例子代码：




// 假设有一个父元素ul，它包含多个子列表项li
const ul = document.querySelector('ul');
 
// 事件委托例子
ul.addEventListener('click', function(event) {
  if (event.target && event.target.nodeName === 'LI') {
    // 如果事件目标是li，执行操作
    console.log('List item clicked:', event.target.textContent);
  }
});

在这个例子中，我们为父元素 ul 设置了一个点击事件监听器。当任何子元素 li 被点击时，事件冒泡到 ul，触发这个监听器。监听器函数通过检查 event.target 来判断是否是 li 元素被点击，如果是，则执行相应的操作。这就避免了为每个 li 元素单独设置事件监听器，提高了效率。

System

2024-08-08

所有,javascript

报错解释：

这个错误通常发生在使用Webpack打包JavaScript代码时，并且是由UglifyJs插件引起的。UglifyJs会尝试压缩和 mangle 你的代码，但是它遇到了一个它无法理解的语法 token，也就是这里的 name «currentVer。这通常意味着代码中可能存在一些不兼容的语法，或者变量名/属性名使用了特殊字符导致UglifyJs无法正确解析。

解决方法：

确认你的代码是否使用了ES6或者更高版本的特性，比如模板字符串、解构赋值等，而UglifyJs默认不支持这些特性。你可以通过安装和配置babel-loader来转译这些新特性，以确保兼容性。
检查currentVer是否是一个合法的变量名。确保它不包含非法字符，例如Unicode字符或者特殊符号。
如果你确认代码是正确的，并且确实需要使用UglifyJs不支持的特性，你可以通过配置UglifyJs插件的选项来忽略这个错误，例如设置compress: false或mangle: false，但这会降低代码压缩的效果。
升级UglifyJs插件到最新版本，可能新版本对某些ES6+特性有更好的支持。
如果可能，更换为使用terser-webpack-plugin，因为Terser支持更多的ES6+特性，并且是UglifyJs的替代品。
检查是否有其他的Webpack插件或loader干扰了UglifyJs的工作，如果有，可以尝试排除或更换它们。

在实施任何解决方案之前，请确保备份你的代码和Webpack配置，以防需要回退。

- 阅读更多 -

ExcelJS 合并表头,合并单元格,一sheet多表格

System

2024-08-08

所有,javascript

在ExcelJS中，要实现表头合并和单元格合并，你需要使用mergeCells方法来合并单元格，并使用header方法来设置表头。以下是一个简单的例子，展示如何在一个Sheet中创建多个表格，并对表头和单元格进行合并：




const ExcelJS = require('exceljs');
 
async function createExcel() {
  // 创建工作簿
  const workbook = new ExcelJS.Workbook();
 
  // 添加工作表
  const sheet = workbook.addWorksheet('My Sheet');
 
  // 添加表头并合并单元格
  sheet.addRow(['表头1', '表头2', '表头3', '表头4'], {
    merge: { s: { r: 0, c: 0 }, e: { r: 0, c: 3 } } // 合并从第一行第一列到第一行第四列的单元格
  });
 
  // 添加数据行
  sheet.addRow(['数据1', '数据2', '数据3', '数据4']);
 
  // 合并单元格，例如合并第二行的前两个单元格
  sheet.mergeCells('B2:C2');
 
  // 设置样式和格式化
  // ...
 
  // 写入文件
  await workbook.xlsx.writeFile('myExcel.xlsx');
}
 
createExcel();

在这个例子中，我们首先创建了一个新的工作簿和工作表。然后，我们添加了一个表头并且合并了这一行的所有单元格。接着，我们添加了一行普通数据。最后，我们合并了第二行的两个单元格（例如，“数据2”和“数据3”的单元格）。最后，我们将工作簿保存为一个Excel文件。

- 阅读更多 -

何在 Vue3 中使用 Cytoscape.js 创建交互式网络图

System

2024-08-08

所有,javascript




<template>
  <div ref="cyContainer"></div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import cytoscape from 'cytoscape';
 
const cyContainer = ref(null);
 
onMounted(() => {
  let cy = cytoscape({
    container: cyContainer.value, // 指定DOM元素作为Cytoscape的容器
    style: [ // 定义样式
      {
        selector: 'node',
        style: {
          'content': 'data(id)',
          'text-valign': 'center',
          'text-outline-width': 2,
          'text-outline-color': '#fff'
        }
      },
      {
        selector: ':selected',
        style: {
          'border-width': 3,
          'border-color': '#333'
        }
      }
    ],
    elements: { // 定义网络图的节点和边
      nodes: [
        { data: { id: 'a', foo: 'bar' } },
        { data: { id: 'b', foo: 'baz' } }
      ],
      edges: [
        { data: { source: 'a', target: 'b' } }
      ]
    },
    layout: {
      name: 'grid',
      rows: 2
    }
  });
  
  // 监听事件
  cy.on('click', 'node', function(event){
    console.log(event.target);
  });
});
</script>
 
<style>
/* 样式调整，确保Cytoscape正常显示 */
.cytoscape-container {
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>

这段代码展示了如何在Vue 3组件中集成Cytoscape.js来创建一个基本的互动网络图。首先，我们通过<template>定义了一个容器元素，并通过ref获取其DOM引用。在组件挂载(onMounted)后，我们初始化了Cytoscape实例，并指定了样式、元素和布局。最后，我们添加了一个点击节点的事件监听器来处理用户交互。

- 阅读更多 -

【NextJS】整个项目跨域配置

System

2024-08-08

所有,javascript

在Next.js项目中配置跨域请求通常涉及到两个部分：客户端的配置和服务器端的配置。

客户端配置：在_document.js文件中设置CORS。




// pages/_document.js
import Document from 'next/document';
 
class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head />
        <body>
          <Main />
          <NextScript />
          {process.env.NODE_ENV === 'development' ? (
            <script
              dangerouslySetInnerHTML={{
                __html: `
                  if (window.location.hostname === 'localhost') {
                    document.domain = 'localhost';
                  }
                `,
              }}
            />
          ) : null}
        </body>
      </html>
    );
  }
}
 
export default MyDocument;

服务器端配置：在服务器入口文件中（通常是server.js或index.js），使用next中间件时，可以配置代理来实现跨域。




// server.js 或 index.js
const next = require('next');
const express = require('express');
const devProxy = require('./proxy');
 
const { PORT = 3000 } = process.env;
 
const app = next({ dev: process.env.NODE_ENV !== 'production' });
const handle = app.getRequestHandler();
 
app.prepare()
  .then(() => {
    const server = express();
 
    // 如果是开发模式，配置代理来解决跨域
    if (process.env.NODE_ENV === 'development') {
      server.use('/api', (req, res) => {
        // 代理到目标服务器
        devProxy(req, res);
      });
    }
 
    server.all('*', (req, res) => handle(req, res));
 
    server.listen(PORT, () => {
      console.log(`Server running on http://localhost:${PORT}`);
    });
  })
  .catch((err) => {
    console.error(err);
    process.exit(1);
  });

在proxy.js中配置代理规则：




// proxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
 
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://target-domain.com', // 目标服务器地址
      changeOrigin: true,
      pathRewrite: {
        '^/api': '',
      },
    })
  );
};

以上代码提供了客户端和服务器端的跨域配置示例。在开发环境中，通过_document.js配置CORS，在生产环境中，确保服务器正确配置了CORS头部。在服务器端，使用http-proxy-middleware来代理请求到目标服务器，并设置changeOrigin为true来确保请求头中的Origin正确。

System

2024-08-08

所有,javascript

报错信息不完整，但根据提供的部分信息，可以推测是在使用Next.js框架时，尝试访问public目录下的静态文件时发生了错误。具体错误类型是AggregateError，与internalConnectMul相关。

AggregateError是一个表示一组错误的聚合错误，通常在Promise.all()或类似的情况下发生。如果在Next.js中有多个静态资源请求导致了这个错误，那么可能是因为资源之间的某种依赖或冲突。

解决方法：

检查资源请求：确保你尝试访问的静态资源存在于public目录中，并且路径正确无误。
检查网络请求：如果你在浏览器中看到这个错误，请检查网络请求是否正常，没有被防火墙或代理服务器阻止。
检查代码：如果错误是在代码中产生的，请检查相关的Promise.all调用，确保所有的资源都是可用的，并且没有因为某种原因（如CORS策略）被拒绝。
清理缓存：有时候旧的缓存可能会导致问题，尝试清除Next.js的缓存。
更新依赖：确保你的Next.js和其他相关依赖是最新版本，有时候错误是由旧版本的bug导致的。
查看日志：查看控制台或者服务器日志，可能会提供更多关于错误的信息。

由于缺少详细的错误栈和上下文信息，这些建议是基于常见的问题和解决策略。如果你能提供更多的错误信息，可能会有更具体的解决方案。

- 阅读更多 -

JS如何正确销毁 VIDEO 和AUDIO 元素

System

2024-08-08

所有,javascript

在JavaScript中，销毁一个video或audio元素通常意味着将其从DOM中移除，并清理相关的资源。以下是如何做到这一点的示例代码：




// 假设你有一个video元素，它有一个id为myVideo
var video = document.getElementById('myVideo');
 
// 从DOM中移除video元素
video.parentNode.removeChild(video);
 
// 清理video元素相关的资源
video = null;

对于audio元素，过程是相同的：




// 假设你有一个audio元素，它有一个id为myAudio
var audio = document.getElementById('myAudio');
 
// 从DOM中移除audio元素
audio.parentNode.removeChild(audio);
 
// 清理audio元素相关的资源
audio = null;

请注意，在实际的应用程序中，你可能还需要处理与这些元素相关的事件监听器和其他资源。这个简单的例子展示了如何从DOM中移除元素，并将元素的引用设置为null来释放内存。

- 阅读更多 -