分类 javascript 下的文章

【Js】js前端hash加密库Crypto-js进行MD5/SHA256/SHA512加密的方法

2024-08-07




// 引入CryptoJS库
const CryptoJS = require("crypto-js");
 
// MD5加密
function md5Encrypt(message) {
    return CryptoJS.MD5(message).toString();
}
 
// SHA256加密
function sha256Encrypt(message) {
    return CryptoJS.SHA256(message).toString();
}
 
// SHA512加密
function sha512Encrypt(message) {
    return CryptoJS.SHA512(message).toString();
}
 
// 示例
const message = "Hello, World!";
console.log(md5Encrypt(message)); // 输出MD5加密后的字符串
console.log(sha256Encrypt(message)); // 输出SHA256加密后的字符串
console.log(sha512Encrypt(message)); // 输出SHA512加密后的字符串

在这个示例中，我们定义了三个函数用于MD5、SHA256和SHA512加密。每个函数接收一个消息作为参数，使用CryptoJS中对应的加密方法进行加密，并将结果转换为字符串。然后，我们用一个示例字符串调用这些函数，并打印出加密后的结果。

- 阅读更多 -

Echart图表之 X轴（xAxis）与 Y轴（yAxis）配置项大全

System

2024-08-07

所有,javascript




option = {
    xAxis: {
        type: 'category', // 坐标轴类型，'category'表示类目轴
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // 类目数据（X轴的数据）
        axisLabel: {
            rotate: 45, // 标签旋转角度
            margin: 8 // 标签与轴线之间的距离
        },
        axisTick: {
            alignWithLabel: true // 刻度线与标签对齐
        }
    },
    yAxis: {
        type: 'value', // 坐标轴类型，'value'表示数值轴
        axisLabel: {
            formatter: '{value} °C' // 标签格式化为温度值
        },
        min: 0, // Y轴最小值
        max: 25, // Y轴最大值
        interval: 5 // Y轴刻度间隔
    },
    series: [{
        data: [8, 9, 10, 11, 12, 13, 14], // 系列中的数据（Y轴的数据）
        type: 'line' // 系列类型，'line'表示折线图
    }]
};

这个ECharts图表配置项示例展示了如何配置X轴和Y轴。X轴被设置为类目轴，并提供了旋转的标签和与标签对齐的刻度线。Y轴被设置为数值轴，并提供了格式化的标签和最大、最小值以及刻度间隔。最后，一个简单的折线图系列使用了这些配置项。

- 阅读更多 -

推荐开源项目：Validate.js —— 简洁高效表单验证工具

System

2024-08-07

所有,javascript

Validate.js 是一个轻量级的JavaScript库，用于简化表单验证过程。以下是一个使用Validate.js进行表单验证的示例代码：




// 引入Validate.js库
const validate = require('validate.js');
 
// 定义验证规则
const constraints = {
  username: {
    presence: { allowEmpty: false },
    length: { minimum: 5 }
  },
  email: {
    presence: { allowEmpty: false },
    email: { message: '不是有效的邮箱格式' }
  },
  age: {
    presence: { allowEmpty: false },
    numericality: { onlyInteger: true, greaterThan: 0 }
  }
};
 
// 需要验证的数据
const formData = {
  username: 'alice',
  email: 'alice@example.com',
  age: '25'
};
 
// 执行验证
const errors = validate(formData, constraints);
 
// 输出验证结果
if (errors) {
  console.log(errors);
} else {
  console.log('验证通过');
}

这段代码首先引入了Validate.js库，然后定义了一个包含用户名、邮箱和年龄的验证规则。接着，它使用这些规则验证了一个假设的表单数据。如果验证失败，它会输出错误信息；如果验证成功，它会输出“验证通过”。这个例子展示了如何使用Validate.js来简化表单验证过程。

- 阅读更多 -

js中如何从tree数据中找出某一项以及父级和祖先级

System

2024-08-07

所有,javascript

在JavaScript中，要从树形数据中找出特定项及其所有父级和祖先级，可以使用递归函数遍历整棵树。以下是一个简单的示例函数，它接收树形数据和要查找的项的特定属性值，返回找到的节点以及其所有父级和祖先级。




function findItemInTree(treeData, targetValue, targetKey = 'id') {
  const result = {
    item: null,
    parents: [],
    ancestors: []
  };
 
  function findNode(nodes, parent) {
    if (!nodes || nodes.length === 0) return;
 
    for (const node of nodes) {
      if (node[targetKey] === targetValue) {
        result.item = node;
        result.parents = [parent];
        return true;
      }
 
      if (findNode(node.children, node)) {
        result.parents.push(parent);
        return true;
      }
    }
  }
 
  findNode(treeData, null);
 
  if (result.item) {
    result.ancestors = result.parents.slice(0, -1);
  }
 
  return result;
}
 
// 示例树形数据
const treeData = [
  {
    id: 1,
    name: 'Node 1',
    children: [
      {
        id: 2,
        name: 'Node 1.1',
        children: [{ id: 4, name: 'Node 1.1.1' }]
      }
    ]
  },
  {
    id: 3,
    name: 'Node 2'
  }
];
 
// 使用示例
const targetValue = 4; // 假设我们要找的项的id是4
const found = findItemInTree(treeData, targetValue);
 
console.log(found);

这段代码定义了一个findItemInTree函数，它接受树形数据和目标值，然后递归查找具有该值的节点。如果找到了节点，它会返回一个对象，包含item（找到的节点）、parents（所有父节点，不包括目标节点本身）和ancestors（所有祖先节点，包括目标节点的父节点）。在实际应用中，你可以根据需要调整targetKey来指定查找特定属性。

- 阅读更多 -

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

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，从而禁用该输入框。

- 阅读更多 -