1. 首页
  2. 标签
  3. Javascript
前端JS特效第29波：jQuery鼠标经过星星显示特效
System
2024-08-12
所有,jquery

以下是实现鼠标悬停在星星上时显示提示信息的简单示例代码：

HTML部分：




<div class="rating">
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
</div>
<div class="tooltip">提示信息</div>

CSS部分：




.rating {
  position: relative;
}
 
.tooltip {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px;
  border-radius: 4px;
  background-color: #f9f9f9;
  color: #000;
  font-size: 12px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
 
.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #f9f9f9 transparent;
}

jQuery部分：




$(document).ready(function() {
  $('.star').hover(function() {
    var rating = $(this).index() + 1;
    $('.tooltip').text('您的评分：' + rating).css({
      visibility: 'visible',
      opacity: 1
    });
  }, function() {
    $('.tooltip').css({
      visibility: 'hidden',
      opacity: 0
    });
  });
});

确保在你的HTML文件中引入了jQuery库，并且在你的HTML文件中引入了上述CSS和jQuery代码。这个例子中，鼠标悬停在星星上时，会显示一个提示框，提示用户的评分等级。

- 阅读更多 -
NET餐厅管理系统前端js-dwz.checkbox
System
2024-08-12
所有,jquery

在.NET餐厅管理系统前端中，使用js-dwz.checkbox可以帮助你处理复选框的相关操作。以下是一个简单的示例，展示了如何使用js-dwz.checkbox来全选或反选一组复选框：




<!DOCTYPE html>
<html>
<head>
    <title>餐厅管理系统前端示例</title>
    <script type="text/javascript" src="path/to/js-dwz.checkbox.js"></script>
    <script type="text/javascript">
        function selectAll(checked) {
            // 遍历所有复选框，并设置其状态
            var checkboxes = DWZ.checkbox.getAll("checkbox-name");
            for (var i = 0; i < checkboxes.length; i++) {
                checkboxes[i].checked = checked;
            }
        }
    </script>
</head>
<body>
    <form action="">
        <input type="checkbox" name="selectAll" onclick="selectAll(this.checked)" /> 全选<br/>
        <!-- 这里生成多个复选框 -->
        <input type="checkbox" class="checkbox-name" value="1" /> 
        <input type="checkbox" class="checkbox-name" value="2" /> 
        <input type="checkbox" class="checkbox-name" value="3" /> 
        <!-- ... 更多复选框 ... -->
    </form>
</body>
</html>

在这个示例中，我们定义了一个名为selectAll的函数，该函数会在全选复选框被点击时被调用。函数通过DWZ.checkbox.getAll获取所有具有相同name的复选框，并将它们的选中状态设置为全选复选框的状态。这是一个简单的实现，可以根据实际需求进行扩展和优化。

- 阅读更多 -
jQuery在js里动态修改样式和hover()方法 (入门)
System
2024-08-12
所有,jquery



$(document).ready(function() {
    // 动态修改样式
    $('p').css('color', 'blue');
 
    // hover事件绑定
    $('div').hover(
        function() {
            // 鼠标悬停时的样式
            $(this).css('background-color', 'yellow');
        },
        function() {
            // 鼠标离开时的样式
            $(this).css('background-color', 'green');
        }
    );
});

这段代码首先等待DOM完全加载（使用$(document).ready()），然后选中所有的p元素，将它们的文字颜色设置为蓝色。接着选中所有的div元素，并使用hover方法来绑定鼠标的悬停（mouseenter）和离开（mouseleave）事件。悬停时背景色变为黄色，离开时背景色变为绿色。这是jQuery的基础用法，适合初学者学习。

- 阅读更多 -
JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法
System
2024-08-12
所有,jquery

在jQuery中，你可以使用.prev()方法来获取当前元素的上一个兄弟元素，使用.next()方法来获取当前元素的下一个兄弟元素。如果你想获取匹配特定选择器的上一个或下一个兄弟元素，可以将选择器作为参数传递给.prev()和.next()方法。

以下是一些示例代码：




// 获取当前元素的上一个兄弟元素
var prevElement = $('#currentElement').prev();
 
// 获取当前元素的下一个兄弟元素
var nextElement = $('#currentElement').next();
 
// 获取当前元素的上一个匹配选择器的兄弟元素
var prevMatchedElement = $('#currentElement').prev('.selector');
 
// 获取当前元素的下一个匹配选择器的兄弟元素
var nextMatchedElement = $('#currentElement').next('.selector');

