标签 Javascript 下的文章

2024-08-12




import * as THREE from 'three';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 
let scene, camera, renderer, labelRenderer, mesh;
 
function init() {
    scene = new THREE.Scene();
 
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
    camera.position.z = 1;
 
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
 
    // 创建CSS2DRenderer
    labelRenderer = new CSS2DRenderer();
    labelRenderer.setSize(window.innerWidth, window.innerHeight);
    labelRenderer.domElement.style.position = 'absolute';
    labelRenderer.domElement.style.top = 0;
    document.body.appendChild(labelRenderer.domElement);
 
    // 创建3D对象
    let geometry = new THREE.PlaneGeometry(0.5, 0.5);
    let material = new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true });
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
 
    // 创建CSS2DObject
    let label = document.createElement('div');
    label.style.color = 'red';
    label.textContent = 'Hello, CSS2D!\n3D object!';
    let labelObject = new CSS2DObject(label);
    labelObject.position.set(0, 0, 0);
    scene.add(labelObject);
 
    // 监听窗口大小变化
    window.addEventListener('resize', onWindowResize, false);
 
    animate();
}
 
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
 
    renderer.setSize(window.innerWidth, window.innerHeight);
    labelRenderer.setSize(window.innerWidth, window.innerHeight);
}
 
function animate() {
    requestAnimationFrame(animate);
 
    renderer.render(scene, camera);
    labelRenderer.render(scene, camera);
}
 
init();

这段代码初始化了Three.js场景，并使用CSS2DRenderer渲染了一个2D标签，它会随着3D对象一起旋转。这个例子简单地展示了如何将HTML元素与3D场景中的对象相关联，这在创建交互式数据可视化时非常有用。

- 阅读更多 -

Flutter 中的 JSON 解析

System

2024-08-12

所有,flutter




import 'dart:convert';
 
void main() {
  // 假设这是你的JSON字符串
  String jsonString = '{"name": "John", "age": 30, "city": "New York"}';
 
  // 使用json.decode()函数将JSON字符串转换为Map
  Map<String, dynamic> userMap = jsonDecode(jsonString);
 
  // 访问Map中的数据
  print('Name: ${userMap['name']}');
  print('Age: ${userMap['age']}');
  print('City: ${userMap['city']}');
}

这段代码展示了如何在Flutter中解析JSON字符串。首先，使用jsonDecode()函数来将JSON字符串转换成一个Map。然后，你可以像访问普通Map那样来访问这个解析后的数据。这是处理JSON数据的基本方法，对于开发者来说非常有用。

System

2024-08-12

所有,nodejs




<template>
  <div ref="chartContainer" style="width: 100%; height: 100%"></div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import axios from 'axios';
 
const chartContainer = ref(null);
const chartInstance = ref(null);
 
onMounted(() => {
  chartInstance.value = echarts.init(chartContainer.value);
  fetchData();
});
 
