分类前端技术下的文章

2024-08-13

所有,npm

报错代码 code: 128 通常表示 npm 在执行安装过程中遇到了错误，并且这个错误是由于接收到了一个不是 npm 预期的信号导致的。这种情况可能是因为外部因素如操作系统信号或者是 npm 进程被非正常方式终止。

解决方法：

清理缓存：运行 npm cache clean --force 清理 npm 缓存，然后重试安装命令。
检查磁盘空间：确保你的磁盘空间充足，因为不足的磁盘空间可能导致 npm 安装失败。
更新 npm 和 Node.js：确保你的 npm 和 Node.js 版本是最新的，可以使用 npm update -g npm 和对应的方法更新 Node.js。
检查权限问题：确保你有足够的权限来创建和修改 npm 所需的文件和目录。
查看 npm 日志：npm 可能会在错误信息中提供更多的上下文信息，检查 npm 日志可能会有所帮助。
重新安装 Node.js 和 npm：如果上述方法都不能解决问题，尝试卸载 Node.js 和 npm，然后重新下载最新版本进行安装。

如果问题依然存在，请提供更详细的错误输出信息以便进一步诊断问题。

2024-08-13

所有,npm

报错解释：

这个错误表示npm在尝试通过HTTPS连接到一个资源时，遇到了SSL证书已经过期的问题。这通常意味着你的计算机上的日期和时间设置不正确，或者是npm所信任的证书颁发机构（CA）的问题。

解决方法：

检查计算机的日期和时间设置，确保它们是正确的。如果不正确，请将它们更新到当前的日期和时间。
如果你是在公司网络环境下，可能是因为中间代理服务器或者公司网络拦截了HTTPS请求，导致证书验证失败。你可以尝试配置npm以使用不同的代理或者直接禁用代理设置：
```
npm config set proxy null
```
更新本地的CA证书。有时候，即使系统日期正确，本地的CA证书库也可能过期。你可以通过更新操作系统或者npm的CA证书来解决这个问题。
如果你正在使用代理服务器，确保代理服务器的SSL证书是有效的。
作为最后的手段，你可以尝试设置npm不去验证SSL证书的有效性，但这不推荐，因为它会降低你的网络安全性：
```
npm config set strict-ssl false
```

请根据你的具体环境选择合适的解决方法。

npm i axios 安装失败及解决办法

2024-08-13

所有,npm

报错原因可能有：

网络问题：无法连接到npm仓库。
npm版本问题：npm版本太旧，不支持某些功能。
包本身的问题：axios包可能有问题，或者与其他包有冲突。

解决办法：

检查网络连接，确保可以访问npm仓库。
更新npm版本：npm install -g npm@latest
清除npm缓存：npm cache clean --force
尝试使用不同的网络，比如使用代理或者更换网络环境。
如果以上方法都不行，可以尝试使用cnpm（淘宝的npm镜像）来安装axios：npm install -g cnpm --registry=https://registry.npm.taobao.org 然后使用cnpm install axios来安装。

如果问题依然存在，请提供更详细的错误信息以便进一步分析解决。

原生 html 绘制表格

2024-08-13

要在原生HTML中绘制一个表格，你可以使用<table>, <tr>, <th>, 和 <td>元素。以下是一个简单的例子：




<!DOCTYPE html>
<html>
<head>
    <title>简单表格</title>
</head>
<body>
 
<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>28</td>
        <td>软件工程师</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>25</td>
        <td>产品经理</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>32</td>
        <td>项目经理</td>
    </tr>
</table>
 
</body>
</html>

这段代码会创建一个有3列和3行（包括表头）的表格，并且每个单元格都有边框。你可以根据需要添加更多的行和列。

编程笔记 html5&css&js 038 CSS背景

2024-08-13

在HTML和CSS中，可以使用背景图像、颜色或渐变来装饰网页。以下是一些示例：

使用背景颜色：

HTML:




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="background-color"></div>
</body>
</html>

CSS (styles.css):




.background-color {
    width: 100%;
    height: 100vh;
    background-color: #ff0000; /* 红色背景 */
}

使用背景图像：

HTML:




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="background-image"></div>
</body>
</html>

CSS (styles.css):




.background-image {
    width: 100%;
    height: 100vh;
    background-image: url('background.jpg'); /* 替换为你的图片路径 */
    background-size: cover;
}

