标签 Javascript 下的文章

在Node.js项目中使用node-postgres连接postgres以及报错指南

2024-08-21




// 引入node-postgres库
const { Pool } = require('pg');
 
// 创建配置对象
const config = {
  user: 'your_user', // 替换为你的用户名
  database: 'your_database', // 替换为你的数据库名
  password: 'your_password', // 替换为你的密码
  host: 'localhost', // 或者你的数据库服务器地址
  port: 5432 // 或者你的数据库端口号
};
 
// 创建连接池
const pool = new Pool(config);
 
// 连接数据库
pool.connect((err, client, done) => {
  if (err) {
    console.error('数据库连接出错', err.stack);
    return;
  }
  console.log('连接成功');
  
  // 使用完成后释放客户端
  client.query('SELECT NOW() AS "currentTime"', (err, result) => {
    done();
 
    if (err) {
      console.error('查询出错', err.stack);
      return;
    }
    
    console.log(result.rows[0].currentTime);
  });
});

这段代码展示了如何在Node.js项目中使用node-postgres库连接PostgreSQL数据库，并执行一个简单的查询。它还包括了错误处理，以确保在出现问题时程序不会崩溃，而是输出错误信息并尝试恢复。

System

2024-08-21

所有,html

在CSS中，有四种不同的定位方式：

静态定位（Static Positioning）
相对定位（Relative Positioning）
绝对定位（Absolute Positioning）
固定定位（Fixed Positioning）
静态定位：这是所有元素的默认定位方式，即按照正常文档流进行布局。
相对定位：元素相对于其正常位置进行定位。可以通过top, bottom, left, right属性进行微调。
绝对定位：元素相对于最近的非静态定位的父元素进行定位。如果没有，则相对于body元素。
固定定位：元素相对于浏览器窗口进行定位，无论滚动条如何滚动，元素都会固定在屏幕的指定位置。

以下是对应的CSS代码示例：




/* 静态定位 */
/* 相对定位 */
.relative {
  position: relative;
  left: 20px;
  top: 20px;
}
 
/* 绝对定位 */
.absolute {
  position: absolute;
  left: 20px;
  top: 20px;
}
 
/* 固定定位 */
.fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

在HTML中使用这些定位方式：




<!-- 静态定位 -->
<div>Static Positioning</div>
 
<!-- 相对定位 -->
<div class="relative">Relative Positioning</div>
 
<!-- 绝对定位 -->
<div class="absolute">Absolute Positioning</div>
 
<!-- 固定定位 -->
<div class="fixed">Fixed Positioning</div>

注意："粘贴定位"不是CSS的标准定位方式，如果你是指的是设置元素为固定位置，请确保使用position: fixed;。

- 阅读更多 -

分析 JS 与 CSS 是否阻塞 DOM 的渲染和解析

System

2024-08-21

所有,javascript

在浏览器中，JavaScript 和 CSS 的加载可能会阻塞 DOM 的渲染和解析。这是因为浏览器为了避免出现无样式内容的闪烁（FOUC - Flash of Unstyled Content）或无结构内容的空白屏，会在解析完 HTML 之后，立即渲染出 DOM，然后才执行 CSS 和 JavaScript 的下载及执行。

解决这个问题的关键是减少 JavaScript 和 CSS 文件的体积，使用异步加载（例如通过动态创建 <script> 或 <link> 标签），并且将它们放在文档的底部，接近 </body> 标签处。

以下是一个简单的示例，展示了如何将 CSS 和 JavaScript 文件置于底部加载：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 样式表置于头部但设置为异步加载 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 页面内容 -->
    <div>
        <h1>Hello World</h1>
    </div>
 
    <!-- JavaScript 文件置于底部 -->
    <script src="script.js" async></script>
</body>
</html>

在这个例子中，CSS 文件会阻塞 DOM 的渲染，但不会阻塞 JavaScript 的加载，因为我们使用了 async 属性。JavaScript 文件置于页面底部，不会阻塞 DOM 的解析，而且它会在文档加载完成后执行。这样可以提升页面的渲染性能。

- 阅读更多 -

Js——时间戳和普通日期（年月日）的相互转换

System

2024-08-21

所有,javascript

在JavaScript中，可以使用内置的Date对象来进行时间戳和普通日期（年月日）的互相转换。

时间戳转普通日期：




// 假设 timestamp 是一个时间戳（单位：毫秒）
var timestamp = 1609459200000; // 例如：2021-01-01 00:00:00
var date = new Date(timestamp);
var year = date.getFullYear();
var month = date.getMonth() + 1; // 月份是从0开始的
var day = date.getDate();
 
