分类前端技术下的文章

2024-08-14

在CSS中，可以使用-webkit-line-clamp属性配合display: -webkit-box和-webkit-box-orient: vertical来实现多行文本的展开和收起功能。以下是实现这一功能的基本样式和HTML结构：

CSS样式：




.text-collapse {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 定义文本的最大行数 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  max-height: 4.5em; /* 行高*最大行数，根据实际行高调整 */
  line-height: 1.5em; /* 根据实际行高调整 */
  cursor: pointer;
  /* 可以添加更多样式，如颜色、字体等 */
}
 
.text-collapse-hidden {
  max-height: 4.5em; /* 根据实际行高调整 */
}

HTML结构：




<div class="text-collapse" id="textCollapse">
  这里是一段很长的文本内容，可能有很多行。这里是一段很长的文本内容，可能有很多行。
  这里是一段很长的文本内容，可能有很多行。这里是一段很长的文本内容，可能有很多行。
</div>
<button onclick="toggleText()">展开/收起</button>

JavaScript代码：




function toggleText() {
  var textCollapse = document.getElementById('textCollapse');
  textCollapse.classList.toggle('text-collapse-hidden');
}

在这个例子中，-webkit-line-clamp设置为3，意味着文本最多只会显示3行。当用户点击按钮时，通过JavaScript来切换.text-collapse-hidden类，从而改变元素的max-height属性，实现展开或收起的效果。如果需要在移除text-collapse-hidden类时恢复为收起状态，可以在CSS中将.text-collapse-hidden的max-height设置为与-webkit-line-clamp对应的最大高度。

- 阅读更多 -

Bootstrap响应式框架表格表单

System

2024-08-14

所有,jquery




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Responsive Table Form</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <form>
            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" class="form-control" id="name" placeholder="Enter name">
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
        <table class="table table-bordered table-responsive">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <!-- 动态数据行 -->
            </tbody>
        </table>
    </div>
    <!-- 引入Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

这个代码实例展示了如何创建一个基本的Bootstrap响应式框架，其中包括一个用于数据输入的表单和一个用于展示数据的响应式表格。表单中有两个输入字段（Name 和 Email），以及一个提交按钮。表格包括三列（Name, Email, 和 Action），以及一个用于插入动态数据的 tbody 区域。这个例子简洁明了，并且使用了Bootstrap的CSS和JS库来增强响应式布局和用户界面的现代感。

- 阅读更多 -

【HTML】超链接标签的使用

System

2024-08-14

所有,html

在HTML中，超链接是通过<a>标签来创建的。<a>标签的基本语法如下：




<a href="链接地址" target="目标窗口的位置" title="鼠标悬停时显示的文本">链接文本或图像</a>

href属性指定链接的目标地址，可以是相对路径或绝对路径。
target属性定义链接打开的位置，_blank表示在新窗口中打开，_self表示在当前窗口中打开（默认行为）。
title属性提供了鼠标悬停在链接上时显示的文本。

下面是一个超链接的例子：




<a href="https://www.example.com" target="_blank" title="访问示例网站">访问示例网站</a>

这段代码创建了一个指向https://www.example.com的超链接，当用户点击这个链接时，它会在新窗口或标签页中打开。当鼠标悬停在链接上时，会显示“访问示例网站”这段文本。

- 阅读更多 -

JS使用dijkstra算法实现查找最短路径

System

2024-08-14

所有,javascript




function dijkstra(graph, start, finish) {
    const distances = {};
    const previous = {};
    const visited = new Set();
    const nodes = Object.keys(graph);
 
    // 初始化距离和前驱节点
    for (let node of nodes) {
        distances[node] = Infinity;
        previous[node] = null;
    }
    distances[start] = 0;
 
    // 循环直到找到最短路径
    while (nodes.length) {
        let currentNode = findClosestNode(nodes, distances, visited);
        if (currentNode === finish) break; // 找到最短路径
        visited.add(currentNode);
 
        // 更新当前节点的邻居节点的距离
        for (let neighbor in graph[currentNode]) {
            if (visited.has(neighbor)) continue;
            let newDistance = distances[currentNode] + graph[currentNode][neighbor];
            if (newDistance < distances[neighbor]) {
                distances[neighbor] = newDistance;
                previous[neighbor] = currentNode;
            }
        }
    }
 
    // 构建最短路径
    const buildPath = (prev, node) => {
        if (prev[node] && prev[node] !== start) {
            return buildPath(prev, prev[node]) + '->' + node;
        } else {
            return node;
        }
    };
 
    return {
        distances: distances,
        path: buildPath(previous, finish)
    };
}
 
// 测试用例
const graph = {
    'start': {'a': 6, 'b': 2},
    'a': {'finish': 1},
    'b': {'a': 3, 'finish': 5},
    'finish': {}
};
 
const shortestPath = dijkstra(graph, 'start', 'finish');
console.log(shortestPath.distances);
console.log('Shortest Path:', shortestPath.path);

这段代码实现了Dijkstra算法，用于找到加权图中两个节点之间的最短路径。它首先初始化距离和前驱节点，然后通过循环找到最短路径，并构建最短路径的路径字符串。

- 阅读更多 -

jquery 判断是手机端还是电脑端

System

2024-08-14

所有,jquery

您可以使用jQuery的$.browser方法来判断用户设备是手机还是电脑端。但是，从jQuery 1.9版本开始，$.browser已经被移除。因此，您可以使用$.support或者用户代理字符串(User Agent String)来判断。

以下是一个示例代码，用于判断设备是手机还是电脑：




