分类前端技术下的文章

2024-08-09

Node.js 的 os 模块是一个内置模块，提供了一些操作系统相关的信息和工具。

以下是一些使用 os 模块的方法：

获取系统信息：




const os = require('os');
 
console.log('主机名: ' + os.hostname());
console.log('平台: ' + os.platform());
console.log('操作系统: ' + os.type());
console.log('CPU 架构: ' + os.arch());
console.log('发行版: ' + os.release());

获取内存信息：




const os = require('os');
 
console.log('总内存: ' + os.totalmem() + ' bytes');
console.log('可用内存: ' + os.freemem() + ' bytes');

获取CPU信息：




const os = require('os');
 
console.log('CPU 信息: ' + os.cpus());

获取网络接口信息：




const os = require('os');
 
console.log('网络接口: ' + os.networkInterfaces());

获取用户信息：




const os = require('os');
 
console.log('用户信息: ' + os.userInfo());

以上代码都是在 Node.js 环境中运行的，可以直接打开命令行工具（如：cmd，Terminal等），输入 node 命令，并输入上述代码，按下 Ctrl+D 或者输入 .exit 来退出 Node.js 环境。

- 阅读更多 -

如何使用vscode创建Node.js服务并结合内网穿透实现远程访问本地服务

System

2024-08-09

所有,nodejs

要在VSCode中创建Node.js服务并结合内网穿透实现远程访问本地服务，你可以按照以下步骤操作：

安装Node.js和VSCode。
创建一个简单的Node.js HTTP服务器。
使用内网穿透工具，如ngrok或natapp，将本地服务器暴露到公网。

以下是创建Node.js HTTP服务器的示例代码：




// server.js
const http = require('http');
 
const host = '127.0.0.1';
const port = 3000;
 
const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});
 
server.listen(port, host, () => {
  console.log(`Server running at http://${host}:${port}/`);
});

运行服务：




node server.js

接下来，你需要选择一个内网穿透工具并按照其说明进行操作。例如，使用ngrok：

前往 ngrok官网并注册账户，下载并解压ngrok。
运行ngrok并获取一个公网地址：




./ngrok http 3000

ngrok会输出你的公网地址，例如http://randomsubdomain.ngrok.io，你可以使用这个地址从远程机器访问你的本地服务器。

完成这些步骤后，你就可以使用任何远程设备通过获取的公网地址访问你的本地Node.js服务了。

- 阅读更多 -

关于HTML、CSS和JS如何变成页面

System

2024-08-09

所有,html

HTML、CSS和JS组合起来可以创建一个完整的网页。

HTML (Hypertext Markup Language) 负责定义网页的结构。

CSS (Cascading Style Sheets) 负责定义网页的样式，即外观。

JS (JavaScript) 负责定义网页的行为，即交互。

以下是一个简单的HTML页面示例，它包含了基本的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>My First Page</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: #35495e;
            color: #ffffff;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
 
<div class="header">
    <h1>Welcome to My Page</h1>
</div>
 
<p>This is a paragraph.</p>
 
<script>
    // JavaScript code here
    function showMessage() {
        alert('Hello, World!');
    }
    showMessage();
</script>
 
</body>
</html>

在这个例子中，HTML定义了页面的结构，CSS定义了页面的样式，而JavaScript通过showMessage函数弹出一个警告框，展示了页面的交互行为。

- 阅读更多 -

HTML的浮动效果－清除浮动

System

2024-08-09

所有,html

在HTML中，如果使用了浮动（float），可能会导致父元素的高度塌陷问题，这是因为浮动的元素不再占据文档流中的空间。为了清除浮动影响，可以使用几种方法：

使用额外的标签，并为其应用 clear 属性。
使用伪元素 ::after 清除浮动。

以下是使用伪元素 ::after 清除浮动的示例代码：




<!DOCTYPE html>
<html>
<head>
<style>
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>
 
