1. 首页
  2. 标签
  3. Javascript
如何使用Node.js快速创建本地HTTP服务器并实现异地远程访问
System
2024-08-18
所有,nodejs



const http = require('http');
const fs = require('fs');
const process = require('process');
 
// 创建HTTP服务器并监听3000端口
const server = http.createServer((req, res) => {
  fs.readFile('index.html', (err, data) => {
    if (err) {
      res.writeHead(500);
      res.end('Server Error');
    } else {
      res.writeHead(200, { 'Content-Type': 'text/html' });
      res.end(data);
    }
  });
});
 
server.listen(3000, () => {
  console.log(`服务器运行在 http://127.0.0.1:3000/`);
});
 
// 自动获取本机IP地址
const os = require('os');
const networkInterfaces = os.networkInterfaces();
const ipv4Addresses = networkInterfaces.eth0.filter(item => item.family === 'IPv4');
console.log(`外网可访问地址: http://${ipv4Addresses[0].address}:3000/`);

这段代码创建了一个简单的HTTP服务器，监听3000端口，并在浏览器请求时返回index.html文件的内容。同时，它还会输出服务器的本地访问地址和外网可能访问的地址（假设运行代码的机器有一个外网可访问的IP地址，且通过网络接口eth0连接）。这样可以帮助开发者快速了解如何启动一个基本的HTTP服务器，并且如何在不同网络环境下测试其功能。

- 阅读更多 -
使用 JavaScript 中的 document 对象查找 HTML 元素，实现“登录
System
2024-08-18
所有,html

在JavaScript中，您可以使用document对象的方法来查找和操作HTML元素。以下是一些常用的方法：

  1. getElementById(id) - 通过元素的ID获取一个元素。
  2. getElementsByClassName(className) - 通过元素的类名获取一个元素集合。
  3. getElementsByTagName(tagName) - 通过元素的标签名获取一个元素集合。
  4. querySelector(selector) - 通过CSS选择器获取第一个匹配的元素。
  5. querySelectorAll(selector) - 通过CSS选择器获取所有匹配的元素集合。

示例代码：




// 通过ID获取元素
var elementById = document.getElementById('loginButton');
 
// 通过类名获取元素集合
var elementsByClassName = document.getElementsByClassName('input-field');
 
// 通过标签名获取元素集合
var elementsByTagName = document.getElementsByTagName('p');
 
// 通过CSS选择器获取第一个匹配的元素
var firstMatchedElement = document.querySelector('.nav > ul > li:first-child');
 
// 通过CSS选择器获取所有匹配的元素集合
var allMatchedElements = document.querySelectorAll('p.paragraph');

请确保在使用这些方法时，页面的DOM已经完全加载，通常可以将JavaScript代码放在<body>标签的底部或者使用window.onload事件来确保DOM完全加载。

- 阅读更多 -
Qt加载Html实现与Js交互
System
2024-08-18
所有,html

在Qt中，你可以使用QWebEngineView来加载HTML并与JavaScript交互。以下是一个简单的例子，展示了如何实现这一功能：




#include <QApplication>
#include <QWebEngineView>
#include <QWebChannel>
 
// 自定义的C++类，用于与JavaScript交互
class MyObject : public QObject {
    Q_OBJECT
public:
    explicit MyObject(QObject *parent = nullptr) : QObject(parent) {}
 
public slots:
    void showMessage(const QString &message) {
        qDebug() << "JavaScript called showMessage with:" << message;
    }
};
 
int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
 
    QWebEngineView view;
    QWebChannel channel;
 
    // 创建自定义的C++对象
    MyObject myObject;
 
    // 将C++对象注册到channel，使其可以从JavaScript访问
    channel.registerObject(QStringLiteral("myObject"), &myObject);
 
    // 加载包含JavaScript调用的HTML页面
    view.page()->setWebChannel(&channel);
    view.setUrl(QUrl(QStringLiteral("qrc:/index.html")));
    view.show();
 
    return app.exec();
}

HTML (index.html) 文件:




<!DOCTYPE html>
<html>
<head>
    <title>Qt WebChannel Example</title>
    <script type="text/javascript" src="qwebchannel.js"></script>
    <script type="text/javascript">
        function onLoad() {
            new QWebChannel(qt.webChannelTransport, function(channel) {
                // 获取在C++中注册的对象
                var myObject = channel.objects.myObject;
 
                // 调用C++对象的showMessage方法
                myObject.showMessage("Hello from JavaScript!");
            });
        }
    </script>
</head>
<body onload="onLoad();">
    <h1>Qt WebChannel Example</h1>
</body>
</html>

确保你的项目文件（.pro）包含了对应的模块和资源：




QT += webengine webchannel
 
RESOURCES += \
    myresources.qrc
 
myresources.qrc: \
    index.html

在这个例子中，MyObject类有一个公共槽函数showMessage，它可以从JavaScript中调用。通过QWebChannel，你可以将这个C++对象暴露给JavaScript，并在HTML页面加载时，JavaScript会调用这个对象的方法。

- 阅读更多 -
html引入json文本测试数据
System
2024-08-18
所有,html