$(document).ready(function() {
    var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 
    if (isMobile) {
        // 手机端
        console.log("Mobile Device");
    } else {
        // 电脑端
        console.log("Desktop Device");
    }
});

这段代码通过正则表达式检查navigator.userAgent字符串，以判断是否是常见的移动设备用户代理之一。如果是，则判断为移动设备（手机端）；否则，为电脑端。

- 阅读更多 -

el-input限制只能输入数字，且保留2位小数

System

2024-08-14

所有,vue.js

在Vue.js中使用Element UI库的el-input组件时，可以通过添加@input事件监听器来限制只能输入数字，并且保留两位小数。以下是一个简单的例子：




<template>
  <el-input v-model="inputValue" @input="handleInput"></el-input>
</template>
 
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(value) {
      // 使用正则表达式来限制只能输入数字和小数点
      const regex = /^(\d+)?(\.\d{1,2})?$/;
      // 如果输入值不符合规定的正则表达式，则将其设置为上一个合法的值
      if (!regex.test(value)) {
        this.inputValue = this.inputValue.replace(/[^\d.]/g, '')
                                         .replace(/^\./g, '')
                                         .replace(/\.{2,}/g, '.')
                                         .replace('.', '$#$')
                                         .replace(/\./g, '')
                                         .replace('$#$', '.')
                                         .substr(0, value.indexOf('.') + 3);
      }
    }
  }
};
</script>

这段代码中，handleInput方法会在每次输入时被触发。使用正则表达式/^(\d+)?(\.\d{1,2})?$/来判断输入值是否符合要求：

^ 表示字符串的开始
(\d+)? 表示一个或多个数字，可有可无
(\.\d{1,2})? 表示一个点后面跟着一个或两个数字，点本身也是可有可无的
$ 表示字符串的结束

如果输入值不符合这个模式，它会被一系列的替换操作重置为合法的值。这些替换操作包括：

移除所有非数字和小数点的字符
移除开头的小数点
移除多余的小数点
添加必要的小数点

最后，通过截取字符串的前value.indexOf('.') + 3位来确保保留两位小数。如果用户输入的是整数，则只保留前两位整数。

System

2024-08-14

所有,npm

报错解释：

这个错误表明在使用PowerShell升级pnpm（一种包管理器）时，PowerShell无法找到全局的二进制文件目录。pnpm通常会将其可执行文件安装到全局目录中，以便可以从任何地方调用它们。

解决方法：

确认pnpm是否已正确安装。可以通过运行Get-Command pnpm来检查。
如果pnpm未安装，请运行npm install -g pnpm来全局安装pnpm。
如果pnpm已安装但找不到，可能是环境变量设置不正确。检查环境变量，确保包含pnpm的全局安装目录。
重新打开一个新的PowerShell窗口，以便让新的环境变量设置生效。
如果以上步骤无效，可能需要重新安装pnpm，并确保安装过程中没有错误。

请注意，如果你使用的是特定的环境（如虚拟环境或容器），确保在该环境中pnpm已正确安装和配置。

System

2024-08-14

所有,npm

报错解释：

这个错误表明你在使用npm（Node Package Manager）时遇到了SSL证书过期的问题。当npm尝试通过HTTPS连接到一个软件包的仓库时，如果证书已经过期，会出现这个错误。

解决方法：

更新npm到最新版本：
```
npm install -g npm@latest
```
如果问题依旧存在，可能是因为系统时间不正确导致的。请确保你的系统时间是正确的。
如果你在使用淘宝镜像，可能是淘宝npm镜像的证书确实已经过期。你可以尝试切换回官方npm源：
```
npm config set registry https://registry.npmjs.org/
```
如果你无法切换回官方源，可以考虑更新淘宝npm镜像的证书。
如果以上方法都不能解决问题，可能需要进一步检查网络配置或系统代理设置，确保npm能够正确地通过HTTPS连接到外部资源。

System

2024-08-14

所有,npm

报错信息 npm install -g @vue-cli pm ERR! code EINVALIDTAGNAME 表示在全局安装 Vue 脚手架时，npm 遇到了无效的标签名称错误（EINVALIDTAGNAME）。

解决方法：

检查命令是否正确：确保你输入的命令正确，应该是 npm install -g @vue/cli 而不是 npm install -g @vue-cli pm。
清除 npm 缓存：运行 npm cache clean --force 清除缓存，然后再尝试安装。
确保 npm 版本是最新的：运行 npm install -g npm 来更新 npm 到最新版本。
使用 yarn 安装：如果 npm 仍然有问题，可以尝试使用 yarn 来全局安装 Vue CLI，运行 yarn global add @vue/cli。

如果以上步骤仍然无法解决问题，请检查 npm 配置文件（通常位于用户目录下的 .npmrc 文件），确认是否有不正确的配置项，并根据实际情况进行修改。

System

2024-08-14

所有,npm

报错解释：

这个错误通常表示npm在尝试创建一个目录时遇到了操作系统级的权限错误。EPERM错误代码表示当前用户没有足够的权限去执行这个操作。

解决方法：

确认你是否有足够的权限去修改指定的文件夹。如果你在Windows上，可能需要以管理员身份运行命令提示符或PowerShell。
检查是否有其他程序正在使用该文件或目录，如果有，关闭那些程序。
清理npm缓存。可以使用命令npm cache clean --force。
删除node\_modules文件夹和package-lock.json文件，然后重新运行npm install。
如果上述方法都不行，尝试重启计算机，然后再次运行npm install。

请注意，解决方案的有效性可能会根据具体的操作系统、文件路径、所使用的npm版本以及其他环境因素而变化。

- 阅读更多 -