标签 Javascript 下的文章

2024-08-09

以下是一个使用jQuery实现的返回顶部插件的简单示例，包含弹性动画效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Back to Top Plugin Example</title>
<style>
  body, html {
    height: 2000px;
  }
  #back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    cursor: pointer;
  }
</style>
</head>
<body>
 
<img id="back-to-top" src="arrow-up.png">
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  $(document).ready(function(){
    // When the scroll is higher than 500 viewport height, show the button
    $(window).scroll(function() {
      if ($(this).scrollTop() > 500) {
        $('#back-to-top').fadeIn();
      } else {
        $('#back-to-top').fadeOut();
      }
    });
 
    // When clicking the button, scroll to top in no time
    $('#back-to-top').click(function() {
      $('body,html').animate({scrollTop: 0}, 0);
    });
  });
</script>
</body>
</html>

这段代码实现了一个简单的返回顶部按钮，当用户滚动页面超过500px时显示该按钮，并且点击按钮会立即返回页面顶部，没有使用任何动画库，保持了代码的简洁性。

System

2024-08-09

所有,jquery




// 引入jQuery和Popmotion的animate函数
import $ from 'jquery';
import { animate } from 'popmotion';
 
// 定义一个函数，用于将元素从一个位置平滑移动到另一个位置
function smoothTransition(element, from, to) {
  return animate({
    from,
    to,
    duration: 500, // 动画持续时间500毫秒
    ease: 'easeOut', // 动画缓动函数
  }).start((v) => $(element).css('left', `${v}px`));
}
 
// 使用jQuery和Popmotion的示例
$(document).ready(() => {
  const box = $('#box'); // 获取ID为'box'的元素
  const start = parseInt(box.css('left'), 10); // 获取元素当前的left值
  const end = 200; // 定义元素应移动到的新位置
 
  // 触发动画
  smoothTransition(box, start, end);
});

这段代码演示了如何使用jQuery和Popmotion库来平滑移动一个元素。首先，我们引入了必要的库。然后，我们定义了一个函数smoothTransition，该函数接受要移动的元素、起始位置和目标位置作为参数，并使用Popmotion的animate函数来创建平滑的过渡效果。最后，在文档加载完成后，我们获取了元素的初始位置，并设置了目标位置，然后触发了动画。

- 阅读更多 -

js 日期转换格式

System

2024-08-09

所有,typescript

要在JavaScript中将日期转换为特定格式，您可以使用Date对象的方法来获取日期的各个部分，然后按照需要的格式组合这些部分。以下是一个将日期转换为YYYY-MM-DD格式的函数示例：




function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  return `${year}-${month}-${day}`;
}
 
// 使用示例
const date = new Date();
const formattedDate = formatDate(date);
console.log(formattedDate); // 输出格式如: "2023-03-31"

在这个函数中，getFullYear() 方法用于获取年份，getMonth() 方法返回的月份是从0开始的，因此需要加1，getDate() 方法用于获取日，然后使用padStart()方法确保月份和日期始终是两位数字。最后将这些部分拼接成一个字符串返回。

- 阅读更多 -

使用CSS、JavaScript、jQuery三种方式实现手风琴效果

System

2024-08-09

所有,css

以下是实现手风琴效果的简单示例代码。这个示例使用了HTML结构、CSS样式和jQuery来控制手风琴的打开和关闭。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Accordion</title>
<style>
  .accordion {
    overflow: hidden;
    border: 1px solid #777;
  }
  .accordion-item {
    padding: 10px;
    background-color: #f0f0f0;
    transition: background-color 0.3s;
  }
  .accordion-item:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .accordion-item:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  .accordion-item.active {
    background-color: #e0e0e0;
  }
</style>
</head>
<body>
 
<div class="accordion">
  <div class="accordion-item active">Item 1</div>
  <div class="accordion-item">Item 2</div>
  <div class="accordion-item">Item 3</div>
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
  $('.accordion-item').click(function() {
    $(this).toggleClass('active').siblings().removeClass('active');
  });
});
</script>
 
</body>
</html>

这个示例中的手风琴效果非常基础，只有打开和关闭的功能，没有滑动动画效果。实际应用中可以根据需要添加更多的交互细节。

System

2024-08-09

所有,typescript




// 引入 check-types 库
import { check } from 'check-types';
 
// 定义一个需要进行类型检查的函数
function greet(name: string) {
  if (!check(name, 'string')) {
    throw new TypeError('name 必须是一个字符串');
  }
  console.log(`Hello, ${name}!`);
}
 
// 使用 greet 函数
greet('World'); // 输出: Hello, World!
greet(123); // 抛出 TypeError: name 必须是一个字符串

这个示例代码展示了如何使用 TypeScript 和 check-types 库来对函数参数进行类型检查。如果提供的参数类型不符合要求，则抛出一个 TypeError 异常。这种类型检查可以提高代码的健壮性和可维护性。

- 阅读更多 -

js 转 ts 文件

System

2024-08-09

所有,typescript