在HTML中引入JSON文本测试数据，通常是通过JavaScript进行。你可以创建一个JavaScript变量来存储JSON数据，然后在HTML中使用这个变量。

首先，创建一个JSON文件（例如data.json）:




{
  "items": [
    { "id": 1, "name": "Item 1" },
    { "id": 2, "name": "Item 2" }
  ]
}

然后，在HTML文件中，使用JavaScript来读取这个JSON文件并使用其数据：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON Test Data</title>
<script>
function loadJSON() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.json', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var json = JSON.parse(xhr.responseText);
      console.log(json);
      // 处理json数据
    }
  };
  xhr.send();
}
</script>
</head>
<body onload="loadJSON()">
<div id="data-container">
  <!-- JSON数据将在这里被处理并显示 -->
</div>
</body>
</html>

在上面的例子中，当页面加载完成后，loadJSON函数会被调用，它通过XMLHttpRequest从data.json文件中加载JSON数据，然后解析并处理这些数据。在实际应用中，你可以根据需要将数据显示在页面上或进行其他操作。

- 阅读更多 -
解惑三兄弟：Next.js、NestJS和Nuxt.js - 选择最适合你的全栈开发工具
System
2024-08-18
所有,javascript

Next.js、NestJS和Nuxt.js都是在不同领域中为全栈开发提供解决方案的工具，但它们各自关注的是不同的方面。

  1. Next.js: 它是一个框架，用于在服务端渲染的React应用开发。它提供了出色的SEO支持和快速的页面加载速度。
  2. NestJS: 它是一个用于构建高效、可扩展的服务器端应用程序的框架。它提供了很好的模块化和依赖注入，并且可以轻松地与其他数据库和服务集成。
  3. Nuxt.js: 它是Vue.js的一个服务端渲染框架，可以生成静态站点或使用服务端渲染。它提供了服务端渲染、代码分割、路由优化等特性。

选择哪一个取决于你的具体需求：

  • 如果你正在开发一个React应用并且需要快速的页面加载和SEO优化，那么Next.js可能是最佳选择。
  • 如果你正在开发一个需要模块化、可扩展和易于维护的后端服务，NestJS可能是最佳选择。
  • 如果你正在开发一个Vue应用并希望有服务端渲染的支持，Nuxt.js可能是最佳选择。

示例代码：

Next.js的一个简单页面:




// pages/index.js
function Home() {
  return <div>Hello, world!</div>;
}
export default Home;

NestJS的一个简单的控制器:




// src/controllers/app.controller.ts
import { Controller, Get } from '@nestjs/common';
 
@Controller()
export class AppController {
  @Get()
  getHello(): string {
    return 'Hello, World!';
  }
}

Nuxt.js的一个简单页面:




// pages/index.vue
<template>
  <div>Hello, world!</div>
</template>

每一个框架都有其特色和适用场景，你需要根据你的具体需求来选择最适合你的那一个。

- 阅读更多 -
JS实现轮播图(超详细代码注释)
System
2024-08-18
所有,css3



// 轮播图函数
function carousel(images, container) {
    let currentIndex = 0; // 当前图片索引
 
    // 显示特定索引的图片
    function showImage(index) {
        images[currentIndex].style.display = 'none'; // 隐藏当前图片
        images[index].style.display = 'block'; // 显示目标图片
        currentIndex = index; // 更新当前图片索引
    }
 
    // 切换到上一张图片
    function showPrevious() {
        let previousIndex = (currentIndex - 1 + images.length) % images.length;
        showImage(previousIndex);
    }
 
    // 切换到下一张图片
    function showNext() {
        let nextIndex = (currentIndex + 1) % images.length;
        showImage(nextIndex);
    }
 
    // 初始显示第一张图片
    showImage(0);
 
    // 为左箭头添加点击事件
    container.querySelector('.left-arrow').addEventListener('click', showPrevious);
 
    // 为右箭头添加点击事件
    container.querySelector('.right-arrow').addEventListener('click', showNext);
 
    // 如果需要自动播放，可以添加定时器
    // let intervalId = setInterval(showNext, 3000); // 每3秒切换到下一张图片
    // container.addEventListener('mouseover', () => clearInterval(intervalId)); // 鼠标悬停时清除定时器
    // container.addEventListener('mouseout', () => intervalId = setInterval(showNext, 3000)); // 鼠标离开时重置定时器
}
 
// 使用示例
document.addEventListener('DOMContentLoaded', () => {
    let images = document.querySelectorAll('.carousel img');
    let container = document.querySelector('.carousel');
    carousel(images, container);
});

这段代码实现了一个基本的轮播图功能，包括切换到上一张和下一张图片的功能。代码中使用了函数式编程的概念，将轮播图的逻辑封装在一个函数中，通过事件监听器来处理用户的交互。同时，代码中有详细的中文注释，对于学习者来说非常友好。

- 阅读更多 -
CSS+ JS 实现手电筒效果
System
2024-08-18
所有,css3

