标签 Javascript 下的文章

抽签抽奖小程序小工具（jquery+html）只需浏览器运行xlsx.core.min.js

2024-08-12

要在浏览器中运行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

- 阅读更多 -

Go语言的JSON包与数据解析

System

2024-08-12

所有,golang




package main
 
import (
    "encoding/json"
    "fmt"
    "log"
)
 
// 定义一个结构体来映射JSON数据
type Person struct {
    Name string `json:"name"`
    Age  int    `json:"age"`
}
 
func main() {
    // 创建一个Person实例
    person := Person{
        Name: "Alice",
        Age:  30,
    }
 
    // 将Person实例编码为JSON
    jsonData, err := json.Marshal(person)
    if err != nil {
        log.Fatalf("JSON marshaling failed: %s", err)
    }
    fmt.Printf("JSON Data: %s\n", jsonData)
 
    // 解码JSON数据到Person结构体实例
    var decodedPerson Person
    if err := json.Unmarshal(jsonData, &decodedPerson); err != nil {
        log.Fatalf("JSON unmarshaling failed: %s", err)
    }
    fmt.Printf("Decoded Person: %+v\n", decodedPerson)
}

这段代码首先定义了一个Person结构体，用来映射JSON数据中的name和age字段。然后创建了一个Person实例，并使用json.Marshal函数将其编码为JSON。接着，它使用json.Unmarshal函数将JSON数据解码回Person结构体实例。这个过程展示了如何在Go语言中处理JSON数据的基本方法。

- 阅读更多 -

jQuery.dad.js：简单而强大的拖放插件！

System

2024-08-12

所有,jquery

jQuery.dad.js 是一个用于创建可拖放界面元素的 jQuery 插件。以下是如何使用该插件的基本示例：

首先，确保在您的 HTML 文档中包含了 jQuery 库和 jQuery.dad.js 插件。




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="path/to/jquery.dad.js"></script>

然后，在您的脚本中初始化插件：




$(document).ready(function() {
    $('.draggable').dad();
});

在 HTML 中，您需要将您想要能够拖动的元素的类设置为 draggable：




<div class="draggable">我是可以拖动的元素</div>

这样就设置好了一个简单的拖放功能。jQuery.dad.js 提供了许多选项来自定义拖放的行为，例如限制拖动区域、设置回调函数等。您可以查看 jQuery.dad.js 的官方文档来了解更多详细的选项和方法。

- 阅读更多 -

[Js进阶]如何用jquery获取到shadowRoot里的内容

System

2024-08-12

所有,jquery

在jQuery中，你可以使用.contents()方法来获取元素内部的所有内容，包括shadow DOM中的内容。但是，由于shadow DOM的特性，你需要首先通过.get(0)或.prop('shadowRoot')获取到shadow DOM的根节点，然后再对其进行操作。

以下是一个示例代码，展示如何使用jQuery获取shadow DOM内的内容：




// 假设有一个宿主元素，它拥有一个shadow DOM
const hostElement = $('#hostElement');
 
// 获取shadow DOM的根节点
const shadowRoot = hostElement.get(0).shadowRoot;
 
// 获取shadow DOM中的内容
const shadowContent = $(shadowRoot).contents();
 
// 现在你可以对shadowContent进行操作了，例如查找特定的元素
const someElementInShadowDom = $(shadowContent).find('#someElementInShadowDom');

请注意，这里的$('#hostElement')是宿主元素的jQuery选择器。$('#someElementInShadowDom')是你希望在shadow DOM内部查找的元素的ID。

确保宿主元素已经存在于DOM中，并且它拥有shadow DOM，否则shadowRoot可能是null。如果你的页面中有多个shadow DOM，你可能需要更具体的选择器来定位到正确的宿主元素。

- 阅读更多 -