使用背景渐变：

HTML:




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="background-gradient"></div>
</body>
</html>

CSS (styles.css):




.background-gradient {
    width: 100%;
    height: 100vh;
    background: linear-gradient(to right, #ff0000, #00ff00); /* 从左到右的红到绿渐变 */
}

以上代码示例展示了如何在HTML元素上设置背景样式。在实际应用中，可以根据需要选择使用背景颜色、图像或渐变。

2024-08-13

在JavaScript中，Number类型用于表示数字值。JavaScript Number 类型的值可以是整数或者浮点数，并且可以用科学计数法表示。

以下是一些操作JavaScript Number数据类型的示例代码：

创建一个Number类型的变量并赋值：




let num = 10; // 整数
let floatNum = 10.5; // 浮点数
let bigNum = 99999999999999; // 大数字

使用Number对象创建数字：




let numObj = new Number(10);

使用Number函数将其他数据类型转换为数字：




let stringToNum = Number("123"); // 123
let boolToNum = Number(true); // 1
let objectToNum = Number({}); // NaN

使用特殊的Number值：




let infinity = Number.POSITIVE_INFINITY; // 正无穷大
let negInfinity = Number.NEGATIVE_INFINITY; // 负无穷大
let nan = Number.NaN; // 非数字

使用Number对象的方法：




let num = 10;
let stringNum = num.toString(); // "10"
let numToFixed = num.toFixed(2); // "10.00"
let numToPrecision = num.toPrecision(2); // "1e+01"

使用Number的静态方法：




let stringToNum = Number.parseInt("123abc"); // 123
let floatToNum = Number.parseFloat("123.45abc"); // 123.45

使用Number的比较方法：




let num1 = 10;
let num2 = 20;
let maxNum = Math.max(num1, num2); // 20
let minNum = Math.min(num1, num2); // 10

以上代码展示了如何在JavaScript中使用Number类型的基本操作。

跳过CSDN关注博主即可阅读全文的脚本

2024-08-13

CSDN通常会在文章的开头部分提供一个“为了更好的阅读体验，请关注博主”的提示，这通常是通过JavaScript实现的。如果你想要跳过这个提示，并直接允许用户阅读全文，可以通过以下方法：

使用浏览器的开发者工具（如Chrome浏览器的开发者工具）。
找到触发这个提示的JavaScript代码。
修改或者删除这段代码。

由于具体实现可能会随着CSDN的更新而变化，这里提供一个通用的方法，但不保证在所有情况下都有效：




// 在浏览器的控制台中运行以下代码
document.querySelector('.article-bar').style.display = 'none'; // 隐藏关注提示栏
document.querySelector('.article-content').style.marginTop = '0'; // 移除上面的空白

请注意，这种做法违反了CSDN的使用协议，可能会影响你的账号权益，因此不建议在不清楚后果的情况下使用。同时，如果CSDN更新了页面结构，这段代码可能会失效。如果你只是临时阅读文章，最好的方式是关注相应的博主。

hls.js 视频播放框架释放内存

2024-08-13

hls.js 是一个基于 HTML5 的视频流技术，用于自动切换不同的码率视频流，以适应不同的网络条件。在使用 hls.js 播放视频时，确保释放内存是非常重要的，以下是一些可以用来释放内存的方法：

当你不再需要播放视频时，调用 hls.destroy() 方法来停止视频加载和释放所有的资源。




if (hls) {
  hls.destroy();
  hls = null;
}

如果你的应用程序需要频繁切换视频源，请考虑使用 hls.detachMedia() 方法来断开 hls.js 与 <video> 元素的连接，然后再调用 hls.destroy()。




if (hls) {
  hls.detachMedia();
  hls.destroy();
  hls = null;
}

确保在视频元素上删除所有的事件监听器，以避免内存泄漏。




videoElement.removeEventListener('play', playHandler);
videoElement.removeEventListener('pause', pauseHandler);
// 其他事件监听器...

如果你在使用浏览器的自动化测试或者在一个循环中播放多个视频，确保在播放下一个视频之前释放当前的视频资源。

总结，要释放 hls.js 占用的内存，你需要做的是：

调用 hls.destroy() 方法来停止视频加载和释放所有的资源。
如果可能，断开 hls.js 与 <video> 元素的连接，然后再销毁。
移除视频元素上的所有事件监听器。

这样做可以最大程度地减少内存占用，确保在不需要播放视频时释放相关资源。

uni-app H5使用flv.js直播拉流

2024-08-13

要在uni-app中使用flv.js进行H5直播拉流，你需要按照以下步骤操作：

在项目中引入flv.js。
创建一个video元素来展示视频流。
使用flv.js创建一个MediaDataSource实例来接收视频流。
将MediaDataSource实例绑定到video元素上。

以下是具体的实现代码：

首先，在项目中安装flv.js：




npm install flv.js --save

然后，在你的页面的<script>部分，编写代码来初始化flv.js并播放视频流：




// 引入flv.js
import flvjs from 'flv.js';
 
export default {
  data() {
    return {
      player: null,
    };
  },
  mounted() {
    this.createPlayer();
  },
  methods: {
    createPlayer() {
      if (flvjs.isSupported()) {
        const videoElement = this.$refs.videoElement;
        this.player = flvjs.createPlayer({
          type: 'media',
          url: '你的flv流地址',
        });
        this.player.attachMediaElement(videoElement);
        this.player.load();
        this.player.play();
      }
    },
    destroyPlayer() {
      if (this.player) {
        this.player.pause();
        this.player.unload();
        this.player.detachMediaElement();
        this.player.destroy();
        this.player = null;
      }
    }
  },
  beforeDestroy() {
    this.destroyPlayer();
  }
};

在你的页面的<template>部分，添加video元素：




<template>
  <view>
    <video ref="videoElement" controls autoplay width="100%" height="auto"></video>
  </view>
</template>

确保你的flv流地址是可以正确访问的。这样就可以在H5中使用flv.js来进行直播拉流了。

HTML5 WEB 存储

2024-08-13

在HTML5中，Web Storage提供了两种在客户端存储数据的新方法：localStorage和sessionStorage。

localStorage

localStorage是HTML5新增的一个在本地保存数据的功能，用于长久保存整个网站的数据，保存的数据没有时间限制。可以手动删除数据。




<!DOCTYPE html>
<html>
<body>
 
<h2>Local Storage</h2>
 
<p>Click the button to set a local storage item.</p>
 
<button onclick="setLocalStorage()">Set Local Storage Item</button>
 
<button onclick="getLocalStorage()">Get Local Storage Item</button>
 
<button onclick="removeLocalStorage()">Remove Local Storage Item</button>
 
<button onclick="clearLocalStorage()">Clear Local Storage</button>
 
<p id="demo"></p>
 
<script>
function setLocalStorage() {
    localStorage.setItem("key", "value");
}
 
function getLocalStorage() {
    var value = localStorage.getItem("key");
    document.getElementById("demo").innerHTML = value;
}
 
function removeLocalStorage() {
    localStorage.removeItem("key");
}
 
function clearLocalStorage() {
    localStorage.clear();
}
</script>
 
</body>
</html>

sessionStorage

sessionStorage也是HTML5新增的一个在本地保存数据的功能，但是它和localStorage不同，它只是在当前会话中保存数据，关闭页面就会消失。




<!DOCTYPE html>
<html>
<body>
 
<h2>Session Storage</h2>
 
<p>Click the button to set a session storage item.</p>
 
<button onclick="setSessionStorage()">Set Session Storage Item</button>
 
<button onclick="getSessionStorage()">Get Session Storage Item</button>
 
<button onclick="removeSessionStorage()">Remove Session Storage Item</button>
 
<button onclick="clearSessionStorage()">Clear Session Storage</button>
 
<p id="demo"></p>
 
<script>
function setSessionStorage() {
    sessionStorage.setItem("key", "value");
}
 
function getSessionStorage() {
    var value = sessionStorage.getItem("key");
    document.getElementById("demo").innerHTML = value;
}
 
function removeSessionStorage() {
    sessionStorage.removeItem("key");
}
 
function clearSessionStorage() {
    sessionStorage.clear();
}
</script>
 
</body>
</html>

以上代码展示了如何使用localStorage和sessionStorage进行数据的存储、读取、删除和清除。

注意：localStorage和sessionStorage中存储的数据都是以字符串的形式进行存储的，如果要存储对象，需要使用JSON.stringify()将对象转换为字符串，读取时使用JSON.parse()将字符串转换回对象。