在原生JavaScript中，你可以使用previousElementSibling属性来获取上一个兄弟元素，使用nextElementSibling属性来获取下一个兄弟元素。




// 获取当前元素的上一个兄弟元素
var currentElement = document.getElementById('currentElement');
var prevElement = currentElement.previousElementSibling;
 
// 获取当前元素的下一个兄弟元素
var nextElement = currentElement.nextElementSibling;

请注意，.prev()和.next()方法在jQuery中是方法，而previousElementSibling和nextElementSibling属性在原生JavaScript中是属性。

- 阅读更多 -
js/ts实现保存excel表格到计算机指定目录位置。
System
2024-08-12
所有,typescript

在JavaScript或TypeScript中，要实现将数据保存为Excel表格并下载到计算机的指定目录位置，通常需要使用前端库，如SheetJS（也称为xlsx）来处理Excel文件的读写，以及HTML5的Blob和URL.createObjectURL来创建下载链接。

以下是一个简单的实现示例：




// 引入SheetJS库
import * as XLSX from 'xlsx';
 
function saveAs(blob, filename) {
  // 创建一个链接元素
  const a = document.createElement('a');
  
  // 利用URL.createObjectURL创建一个指向blob的URL
  a.href = URL.createObjectURL(blob);
  
  // 设置下载的文件名
  a.download = filename;
  
  // 触发下载
  document.body.appendChild(a);
  a.click();
  
  // 清理临时元素和对象URL
  document.body.removeChild(a);
  URL.revokeObjectURL(a.href);
}
 
function downloadExcel(data, fileName) {
  // 将数据转换为工作表
  const ws = XLSX.utils.json_to_sheet(data);
  
  // 创建工作簿并添加工作表
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  
  // 生成Excel文件的二进制字符串
  const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
  
  // 创建二进制对象并创建下载链接
  const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
  saveAs(blob, fileName + '.xlsx');
}
 
// 将字符串转换为ArrayBuffer
function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}
 
// 使用示例
const data = [
  { name: 'Alice', email: 'alice@example.com' },
  { name: 'Bob', email: 'bob@example.com' }
];
downloadExcel(data, 'users');

在上述代码中，downloadExcel函数接受一个数据数组和一个文件名作为参数，然后使用XLSX库将数据转换为Excel表格并下载。saveAs函数负责创建下载链接并触发下载。

请注意，前端JavaScript代码本身无法直接将文件保存到用户的计算机指定目录中，因为出于安全考虑，浏览器限制对本地文件系统的访问。用户必须手动选择下载位置。

- 阅读更多 -
选择 TypeScript 还是 JavaScript？权衡
System
2024-08-12
所有,typescript

选择 TypeScript 还是 JavaScript 取决于具体的项目需求和个人偏好。以下是选择 TypeScript 或 JavaScript 的一些关键考虑因素：

  1. 类型检查 - TypeScript 提供了类型检查，这有助于在编码时发现错误。对于大型项目或者需要多人合作的项目，这特别有帮助。
  2. 可维护性 - 类型声明可以提高代码的可读性和可维护性。类型注释使得理解代码更加直观，甚至在没有文档的情况下也能理解代码意图。
  3. 工具支持 - 现代的 IDE 和构建工具（如 Webpack, Babel）对 TypeScript 提供了很好的支持。
  4. 学习曲线 - TypeScript 有一定的学习曲线，需要理解类型系统和类型约束，但是一旦学会，可以带来很大的生产力提升。
  5. 生态系统 - 随着时间的推移，TypeScript 在开发者中的接受度和生态系统的支持力度正在增长。
  6. 团队偏好 - 查看团队成员的偏好，确保大多数人能从 TypeScript 获得好处。
  7. 初始成本 - 如果你的项目需要从零开始，并且时间紧迫，可能会考虑 JavaScript 作为一个更快的起点。
  8. 长期成本 - 随着项目的发展，可能需要更多的时间来维护类型注释，但这可能会在未来节省更多时间。

选择 TypeScript 还是 JavaScript 应该基于项目的具体需求和团队的技术偏好。如果你是 JavaScript 用户，你可能想要保持简洁，直到你发现类型系统带来的好处。如果你是类型系统爱好者，那么 TypeScript 可能是更好的选择。

- 阅读更多 -
Node.js LTS：稳定版的长期支持
System
2024-08-12
所有,nodejs