<div class="clearfix" style="background-color: #e0e0e0;">
  <div style="float: left;">左侧内容</div>
  <div style="float: right;">右侧内容</div>
</div>
 
<p>以下内容不会被浮动元素影响：</p>
<p>这是一些文本内容...</p>
 
</body>
</html>

在这个例子中，.clearfix 类被添加到父元素上，并且 ::after 伪元素被用来清除浮动。这样父元素就能够包含浮动的子元素，并正确地显示其高度。

- 阅读更多 -

html中插入背景图片

System

2024-08-09

所有,html

在HTML中插入背景图片，可以使用以下两种主要方法：

使用内联样式（inline style）直接在HTML标签中设置背景图片。
使用CSS样式表来设置背景图片。

方法1：内联样式




<div style="background-image: url('background.jpg');">
    <!-- 内容 -->
</div>

方法2：CSS样式表

首先，在<head>标签中或一个外部样式表文件中定义CSS规则：




<style>
    body {
        background-image: url('background.jpg');
        background-size: cover; /* 背景图片覆盖整个容器 */
        background-repeat: no-repeat; /* 背景图片不重复 */
    }
</style>

然后，在HTML的<body>标签中应用这个样式：




<body>
    <!-- 内容 -->
</body>

确保background.jpg是你的图片文件名，并且该图片位于HTML文件相同的目录中，或者是一个可访问的URL。如果你想要设置背景图片只在特定的元素中显示，可以将CSS选择器从body更改为对应的元素选择器。

- 阅读更多 -

[前端开发] HTML CSS JavaScript 深入学习 - 防抖和节流

System

2024-08-09

所有,html

防抖和节流是优化函数执行频率的两种技巧，用以改善用户体验。

防抖（Debounce）: 指触发事件后，在指定的时间内，若再次触发事件，则重新计时。直到指定时间内没有再次触发事件时，事件处理函数才会执行一次。




function debounce(fn, wait) {
    let timeout = null;
    return function() {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        let callNow = !timeout;
        timeout = setTimeout(() => {
            timeout = null;
        }, wait);
        if (callNow) fn.apply(context, args);
    };
}
 
// 使用
let myEfficientFn = debounce(function() {
    // 实际处理函数内容
    console.log('Debounced!');
}, 250);
 
window.addEventListener('resize', myEfficientFn);

节流（Throttle）: 指连续触发事件时，保证一定时间段内只执行一次事件处理函数。




function throttle(fn, wait) {
    let previous = 0;
    return function() {
        let context = this;
        let args = arguments;
        let now = new Date();
        if (now - previous > wait) {
            fn.apply(context, args);
            previous = now;
        }
    };
}
 
// 使用
let myEfficientFn = throttle(function() {
    // 实际处理函数内容
    console.log('Throttled!');
}, 250);
 
window.addEventListener('resize', myEfficientFn);

防抖和节流可以用于输入框的输入事件（如 keyup、mousemove），窗口的大小调整事件（resize），以及任何需要优化性能的事件处理中。

- 阅读更多 -

html canvas怎么在图片上面加文字

System

2024-08-09

所有,html

在HTML canvas上添加文字可以通过以下步骤完成：

首先，创建一个canvas元素并设定尺寸。
然后，使用JavaScript获取canvas的2D上下文。
使用fillText()方法在canvas上绘制文本。

以下是一个简单的示例代码：




<!DOCTYPE html>
<html>
<body>
 
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
 
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
 
// 加载图片
var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0); // 绘制图片
    ctx.font = "16px Arial"; // 设置字体
    ctx.fillStyle = "white"; // 设置字体颜色
    ctx.fillText("在图片上的文字", 10, 50); // 在图片上添加文字
};
img.src = 'path_to_your_image.jpg'; // 替换为你的图片路径
</script>
 
</body>
</html>