console.log(year, month, day); // 输出：2021 1 1

普通日期转时间戳：




// 假设 year, month, day 分别是年、月、日
var year = 2021;
var month = 1; // 实际月份应该是0-11的数字，1代表1月
var day = 1;
 
// 创建Date对象
var date = new Date(year, month - 1, day); // 注意月份是从0开始的
 
// 获取时间戳
var timestamp = date.getTime(); // 或者使用 date.valueOf() 或者 date.getTime()
 
console.log(timestamp); // 输出：1609459200000

请注意，在JavaScript中，月份是从0开始的，即0代表1月，11代表12月。因此在将年月日转换为Date对象时，月份应该减去1。而从Date对象获取月份时，应该加上1来获取正确的月份值。

- 阅读更多 -

HTML CSS JS学习笔记之实现网页计算器1，阿里巴巴二面被血虐

System

2024-08-21

所有,html

以下是一个简单的网页计算器实现的代码示例，仅包含HTML和JavaScript，没有使用CSS。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <script>
        function calculate() {
            var firstNumber = parseFloat(document.getElementById('firstNumber').value);
            var secondNumber = parseFloat(document.getElementById('secondNumber').value);
            var operator = document.getElementById('operators').value;
            var result;
 
            switch (operator) {
                case '+':
                    result = firstNumber + secondNumber;
                    break;
                case '-':
                    result = firstNumber - secondNumber;
                    break;
                case '*':
                    result = firstNumber * secondNumber;
                    break;
                case '/':
                    if (secondNumber === 0) {
                        result = 'Cannot divide by zero';
                    } else {
                        result = firstNumber / secondNumber;
                    }
                    break;
                default:
                    result = 'Invalid operator';
                    break;
            }
 
            document.getElementById('result').value = result;
        }
    </script>
</head>
<body>
    <input type="text" id="firstNumber" placeholder="First Number">
    <select id="operators">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" id="secondNumber" placeholder="Second Number">
    <button onclick="calculate()">Calculate</button>
    <input type="text" id="result" placeholder="Result" readonly>
</body>
</html>

这段代码实现了一个简单的计算器功能，用户可以输入两个数字和一个运算符，点击“Calculate”按钮后，会显示计算结果。需要注意的是，这个实现没有包括错误处理，比如输入非数字或除数为零的情况。

- 阅读更多 -

Nodejs 第二十三章（Markdown 转 html）

System

2024-08-21

所有,html

在Node.js中，你可以使用marked库将Markdown转换为HTML。首先，你需要安装marked：




npm install marked

然后，你可以使用以下代码将Markdown转换为HTML：




const marked = require('marked');
 
// 示例Markdown文本
const markdownText = `
# 标题
 
这是一个段落。
 
- 列表项一
- 列表项二
 
**粗体文本**
 
[链接](https://example.com)
`;
 
// 将Markdown转换为HTML
const html = marked.parse(markdownText);
 
console.log(html);

这段代码会输出转换后的HTML，你可以将其插入到网页中去。marked库提供了多种选项来自定义转换的行为，例如改变标题的级别或者添加CSS类。

- 阅读更多 -

网页端HTML使用MQTTJs订阅RabbitＭＱ数据

System

2024-08-21

所有,html

要在HTML页面中使用MQTT.js订阅RabbitMQ的数据，你需要首先引入MQTT.js库，并确保RabbitMQ服务器允许你的客户端连接。以下是一个简单的例子：




<!DOCTYPE html>
<html>
<head>
    <title>MQTT Subscribe Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqtt.min.js"></script>
    <script>
        var client;
 
        function connect() {
            var host = 'wss://your-rabbitmq-server:port/ws'; // 使用WebSocket连接
            client = new Paho.MQTT.Client(host, "your-client-id");
 
            var options = {
                timeout: 3,
                keepAliveInterval: 30,
                cleanSession: true,
                useSSL: true,
                userName: 'your-username', // 如果RabbitMQ配置了用户名和密码，则需要
                password: 'your-password',
                onSuccess: onConnect,
                onFailure: function (message) {
                    console.log("Connection failed: " + message.errorMessage);
                }
            };
 
            client.connect(options);
        }
 
        function onConnect() {
            console.log("Connected");
            client.subscribe('your-topic'); // 你要订阅的主题
        }
 
        function onFailure(message) {
            console.log("Failed to subscribe: " + message.errorMessage);
        }
 
        function receiveMessage() {
            client.onMessageArrived = function (message) {
                console.log("Message arrived: " + message.payloadString);
                // 处理接收到的消息
            };
        }
 
        // 页面加载完成后连接MQTT
        window.onload = function() {
            connect();
            receiveMessage();
        };
    </script>