async function fetchData() {
  try {
    const response = await axios.get('/api/data');
    const option = {
      // ECharts 配置项
      series: [
        {
          // 示例系列配置
          type: 'bar',
          data: response.data
        }
      ]
    };
    chartInstance.value.setOption(option);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}
</script>
 
<style scoped>
/* 样式 */
</style>

这个代码示例展示了如何在Vue 3组件中使用ECharts和axios从后端API获取数据，并将其显示为图表。它使用了Composition API的setup语法糖来简化代码，并通过onMounted生命周期钩子初始化ECharts实例和获取数据。

System

2024-08-12

所有,jquery

要在浏览器中运行xlsx.core.min.js，你需要确保该JavaScript文件已经被包含在你的HTML页面中。以下是一个简单的HTML页面示例，它包含了xlsx.core.min.js，并通过jQuery实现了一个简单的功能，用于读取Excel文件并显示其内容。




<!DOCTYPE html>
<html>
<head>
    <title>Excel 读取示例</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="xlsx.core.min.js"></script>
</head>
<body>
 
<input type="file" id="excelFile" />
<div id="excelContent"></div>
 
<script>
$(document).ready(function() {
    $('#excelFile').change(function(e) {
        var reader = new FileReader();
        reader.readAsArrayBuffer(e.target.files[0]);
        reader.onload = function(e) {
            var data = new Uint8Array(reader.result);
            var workbook = XLSX.read(data, {type: 'array'});
            
            // 假设我们只读取第一个工作表
            var firstSheetName = workbook.SheetNames[0];
            var worksheet = workbook.Sheets[firstSheetName];
            
            // 将工作表转换为JSON
            var json = XLSX.utils.sheet_to_json(worksheet);
            
            // 显示JSON内容
            $('#excelContent').text(JSON.stringify(json));
        };
    });
});
</script>
 
</body>
</html>

在这个例子中，我们使用了xlsx.core.min.js库来读取用户通过文件输入选择的Excel文件。当文件被选中后，我们使用FileReader来读取文件内容，然后使用XLSX.read函数来解析Excel文件，并使用XLSX.utils.sheet_to_json将第一个工作表转换成JSON格式，最后在页面上显示这个JSON内容。

确保你的服务器配置允许访问xlsx.core.min.js文件，否则你可能会遇到跨源资源共享(CORS)问题。如果你是从CDN加载xlsx.core.min.js的，那么这通常不是问题。如果你需要从本地加载，确保文件路径正确无误。

- 阅读更多 -

【js/jQuery】在元素最前或最后添加一个新元素的方法

System

2024-08-12

所有,jquery

在jQuery中，可以使用prepend()方法在元素内部的前面添加新元素，或者使用append()方法在元素内部的后面添加新元素。

以下是实例代码：




// 创建新元素
var newElement = $("<p>这是新添加的段落。</p>");
 
// 在目标元素内部最前面添加新元素
$("#targetElement").prepend(newElement);
 
// 在目标元素内部最后面添加新元素
$("#targetElement").append(newElement);

在原生JavaScript中，可以使用insertBefore()在选定元素之前添加新元素，或者使用appendChild()在选定元素之后添加新元素。

以下是实例代码：




// 创建新元素
var newElement = document.createElement("p");
newElement.textContent = "这是新添加的段落。";
 
// 获取目标元素
var targetElement = document.getElementById("targetElement");
 
// 在目标元素之前添加新元素
targetElement.parentNode.insertBefore(newElement, targetElement);
 
// 在目标元素之后添加新元素
targetElement.appendChild(newElement);

- 阅读更多 -

推荐一个强大的Node.js、TypeScript和Express项目模板

System

2024-08-12

所有,nodejs

以下是一个简化的Node.js、TypeScript和Express项目模板，它包括基础的配置和工具，可以作为开始新项目的起点。




// package.json
{
  "name": "your-project",
  "version": "1.0.0",
  "scripts": {
    "build": "tsc",
    "start": "node .build/index.js",
    "watch": "tsc --watch"
  },
  "dependencies": {
    "express": "^4.17.1",
    "typescript": "^4.0.0"
  }
}
 
// tsconfig.json
{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "outDir": ".build",
    "strict": true
  },
  "include": [
    "src/**/*"
  ]
}
 
// src/index.ts
import express from 'express';
 
const app = express();
const port = 3000;
 
app.get('/', (req, res) => {
  res.send('Hello World!');
});
 
app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

在这个模板中，我们配置了一个简单的Express服务器，并定义了几个npm脚本来编译和运行我们的TypeScript代码。这个模板提供了Node.js和Express入门所需的基础，同时利用了TypeScript的优势，如类型检查和编译时的错误捕捉。

- 阅读更多 -

【Node.js】初识 Node.js

System

2024-08-12

所有,nodejs

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它使得 JavaScript 代码能够在服务器端运行。Node.js 的事件驱动、非阻塞 I/O 模型使其适合于高并发和低延迟的 Real-Time Web 应用程序。

以下是一个简单的 Node.js 应用程序示例，它创建了一个 HTTP 服务器，并在浏览器访问这个服务器时，返回 "Hello World" 消息。




// 引入 Node.js 的 http 模块
const http = require('http');
 
// 创建 HTTP 服务器并定义响应逻辑
const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' }); // 设置 HTTP 响应头
  res.end('Hello World\n'); // 发送响应内容
});
 
// 设置服务器监听端口
const PORT = 3000;
server.listen(PORT, () => {
  console.log(`服务器运行在 http://localhost:${PORT}/`);
});

要运行这段代码，你需要有 Node.js 环境。如果你还没有安装 Node.js，可以从 Node.js 官网下载并安装。安装完成后，保存上述代码到一个文件中，例如 app.js，然后在命令行中运行 node app.js，你的 HTTP 服务器将会启动，并且在浏览器中访问 http://localhost:3000 时，你会看到 "Hello World" 的输出。

System

2024-08-12

所有,ajax

由于Thymeleaf和Vue.js是两个不同的模板引擎，并且它们各自处理的是不同的视图层面（Vue.js主要用于前端动态内容渲染，而Thymeleaf主要用于服务端的静态HTML模板渲染），因此，将它们混合使用可能会导致一些混淆。

如果你想要创建一个注册登录页面，并希望使用Vue.js来提升用户体验，那么你可以选择仅使用Vue.js来处理前端的视图渲染，并通过Ajax向后端发送请求。