Node.js的长期支持（LTS）版本是其主要版本，提供了稳定性和长期支持。这意味着它们会被Apple，Canonical，Red Hat等大型企业和开发者社区更为广泛地支持，并且会得到官方安全更新和错误修复的长期支持。

在编写Node.js代码时，你可能想要确保你使用的是LTS版本。你可以通过Node Version Manager（nvm）来管理和安装Node.js的LTS版本。以下是如何安装最新的LTS版本的示例代码：




# 安装nvm（如果你还没有安装nvm的话）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
 
# 在新的终端会话中加载nvm
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
 
# 安装最新的LTS版本
nvm install --lts
 
# 使用最新的LTS版本
nvm use --lts

这段代码首先安装nvm（Node Version Manager），然后使用nvm安装最新的LTS版本，并将其设置为默认版本。这样你就可以确保你的Node.js环境始终是稳定和受支持的版本。

- 阅读更多 -
在 CentOS 7.8 上安装 Node.js
System
2024-08-12
所有,nodejs

在 CentOS 7.8 上安装 Node.js 可以通过几种方法来完成，以下是使用 NodeSource 仓库安装 Node.js 的步骤：

  1. 首先，你需要从 NodeSource 仓库中下载 Node.js 的安装脚本。你可以选择 Node.js 的一个长期支持（LTS）版本或者最新版本。以下示例安装的是 Node.js 的 LTS 版本（在撰写本回答时，这将是 Node.js 10.16）：



curl -sL https://rpm.nodesource.com/setup_10.x | sudo bash -
  1. 安装 Node.js：



sudo yum install -y nodejs
  1. 验证安装是否成功：



node --version
npm --version

这些命令会下载 Node.js 10.x 的安装脚本，并通过该脚本添加 NodeSource 仓库到你的系统。然后，它会使用 yum 安装 Node.js 和 npm（Node.js 的包管理器）。最后，它会显示已安装的 Node.js 和 npm 的版本，以确认安装成功。

- 阅读更多 -
在 Vite 项目中直接使用 Node.js 的 import 会报 Cannot use import statement outside a module 错误
System
2024-08-12
所有,nodejs

报错解释：

这个错误表明你正在尝试在 Vite 项目中使用 import 语句来导入一个 Node.js 内置模块或者第三方库，但是遇到了限制。Vite 默认支持在浏览器环境中使用 ESM 导入模块，但不是所有 Node.js 模块都能直接在浏览器中使用。

解决方法：

  1. 如果你需要在 Vite 项目中使用某个 Node.js 原生模块，可以通过安装对应的浏览器兼容版本的库来解决。例如，如果你尝试导入 fs 模块，你可以安装 mock 版本的 fs 库来模拟浏览器环境。
  2. 使用特定的 Vite 插件，如 vite-node-globals 插件，可以在 Vite 项目中模拟 Node.js 全局变量。
  3. 如果你只是想在开发环境中使用某些 Node.js API，可以通过条件判断，仅在 Node.js 环境下执行这部分代码。例如：



if (typeof window === 'undefined') {
  // 这里是 Node.js 环境下的代码
  const fs = require('fs');
  // 使用 fs 模块的代码
}
  1. 使用 Vite 的插件来转换和处理 Node.js 代码，例如 vite-plugin-node 可以让你在 Vite 项目中直接导入 Node.js 模块。
  2. 如果你是在尝试导入一个 CommonJS 模块，可以考虑将该模块转换为 ESM。可以使用工具如 esm 或者 babel 来帮助转换。

确保在解决问题时不要破坏项目的浏览器兼容性。

- 阅读更多 -
如何在Node.js将console日志写入到文件
System
2024-08-12
所有,nodejs

在Node.js中，您可以使用fs模块将console.log的输出重定向到文件。以下是一个简单的例子：




const fs = require('fs');
const logStream = fs.createWriteStream('/path/to/your/logfile.log', { flags: 'a' });
const log = console.log;
 
console.log = (...args) => {
  log.apply(console, args);
  logStream.write(args.join(' ') + '\n');
};
 
// 测试日志
console.log('这是一条日志信息。');

在这个例子中，我们首先引入了fs模块来创建一个日志文件的写入流。然后我们用console.log原始的函数引用替换了console.log，以便在写入文件的同时还能在控制台打印日志。我们使用fs.createWriteStream来创建一个日志文件的流，并指定了文件路径和写入模式（这里是追加'a'）。每次调用console.log时，我们都将参数拼接成一个字符串，并添加换行符，然后写入到文件流中。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号