分类 javascript 下的文章

2024-08-17




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat Application</title>
    <style>
        #messageArea {
            height: 300px;
            overflow-y: scroll;
            border: 1px solid #ccc;
            padding: 8px;
            margin-bottom: 10px;
        }
        #message {
            width: 100%;
            padding: 8px;
            margin-top: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="messageArea"></div>
    <input type="text" id="message" placeholder="Type your message here...">
    <button onclick="sendMessage()">Send</button>
 
    <script>
        // 发送消息的函数
        function sendMessage() {
            var message = document.getElementById('message').value;
            if (message === '') {
                alert('Message cannot be empty.');
                return;
            }
            document.getElementById('messageArea').innerHTML += '<p><strong>You:</strong> ' + message + '</p>';
            document.getElementById('message').value = '';
 
            // 这里可以添加发送消息到服务器的代码
            // 例如使用 XMLHttpRequest 或者 fetch API
        }
    </script>
</body>
</html>

这个简单的示例展示了如何使用JavaScript和HTML创建一个基本的聊天页面。用户输入的消息会被添加到页面的messageArea元素中，并且在发送按钮被点击时，消息区域会显示用户输入的文本。这个例子没有包含实际发送消息到服务器的代码，因为这涉及到后端逻辑和API设计。

System

2024-08-17

所有,javascript

在JavaScript中，scrollTop 属性可以用于获取或设置元素的滚动条垂直位置。如果你想将页面滚动到顶部，可以将 scrollTop 属性设置为 0。

以下是一个简单的例子，演示如何使用JavaScript滚动到页面顶部：




// 获取当前页面的滚动条垂直位置
var scrollTopPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
 
// 如果页面正在滚动，则停止滚动
if (scrollTopPosition > 0) {
  window.requestAnimationFrame(function() {
    window.scrollTo(0, scrollTopPosition - (scrollTopPosition / 10));
  });
}
 
// 直接滚动到页面顶部
window.scrollTo(0, 0);

这段代码首先获取当前的滚动位置，如果页面正在滚动（即scrollTopPosition大于0），则通过requestAnimationFrame逐渐减少滚动距离直至到达顶部。如果不需要平滑滚动，可以直接设置window.scrollTo(0, 0)来立即滚动到页面顶部。

- 阅读更多 -

推荐 FileSaver.js: 简单易用的本地文件保存解决方案

System

2024-08-17

所有,javascript

FileSaver.js 是一个简单的库，用于使用客户端代码将文件保存到用户的设备中。以下是如何使用 FileSaver.js 保存文件的示例代码：




// 首先，确保已经引入了 FileSaver.js 库
// 可以通过 npm 安装或直接通过 CDN 引入
 
// 创建一个Blob实例，可以是文本、图片或其他二进制文件
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
 
// 使用 FileSaver.js 保存文件
// 参数1：文件名，参数2：文件内容（Blob对象）
saveAs(blob, "hello-world.txt");

在实际应用中，如果你需要保存一些服务器端生成的文件，你可能需要先通过 AJAX 请求获取文件内容，然后再使用 FileSaver.js 进行保存。以下是一个使用 AJAX 获取文本内容并保存到本地的示例：




// 使用 fetch API 获取服务器上的文件内容
fetch('path/to/your/file')
  .then(response => response.blob())
  .then(blob => {
    // 使用 FileSaver.js 保存文件
    saveAs(blob, 'saved-file.txt');
  });

这两个示例展示了如何使用 FileSaver.js 保存简单的文本文件和从服务器获取的文件。这是一个非常实用的技术，可以在开发需要用户下载文件的web应用时使用。

System

2024-08-17

所有,javascript

在JavaScript中，可以使用fetch API来发送POST请求，并且可以设置请求体的数据类型为FormData。以下是一个示例代码：




// 创建一个FormData对象
const formData = new FormData();
 
// 添加表单数据
formData.append('key1', 'value1');
formData.append('key2', 'value2');
 