以下是一个简单的手电筒效果实现，使用了CSS和JavaScript。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Torch Effect</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
  }
  .torch {
    width: 100px;
    height: 200px;
    background: #ffc107;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 20px #ffc107;
    animation: torch-animation 2s linear infinite;
  }
  @keyframes torch-animation {
    0% {
      box-shadow: 0 0 20px #ffc107;
    }
    50% {
      box-shadow: 0 0 20px #ffc107, 0 0 50px #ffc107;
    }
    100% {
      box-shadow: 0 0 20px #ffc107, 0 0 50px #ffc107, 0 0 100px #ffc107;
    }
  }
</style>
</head>
<body>
<div class="torch"></div>
<script>
  // JavaScript 部分可以为空，因为效果是纯CSS实现的
</script>
</body>
</html>

这段代码创建了一个简单的手电筒效果，使用CSS动画来实现手电筒的移动和光芒的扩散。这个例子展示了如何使用CSS创建视觉上的动态效果，而不需要依赖复杂的JavaScript代码。

- 阅读更多 -
js实现百度地图的自定义marker与css3动画的交互
System
2024-08-18
所有,css3



// 首先，确保你已经在页面中引入了BMap API和CSS样式
 
// 初始化地图和marker
function initMap() {
    var map = new BMap.Map("mapContainer"); // 创建Map实例
    var point = new BMap.Point(116.404, 39.915); // 创建点坐标
    map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
 
    // 创建自定义marker
    var marker = new BMap.Marker(point);
    map.addOverlay(marker); // 将标注添加到地图中
 
    // 绑定鼠标事件
    marker.addEventListener("mouseover", function() {
        this.setTop(true); // 将标注置顶
        openInfo(this); // 打开信息窗口
    });
 
    marker.addEventListener("mouseout", function() {
        this.setTop(false); // 取消置顶
        closeInfo(this); // 关闭信息窗口
    });
}
 
// 打开信息窗口
function openInfo(marker) {
    var opts = {
        width: 250, // 信息窗口宽度
        height: 100, // 信息窗口高度
        title: "自定义标题" // 信息窗口标题
    };
 
    // 创建信息窗口
    var infoWindow = new BMap.InfoWindow("这里是自定义内容", opts);
    marker.openInfoWindow(infoWindow); // 打开信息窗口
}
 
// 关闭信息窗口
function closeInfo(marker) {
    marker.closeInfoWindow(); // 关闭信息窗口
}
 
// 页面加载完成后初始化地图
window.onload = initMap;

这段代码展示了如何在百度地图上创建一个自定义的marker，并且通过CSS3动画与marker进行交互。当鼠标悬停在marker上时，会打开一个信息窗口，当鼠标离开时，会关闭信息窗口。这个例子简单明了地展示了如何使用百度地图API进行开发。

- 阅读更多 -
javascript顺序点击文字验证
System
2024-08-18
所有,css3



// 假设有一个元素，我们将在其上附加点击事件监听器
var element = document.getElementById('myElement');
 
// 定义点击事件处理函数
function handleClick() {
    console.log('元素被点击了！');
}
 
// 定义函数来设置事件监听器，并在正确的顺序中点击元素
function sequentialClick(element, steps) {
    var currentStep = 0;
 
    // 定义一个内部的点击事件监听器
    function clickListener() {
        if (currentStep < steps) {
            handleClick(); // 执行点击操作
            currentStep++; // 步骤计数增加
        } else {
            element.removeEventListener('click', clickListener); // 移除监听器
        }
    }
 
    // 开始监听点击事件
    element.addEventListener('click', clickListener);
 
    // 模拟第一次点击开始序列
    element.click();
}
 
// 使用函数点击五次元素
sequentialClick(element, 5);

这段代码首先定义了一个元素和点击事件处理函数。sequentialClick函数负责设置事件监听器，并在每次点击后递增步骤计数。当步骤计数达到预设的次数后，事件监听器会被移除，停止继续点击。这样，我们可以通过调用sequentialClick函数，并传入元素和需要点击的次数，来模拟顺序点击操作。

- 阅读更多 -
js 打开页面的方法总结
System
2024-08-18
所有,javascript

在JavaScript中，打开一个新的网页窗口可以使用window.open()方法。以下是几种常见的打开新页面的方法：

  1. 使用window.open()直接打开一个新页面：



window.open('https://www.example.com', '_blank');
  1. 在一个新的浏览器标签页中打开链接：



<a href="https://www.example.com" target="_blank">打开新页面</a>
  1. 使用JavaScript创建一个form并提交，从而在新窗口/标签页中打开页面：



// 创建一个form
var form = document.createElement('form');
form.target = '_blank';
form.action = 'https://www.example.com';
 
// 添加form到body
document.body.appendChild(form);
 
// 提交form
form.submit();
  1. 使用window.location.href或window.location.assign()在当前窗口打开新页面：



window.location.href = 'https://www.example.com';
// 或者
window.location.assign('https://www.example.com');
  1. 使用window.location.replace()在当前窗口替换为新页面（不会在浏览器历史记录中生成新记录）：



window.location.replace('https://www.example.com');

选择合适的方法取决于你是否需要在新窗口或标签页中打开页面，以及是否需要保留当前页面的历史记录。

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