</head>
<body>
    <h1>MQTT Subscribe Example</h1>
</body>
</html>

确保替换以下内容：

your-rabbitmq-server:port/ws：为你的RabbitMQ服务器的WebSocket端点。
your-client-id：为你的客户端ID，需要是唯一的。
your-username 和 your-password：如果RabbitMQ设置了用户名和密码，则需要这些信息。
your-topic：你要订阅的具体主题。

在实际部署时，请确保你的RabbitMQ服务器允许来自你客户端IP的WebSocket连接，并且正确配置了用户名和密码（如果有的话）。

- 阅读更多 -

第二章-在HTML中使用JavaScript

System

2024-08-21

所有,html

在HTML中使用JavaScript的基本方法是在HTML文档中添加<script>标签，并在其中写入JavaScript代码。你可以将JavaScript代码直接放在<script>标签中，或者使用src属性来引用外部的JavaScript文件。

以下是一个简单的例子，展示了如何在HTML文档中嵌入JavaScript代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <script>
        // 直接写入JavaScript代码
        function showMessage() {
            alert('你好，世界!');
        }
    </script>
</head>
<body>
 
    <!-- 使用按钮触发JavaScript中的函数 -->
    <button onclick="showMessage()">点击我</button>
 
</body>
</html>

如果你有一个外部的JavaScript文件（例如script.js），你可以通过以下方式引入它：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <script src="script.js"></script> <!-- 引用外部JavaScript文件 -->
</head>
<body>
 
    <!-- 按钮事件可以调用外部JavaScript文件中定义的函数 -->
    <button onclick="externalFunction()">点击我</button>
 
</body>
</html>

在script.js文件中，你可以定义externalFunction等函数：




// script.js
function externalFunction() {
    alert('这是一个外部JavaScript函数!');
}

请确保你的HTML文件和JavaScript文件位于同一目录中，或者提供正确的路径来引用外部JavaScript文件。

- 阅读更多 -

纯JS将HTML生成pdf

System

2024-08-21

所有,html

要在纯JavaScript中将HTML生成PDF，可以使用jsPDF库。以下是一个简单的例子，演示如何使用jsPDF库将HTML元素转换成PDF。

首先，确保在项目中包含了jsPDF库：




<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>

然后，可以使用以下JavaScript代码将特定HTML元素转换为PDF：




// 假设你要打印的HTML元素有一个id为"content"
const content = document.getElementById('content');
 
// 创建一个新的jsPDF实例
const pdf = new jspdf.jsPDF();
 
// 将HTML元素转换为Canvas
html2canvas(content).then(canvas => {
    // 将Canvas转换为图片
    const imgData = canvas.toDataURL('image/png');
    
    // 将图片添加到PDF中
    const imgProps= pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
    
    // 保存生成的PDF
    pdf.save('download.pdf');
});

确保在调用上述代码之前，页面上已经加载了html2canvas库，因为jsPDF无法直接将HTML转换为PDF，它需要通过html2canvas先将HTML转换为Canvas，然后再转换为PDF支持的格式。




<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

请注意，这个例子是一个简化的示例，实际使用时可能需要处理例如样式、跨域图片、大文件等问题。

- 阅读更多 -

在HTML中使用JavaScript实时显示当前日期和时间（结尾完整例程）

System

2024-08-21

所有,html




<!DOCTYPE html>
<html>
<head>
    <title>实时显示当前日期和时间</title>
    <script>
        function startTime() {
            const today = new Date();
            let h = today.getHours();
            let m = today.getMinutes();
            let s = today.getSeconds();
            // 为了美观，数字小于10将前面加0
            h = checkTime(h);
            m = checkTime(m);
            s = checkTime(s);
            document.getElementById('txt').innerHTML = 
            today.toDateString() + "<br>" + h + ":" + m + ":" + s;
            // 使用setTimeout函数调用startTime函数，每秒钟更新一次时间
            setTimeout(startTime, 1000);
        }
        
        function checkTime(i) {
            if (i < 10) {i = "0" + i};
            return i;
        }
    </script>
</head>
<body onload="startTime()">
    <div id="txt"></div>
</body>
</html>

这段代码使用了setTimeout函数来周期性地调用startTime函数，从而实现了时钟的更新。这个例程是一个简单的JavaScript实时时钟示例，展示了如何在网页上显示当前日期和时间，并且保持时间的实时更新。

- 阅读更多 -