// 发送POST请求
fetch('https://example.com/api/endpoint', {
  method: 'POST',
  body: formData,
  // 设置请求头，告知服务器内容类型为表单数据
  headers: {
    'Content-Type': 'multipart/form-data',
  },
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

在这个例子中，我们创建了一个FormData对象，并且向其中添加了一些键值对数据。然后，我们使用fetch函数发送了一个POST请求，其中的body属性设置为我们的formData对象。同时，我们设置了请求头Content-Type为'multipart/form-data'，这告诉服务器我们正在发送的是multipart/form-data类型的数据。

请注意，如果你的服务器期望的是application/x-www-form-urlencoded格式的数据，你需要设置Content-Type为'application/x-www-form-urlencoded'，并且需要转换formData为查询字符串形式。

- 阅读更多 -

JS中Lodash工具库（秒懂如何使用Lodash并手写精简版Lodash）

System

2024-08-17

所有,javascript

Lodash是一个JavaScript库，它提供了许多有用的函数来帮助开发者更简单、更高效地编写JavaScript代码。以下是如何使用Lodash的一个例子，并尝试手动实现一个精简版的Lodash函数。

使用Lodash

安装Lodash:




npm install lodash

在JavaScript文件中使用Lodash:




const _ = require('lodash');
 
_.shuffle([1, 2, 3, 4, 5]); // 随机排序数组

手写精简版Lodash的`shuffle`函数




function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}
 
console.log(shuffle([1, 2, 3, 4, 5])); // 随机排序数组

这个shuffle函数实现了与Lodash的shuffle方法相同的功能，只不过它是手动实现的，没有使用Lodash库。这个例子展示了如何使用Fisher-Yates算法来随机排序数组。

- 阅读更多 -

js 中文乱码解决、乱码对照

System

2024-08-17

所有,javascript

乱码通常发生在字符编码不一致时，可能是由于文件编码、网络传输编码、或者浏览器解析编码不一致导致。

解决方法：

确保文件编码：保存JavaScript文件时，选择UTF-8编码格式。
确保网络传输编码：如果是通过HTTP请求获取JavaScript文件，确保服务器响应头部的Content-Type包含charset=utf-8。
确保浏览器解析编码：在HTML文档的<head>标签中指定字符集<meta charset="UTF-8">。
使用字符实体：对于无法正常显示的字符，可以使用字符实体（如&#xxxx;）。
使用Unicode转义：在JavaScript中，可以使用\uXXXX形式的Unicode转义字符。

示例代码：




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>乱码解决示例</title>
</head>
<body>
    <script>
        // 使用Unicode转义字符
        var chineseText = '\u4f60\u597d\uff0c\u4e16\u754c\uff01'; // 你好，世界！
        console.log(chineseText);
    </script>
</body>
</html>

在这个示例中，使用了Unicode转义字符来确保中文字符在JavaScript中正确显示。如果直接写入中文字符，也要确保保存文件时使用UTF-8编码。

- 阅读更多 -

JS获取IP地址

System

2024-08-17

所有,javascript

在JavaScript中获取用户的IP地址不是一项简单的任务，因为出于隐私和安全的原因，浏览器不允许直接访问客户端的IP地址。但是，可以通过调用外部服务API来获取用户的公网IP地址。

以下是一个使用第三方API（例如 https://api.ipify.org）来获取用户公网IP地址的示例代码：




function getUserIP(callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.ipify.org?format=json', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if(xhr.status === 200) {
        var ip = JSON.parse(xhr.responseText).ip;
        callback(ip);
      }
    }
  };
  xhr.send();
}
 
// 使用方法
getUserIP(function(ip){
  console.log(ip); // 输出用户的公网IP地址
});

请注意，这种方法依赖于第三方服务，可能会受到API服务可用性的影响。此外，如果用户在私有网络（如局域网或无法直接访问Internet的环境）中，可能无法获取其公网IP地址。

- 阅读更多 -

JS获取cookie方法汇总

System

2024-08-17

所有,javascript

在JavaScript中，获取cookie的方法可以通过自定义函数来实现。以下是一个简单的函数，用于获取指定名称的cookie值：




function getCookie(name) {
    let cookies = document.cookie.split('; '); // 将cookie字符串分割成数组
    for (let i = 0; i < cookies.length; i++) {
        let parts = cookies[i].split('='); // 分割cookie的键和值
        if (parts[0] === name) { // 如果找到了指定的cookie名称
            return parts[1]; // 返回该cookie的值
        }
    }
    return ''; // 如果没有找到，返回空字符串
}

使用方法：




let cookieValue = getCookie('cookieName'); // 替换'cookieName'为你想获取的cookie的名称
console.log(cookieValue); // 输出cookie的值

这个函数会遍历所有的cookies，并返回匹配指定名称的cookie的值。如果没有找到，则返回空字符串。

System

2024-08-17

所有,javascript

题目描述：