以下是一个简单的例子，展示如何使用Vue.js和Ajax来实现注册和登录功能：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Registration and Login</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- Registration Form -->
        <form v-if="!loggedIn">
            <input type="text" v-model="user.username" placeholder="Username">
            <input type="password" v-model="user.password" placeholder="Password">
            <button @click="register">Register</button>
        </form>
 
        <!-- Login Form -->
        <form v-if="!loggedIn">
            <input type="text" v-model="user.username" placeholder="Username">
            <input type="password" v-model="user.password" placeholder="Password">
            <button @click="login">Login</button>
        </form>
 
        <!-- Logout Button -->
        <button v-if="loggedIn" @click="logout">Logout</button>
    </div>
 
    <script>
        new Vue({
            el: '#app',
            data: {
                user: {
                    username: '',
                    password: ''
                },
                loggedIn: false
            },
            methods: {
                register() {
                    // Send a POST request to the server to register the user
                    fetch('/register', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(this.user)
                    }).then(response => response.json())
                    .then(data => {
                        if (data.loggedIn) {
                            this.loggedIn = true;
                        }
                    });
                },
                login() {
                    // Send a POST request to the server to login the user
                    fetch('/login', {
                        method: 'POST',
                        headers:

- 阅读更多 -

【js】js多线程解决方案Web Worker简单说明与实例演示：

System

2024-08-12

所有,javascript




// 主线程文件 main.js
// 创建并使用 Web Worker
 
// 检查浏览器是否支持 Web Worker
if (typeof Worker !== 'undefined') {
  // 创建一个新的 Web Worker
  const worker = new Worker('worker.js'); // 'worker.js' 是 Web Worker 脚本文件
 
  // 向 Web Worker 发送数据
  worker.postMessage({ msg: 'Hello, Web Worker!' });
 
  // 接收 Web Worker 发送回来的数据
  worker.onmessage = function(event) {
    console.log('Received message from worker:', event.data);
  };
 
  // 监听 Web Worker 的错误
  worker.onerror = function(error) {
    console.error('Error from worker:', error);
  };
 
  // 当 Web Worker 处理完毕后，会自动关闭。
  // 如果需要提前关闭 Web Worker，可以使用 worker.terminate() 方法。
} else {
  console.log('Your browser doesn\'t support Web Workers.');
}




// Web Worker 文件 worker.js
// 这是 Web Worker 的代码，它在一个单独的线程中运行
 
// 处理消息
onmessage = function(event) {
  // 在这里处理接收到的消息
  console.log('Message from main script:', event.data.msg);
 
  // 执行一些计算任务...
 
  // 发送消息回主线程
  postMessage({ result: 'Processed data in Web Worker' });
};
 
// 当 Web Worker 处理完毕后，会自动关闭。
// 如果需要提前关闭 Web Worker，可以在主线程使用 worker.terminate() 方法。

以上代码演示了如何在主线程中创建并使用一个 Web Worker。主线程发送消息给 Worker，Worker 处理完毕后再将结果发送回主线程。这样可以在不阻塞用户界面的前提下执行耗时任务。

- 阅读更多 -

Js实现任意位置缩放图片，深入理解背后原理

System

2024-08-12

所有,javascript

在JavaScript中实现任意位置缩放图片，通常涉及到事件监听和计算。以下是一个简单的实现示例：

HTML部分：




<img id="image" src="path/to/your/image.jpg" alt="Resizable Image" />
<div id="handles">
  <div class="handle e">e</div>
  <div class="handle s">s</div>
  <div class="handle w">w</div>
  <div class="handle n">n</div>
  <div class="handle ne">ne</div>
  <div class="handle se">se</div>
  <div class="handle sw">sw</div>
  <div class="handle nw">nw</div>
</div>

CSS部分：




#image {
  position: absolute;
  cursor: move;
}
#handles {
  position: absolute;
  z-index: 10;
}
.handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #ccc;
  font-size: 12px;
  color: #fff;
  line-height: 10px;
  text-align: center;
  cursor: nwse-resize;
  z-index: 100;
}
/* Define the positions of the resize handles */
.handle.e { top: 0; right: 0; }
.handle.s { bottom: 0; right: 0; }
.handle.w { top: 0; left: 0; }
.handle.n { top: 0; left: 0; }
.handle.ne { top: 0; right: 0; }
.handle.se { bottom: 0; right: 0; }
.handle.sw { bottom: 0; left: 0; }
.handle.nw { top: 0; left: 0; }

JavaScript部分：




const image = document.getElementById('image');
const handles = document.querySelectorAll('#handles .handle');
let isResizing = false;
let startX, startY, startWidth, startHeight;
 
handles.forEach(handle => {
  handle.addEventListener('mousedown', function(e) {
    e.preventDefault();
    isResizing = true;
 
    startX = e.clientX;
    startY = e.clientY;
    startWidth = parseInt(image.width, 10);
    startHeight = parseInt(image.height, 10);
 
    document.addEventListener('mousemove', resize);
    document.addEventListener('mouseup', stopResize);
  });
});
 
function resize(e) {
  if (isResizing) {
    const deltaX = e.clientX - startX;
    const deltaY = e.clientY - startY;
 
    // Resize according to the handle position
    switch (this.className) {
      case 'handle e':
        image.width = startWidth + deltaX;
        break;
      case 'handle s':
        image.height = startHeight + deltaY;
        break;
      case 'handle w':
        image.width = startWidth - deltaX;
        image.style.left = s

- 阅读更多 -