确保替换img.src中的'path_to_your_image.jpg'为你的图片路径。fillText()的第一个参数是你想要添加的文本，第二个和第三个参数分别是文本的x和y坐标，这些坐标指定了文本的起始位置。

- 阅读更多 -

基于 HTML+ECharts 实现智慧安防数据可视化大屏

System

2024-08-09

所有,html

以下是一个基于HTML和ECharts实现的智慧安防数据可视化大屏的简化示例代码：




<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('container'));
 
        var option = {
            // 此处填入ECharts配置项
        };
 
        myChart.setOption(option);
 
        // 自适应窗口大小
        window.onresize = function() {
            myChart.resize();
        };
    </script>
</body>
</html>

在这个示例中，我们创建了一个简单的HTML页面，其中包含了一个用于渲染ECharts图表的div元素。我们通过echarts.init方法初始化ECharts实例，并通过setOption方法设置图表配置项。最后，我们添加了一个窗口大小变化的监听器，以确保图表可以响应窗口大小的变化。

请注意，实际的ECharts配置项需要根据实际的数据和可视化需求来设置。这个示例仅展示了如何创建基础的ECharts图表容器和基本的ECharts初始化代码。

System

2024-08-09

所有,css3

在Vue中，您可以使用v-if或v-show来动态添加或删除DOM元素，并利用CSS3的animation属性来实现字体上升并渐变消失的效果。以下是一个简单的示例：




<template>
  <div id="app">
    <button @click="show = !show">Toggle Animation</button>
    <transition name="fade-up">
      <div v-if="show" class="animated-text">Hello World!</div>
    </transition>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      show: true
    };
  }
};
</script>
 
<style>
.animated-text {
  animation: up-and-fade 3s infinite;
}
 
@keyframes up-and-fade {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px);
  }
}
 
.fade-up-enter-active, .fade-up-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}
 
.fade-up-enter, .fade-up-leave-to /* .fade-up-leave-active for <2.1.8 */ {
  opacity: 0;
  transform: translateY(20px);
}
</style>

在这个示例中，我们定义了一个animated-text类，它使用CSS3的animation属性来创建上升并渐变消失的动画效果。通过Vue的<transition>组件包裹动态内容，可以在元素显示与隐藏时应用相应的过渡效果。通过改变show数据属性的值，可以控制文本的显示和隐藏。

- 阅读更多 -

CSS选择器优先级，及权重计算规则

System

2024-08-09

所有,css3

CSS选择器的优先级是由选择器的组成部分确定的，主要有四个层次：元素标签、类选择器、ID选择器和内联样式。权重是根据这四个层次的不同类型进行计算的。

计算规则如下：

对于每个选择器，统计其中的id选择器的数量。
统计其中的其他选择器（包括类选择器、属性选择器等）的数量。
如果选择器中包含了!important规则，则其权重会被提高到最高。
最后计算内联样式，它的权重最高，为1000。

权重的计算方法是：将所有的id选择器的数量按照10的幂进行计算（每多一个id选择器，就乘以10），然后将其他选择器的数量相加。最后，将内联样式的1000添加到最终结果中。

例如，考虑以下选择器：




p#content .list-item span

这个选择器包含一个id选择器(#content)，一个类选择器(.list-item)和一个元素标签(span)，没有使用!important。计算其权重如下：

计算id选择器的数量：1
计算其他选择器的数量：1（类选择器）+ 1（元素标签）= 2
内联样式的权重不考虑，因为这个选择器不是内联样式。
最终权重计算为：100 + 2 = 102

如果另一个选择器是：




div#content .list-item span

这个选择器也是包含一个id选择器，一个类选择器和一个元素标签，但是因为id选择器更具体，所以它的权重会更高：100 + 10 + 2 = 112。

如果使用!important，则其优先级会高于所有其他规则，例如：




p#content .list-item span { color: red !important; }

这条规则即使计算出的权重很高，也会被!important所覆盖，使得它具有最高的优先级。

- 阅读更多 -