给定一个项目数组，每个项目有一个要求的开始时间和结束时间，请计算最多可以安排的项目数量。

输入描述：

第一行输入项目的数量n（1 <= n <= 10000）。

接下来n行，每行输入两个整数，表示项目的开始时间和结束时间（时间范围从1到1000000）。

输出描述：

输出最多可以安排的项目数量。

示例：

输入：

2 3

1 4

3 5

4 6

7 8

输出：

解释：

可以安排的项目是[1, 4], [3, 5], [7, 8]，总共3个。

解法：

这是一个经典的贪心算法问题。我们可以根据项目的结束时间对所有项目进行排序，然后从最早结束的项目开始安排。使用一个变量来记录当前已经安排的最晚结束时间，并在遍历项目时更新这个值。

以下是使用不同编程语言实现的解决方案：

Java 示例代码：




import java.util.Arrays;
import java.util.Comparator;
 
public class Main {
    static class Project {
        int start;
        int end;
 
        Project(int start, int end) {
            this.start = start;
            this.end = end;
        }
    }
 
    public static void main(String[] args) {
        Project[] projects = {
            new Project(2, 3),
            new Project(1, 4),
            new Project(3, 5),
            new Project(4, 6),
            new Project(7, 8)
        };
 
        Arrays.sort(projects, Comparator.comparingInt(p -> p.end));
 
        int count = 1;
        int lastEnd = projects[0].end;
 
        for (int i = 1; i < projects.length; i++) {
            if (projects[i].start >= lastEnd) {
                count++;
                lastEnd = projects[i].end;
            }
        }
 
        System.out.println(count);
    }
}

JavaScript 示例代码：




function solution(projects) {
    projects.sort((a, b) => a[1] - b[1]);
 
    let count = 1;
    let lastEnd = projects[0][1];
 
    for (let i = 1; i < projects.length; i++) {
        if (projects[i][0] >= lastEnd) {
            count++;
            lastEnd = projects[i][1];
        }
    }
 
    return count;
}
 
// 示例
const projects = [
    [2, 3],
    [1, 4],
    [3, 5],
    [4, 6],
    [7, 8]
];
console.log(solution(projects)); // 输出: 3

Python 示例代码：




def solution(projects):
    projects.sort(key=lambda p: p[1])
 
    count = 1
    last_end = projects[0][1]
 
    for p in projects[1:]:
        if p[0] >= last_end:
            count += 1
            last_end = p[1]
 
    return count
 
# 示例
projects = [[2, 3], [1, 4], [3, 5], [4, 6], [7, 8]]
print(solution(projects))  # 输出: 3

C/C++ 示例代码：




#include <stdio.h>
#include <stdlib.h>
 
typedef struct {
    int start;
    int end;
} Project;
 
int cmp(const

- 阅读更多 -

JS获取阿里云oss私有图片需要通过SDK加签名访问问题

System

2024-08-17

所有,javascript

在使用阿里云OSS服务时，为了安全，通常需要对请求进行签名。以下是一个使用JavaScript SDK生成签名并访问OSS资源的示例代码：

首先，确保已经安装了阿里云的ali-oss包：




npm install ali-oss

然后，使用以下代码生成签名并访问OSS上的私有图片：




const OSS = require('ali-oss');
 
async function getSignedUrl(objectKey, expires) {
  const client = new OSS({
    region: '<Your region>',
    accessKeyId: '<Your accessKeyId>',
    accessKeySecret: '<Your accessKeySecret>',
    bucket: '<Your bucket name>',
  });
 
  try {
    const url = await client.signatureUrl(objectKey, { expires });
    return url;
  } catch (e) {
    console.error(e);
    return null;
  }
}
 
// 使用示例：
const objectKey = 'path/to/your/private/photo.jpg';
const expires = 3600; // 签名URL的有效时间，单位为秒
 
const signedUrl = await getSignedUrl(objectKey, expires);
console.log(signedUrl); // 输出生成的带签名的URL

在上述代码中，替换<Your region>, <Your accessKeyId>, <Your accessKeySecret>, 和 <Your bucket name>为您的OSS配置信息。objectKey是OSS中资源的路径，expires是签名URL的有效时间。

生成的signedUrl可以直接在浏览器中访问，无需进行额外的身份验证，在指定时间内有效。

- 阅读更多 -

使用Lodash

手写精简版Lodash的shuffle函数

手写精简版Lodash的`shuffle`函数