要将JavaScript文件转换为TypeScript文件，通常只需将.js文件扩展名更改为.ts，然后添加TypeScript类型注释。如果JavaScript代码使用模块，则可能还需要添加import和export语句。

例如，假设有以下简单的JavaScript代码：




// example.js
function greet(name) {
    return `Hello, ${name}!`;
}
 
console.log(greet('World'));

转换为TypeScript的代码可能如下所示：




// example.ts
function greet(name: string): string {
    return `Hello, ${name}!`;
}
 
console.log(greet('World'));

只需将文件扩展名从.js更改为.ts，然后添加类型注释和可能的导入/导出语句即可。如果你的JavaScript代码使用了模块系统（例如CommonJS或ES Modules），你可能需要调整导入和导出以适应TypeScript。

- 阅读更多 -

Node.js | JavaScript也能写后端？

System

2024-08-09

所有,nodejs

是的，Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它使得 JavaScript 不仅可以运行在浏览器中，也可以运行在服务器端。通过 Node.js，开发者可以使用 JavaScript 语言完成后端逻辑的编写，这使得开发者能够以一种语言完成前后端的开发工作。

以下是一个简单的 Node.js 后端服务器示例，使用了 Express 框架：




const express = require('express');
const app = express();
const port = 3000;
 
app.get('/', (req, res) => {
  res.send('Hello World!');
});
 
app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

在这个例子中，我们创建了一个简单的 HTTP 服务器，监听本地的 3000 端口。当访问根路径 '/' 时，服务器会返回 'Hello World!' 字符串。这个示例演示了 Node.js 的基本用法，并且展示了如何设置一个简单的 HTTP 服务器。

- 阅读更多 -

实战：Docker化Node.js项目

System

2024-08-09

所有,nodejs




# 设置Node.js的版本为14
FROM node:14
 
# 创建并设置/app目录为工作目录
WORKDIR /app
 
# 将package.json和package-lock.json复制到工作目录
COPY package*.json ./
 
# 安装项目依赖
RUN npm install
 
# 将项目源代码复制到工作目录
COPY . .
 
# 暴露容器的8080端口
EXPOSE 8080
 
# 运行Node.js应用
CMD ["node", "app.js"]

这个Dockerfile为创建Node.js应用的Docker镜像提供了一个基本的模板。它首先设置了Node.js的版本，然后创建了工作目录，并安装了项目依赖。最后，它将源代码复制到镜像中，并暴露了应用将运行的端口。当容器启动时，它将运行Node.js应用程序。这是一个简洁且有效的示例，可以作为开发者实践Docker化Node.js项目的基础。

- 阅读更多 -

node_pcap: 在Node.js中轻松进行网络数据包捕获

System

2024-08-09

所有,nodejs

Node-pcap是一个Node.js的包，它提供了一个简单的接口来捕获网络数据包。这个库的目的是让开发者能够轻松地在Node.js环境中捕获和分析网络数据包。

以下是一个使用node-pcap捕获数据包的例子：




var pcap = require("pcap");
 
// 创建一个新的Pcap对象，指定需要监听的网络接口
var session = new pcap.PcapSession("eth0", "ip and tcp"); // 参数1：网络接口；参数2：捕获过滤器表达式
 
// 添加一个数据包处理器
session.on("packet", function(packet) {
  console.log(packet.toString()); // 打印捕获的数据包信息
});
 
// 开始捕获数据包
session.open();
 
// 在合适的时候停止捕获，并关闭会话
// session.close();

在这个例子中，我们首先引入了node-pcap模块，然后创建了一个PcapSession对象，指定了需要监听的网络接口和捕获过滤器。我们为这个会话添加了一个"packet"事件处理器，它会在捕获到数据包时被调用。最后，我们调用open()方法开始捕获数据包。

注意：在实际使用中，你需要根据你的具体需求来修改网络接口和捕获过滤器。捕获过滤器是一个非常重要的部分，它可以帮助你精确地捕获到你需要的数据包。

另外，你可以使用session.close()方法在适当的时候停止捕获并关闭会话。

这只是一个简单的例子，node-pcap库还提供了更多的功能，例如发送自定义数据包、修改数据包等。你可以查看它的官方文档来了解更多详情。

- 阅读更多 -

探索Node.js新境界：TypeScript引导的全栈开发框架

System

2024-08-09

所有,nodejs




// 引入NestJS的核心模块，这里以Controller和Module为例
import { Controller, Get, Module } from '@nestjs/common';
import { AppService } from './app.service';
 
// 定义一个控制器，它将响应客户端请求
@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}
 
  // 定义一个处理GET请求的方法，路径为'/'
  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
}
 
// AppService服务类，提供getHello方法
class AppService {
  getHello(): string {
    return 'Hello World!';
  }
}
 
// 定义根模块，它将组合控制器和服务
@Module({
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

这个简单的NestJS示例展示了如何使用TypeScript创建一个控制器和服务，以及如何在模块中组合它们。这是一个典型的NestJS应用程序架构，它使用装饰器来标记类和方法，以指示框架如何路由HTTP请求。

- 阅读更多 -