1. 首页
  2. 标签
  3. Javascript
实操：Dropzone.js实现文件上传
System
2024-08-09
所有,javascript



<!DOCTYPE html>
<html>
<head>
    <title>Dropzone.js 文件上传示例</title>
    <link rel="stylesheet" href="path/to/dropzone.css" type="text/css" />
</head>
<body>
 
<form action="/file-upload" class="dropzone">
    <div class="fallback">
        <input name="file" type="file" multiple />
    </div>
</form>
 
<script src="path/to/dropzone.js"></script>
<script>
    Dropzone.options.myAwesomeDropzone = { // myAwesomeDropzone是上传表单的CSS类名
        paramName: "file", // 服务器接收文件的参数名
        maxFilesize: 2, // 文件最大体积，单位为MB
        acceptedFiles: ".jpg,.jpeg,.png,.gif", // 允许上传的文件类型
        init: function() {
            this.on("addedfile", function(file) {
                // 文件添加时的操作
            });
            this.on("success", function(file, response) {
                // 文件上传成功后的操作
                // response是服务器返回的响应数据
            });
            this.on("error", function(file, response) {
                // 文件上传出错时的操作
            });
        }
    };
</script>
 
</body>
</html>

在这个示例中，我们创建了一个简单的HTML页面，包含了Dropzone.js的样式和脚本引用。我们还定义了一个Dropzone.options对象来配置Dropzone的行为，包括文件的参数名、最大体积、接受的文件类型以及文件添加、成功、错误时的回调函数。这个示例提供了一个基本框架，开发者可以根据自己的需求进行功能的扩展和配置。

- 阅读更多 -
JS 中常见的七种获取元素的方法
System
2024-08-09
所有,javascript

在JavaScript中，获取页面元素常用的方法有以下七种：

  1. document.getElementById(id)：通过元素的ID获取一个元素。
  2. document.getElementsByClassName(className)：通过元素的类名获取一组元素。
  3. document.getElementsByTagName(tagName)：通过元素的标签名获取一组元素。
  4. document.querySelector(selector)：通过CSS选择器获取第一个匹配的元素。
  5. document.querySelectorAll(selector)：通过CSS选择器获取所有匹配的元素。
  6. document.getElementsByName(name)：通过元素的name属性获取一组元素（通常用于<input>和<button>等表单元素）。
  7. document.body：获取<body>元素。

示例代码：




// 通过ID获取元素
var elementById = document.getElementById('myElement');
 
// 通过类名获取元素集合
var elementsByClassName = document.getElementsByClassName('myClass');
 
// 通过标签名获取元素集合
var elementsByTagName = document.getElementsByTagName('div');
 
// 通过CSS选择器获取第一个匹配的元素
var elementByQuery = document.querySelector('.myClass');
 
// 通过CSS选择器获取所有匹配的元素集合
var elementsByQueryAll = document.querySelectorAll('p.myClass');
 
// 通过name属性获取元素集合
var elementsByName = document.getElementsByName('myName');
 
// 获取body元素
var bodyElement = document.body;
- 阅读更多 -
bpmn.js一个基于Bpmn 2.0的前端工作流展示和绘制工具
System
2024-08-09
所有,javascript

bpmn.js是一个基于BPMN 2.0规范的前端图表库，它可以用来显示和创建BPMN(Business Process Model and Notation)图表。

以下是一些使用bpmn.js的基本示例：

  1. 安装bpmn-js：



npm install bpmn-js
  1. 在Vue项目中使用bpmn-js：



<template>
  <div ref="container"></div>
</template>
 
<script>
import BpmnModeler from 'bpmn-js/lib/Modeler';
 
export default {
  name: 'BpmnViewer',
  data() {
    return {
      modeler: null,
    };
  },
  mounted() {
    this.createNewDiagram();
  },
  methods: {
    createNewDiagram() {
      const container = this.$refs.container;
      this.modeler = new BpmnModeler({
        container: container,
      });
 
      this.modeler.createDiagram().then(() => {
        // 创建图表后的操作
      }).catch(err => {
        // 错误处理
        console.error('创建图表时发生错误:', err);
      });
    },
  },
};
</script>
  1. 加载现有的BPMN图表：



this.modeler.importXML(xmlString).then(result => {
  // 成功导入图表后的操作
}).catch(err => {
  // 错误处理
  console.error('导入图表时发生错误:', err);
});
  1. 导出BPMN图表为XML：



this.modeler.saveXML({ format: true }).then(({ xml }) => {
  // xml是导出的BPMN图表的XML字符串
}).catch(err => {
  // 错误处理
  console.error('导出图表时发生错误:', err);
});

以上代码展示了如何在Vue项目中安装和使用bpmn-js来创建、加载和导出BPMN图表。bpmn.js还支持更多高级功能，如事件监听、自定义渲染等，可以根据具体需求进行使用。

- 阅读更多 -
0JS实现：数组两数之和算法的两种解决方案(一步一步剖析，很详细)
System
2024-08-09
所有,javascript



// 方法一：暴力法
var twoSum = function(nums, target) {
    var len = nums.length;
    for (var i = 0; i < len; i++) {
        for (var j = i + 1; j < len; j++) {
            if (nums[i] + nums[j] == target) {
                return [i, j];
            }
        }
    }
    return [];
};
 
// 方法二：哈希表
var twoSum = function(nums, target) {
    var map = {};
    for (var i = 0; i < nums.length; i++) {
        var complement = target - nums[i];
        if (map[complement] !== undefined) {
            return [i, map[complement]];
        }
        map[nums[i]] = i;
    }
    return [];
};
- 阅读更多 -
移动端html5页面,用js禁止弹出软键盘输入法
System
2024-08-09
所有,javascript

在移动端HTML5页面中，可以通过设置输入框的inputmode属性为"none"来阻止软键盘弹出输入法。但请注意，这个属性并不保证能够完全阻止软键盘的弹出，因为这取决于设备的软键盘实现和浏览器支持。

以下是一个简单的HTML输入框示例，它设置了inputmode="none"属性：




<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>禁用软键盘输入法示例</title>
</head>
<body>
<input type="text" inputmode="none" placeholder="此输入框不会弹出软键盘输入法">
</body>
</html>

在这个例子中，无论用户点击这个输入框，软键盘通常不会出现，除非设备的浏览器或系统的安全设置允许特定的输入法。

- 阅读更多 -
JS中各类型文件(ArrayBuffer、File、Blob、DataURL、OjectURL、canvas )转换方式汇总
System
2024-08-09
所有,javascript



// 假设我们有一个ArrayBuffer对象
let arrayBuffer = new ArrayBuffer(8);
 
// 将ArrayBuffer转换为Blob
let blobFromArrayBuffer = new Blob([arrayBuffer]);
 
// 如果先有一个File对象
let file = new File(["text"], "filename.txt", { type: "text/plain" });
 
// 将File对象转换为ArrayBuffer
file.arrayBuffer().then(arrayBuffer => {
  console.log(arrayBuffer);
});
 
// 将Blob转换为ArrayBuffer
blobFromArrayBuffer.arrayBuffer().then(arrayBuffer => {
  console.log(arrayBuffer);
});
 
// 将ArrayBuffer转换为DataURL
let dataUrl = URL.createObjectURL(new Blob([arrayBuffer]));
 
// 将ArrayBuffer转换为Canvas
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let imageData = ctx.createImageData(arrayBuffer.byteLength, 1);
imageData.data.set(new Uint8Array(arrayBuffer));
ctx.putImageData(imageData, 0, 0);
 
// 将Canvas转换为Blob
canvas.toBlob(blob => {
  console.log(blob);
});
 
// 注意：ObjectURL和DataURL通常是相对于特定数据类型的，
// 所以需要根据具体情况选择合适的转换方法。

这段代码展示了如何在不同数据类型之间转换数据，包括从ArrayBuffer开始，通过创建Blob，File，DataURL，Canvas，最后又回到Blob。注意，实际应用中可能需要考虑错误处理和异步流程控制。

- 阅读更多 -
JS小游戏-像素鸟#源码#Javascript
System
2024-08-09
所有,javascript

由于原始代码较长，我们将提供核心函数的示例，这些函数用于初始化游戏设置、创建新的鸟群和处理鸟的更新。




// 初始化设置
function setup() {
    createCanvas(windowWidth, windowHeight);
    colorMode(HSB, 100);
    initBirds();
}
 
// 创建鸟群
function initBirds() {
    for (let i = 0; i < popSize; i++) {
        birds.push(new Bird());
    }
}
 
// 鸟的更新函数
function updateBirds() {
    for (let i = birds.length - 1; i >= 0; i--) {
        birds[i].update();
        if (birds[i].dead()) {
            birds.splice(i, 1);
        }
    }
}
 
// 绘制函数
function draw() {
    background(0);
    updateBirds();
    for (let b of birds) {
        b.draw();
    }
}

这个代码示例展示了如何初始化画布、设置颜色模式、创建新的鸟群对象，以及如何更新和绘制这些对象。这是一个简化的版本，用于展示如何在像素风格的游戏中管理和更新一组对象。

- 阅读更多 -
Three.js——tween动画、光线投射拾取、加载.obj/.mtl外部文件、使用相机控制器
System
2024-08-09
所有,javascript

以下是使用Three.js进行开发时可能会用到的一些功能的代码示例：

  1. tween动画：



// 假设已有对象object3D
let tween = new TWEEN.Tween(object3D.position).to({ x: 100, y: 200, z: 300 }, 1000);
tween.onUpdate(function() {
    // 更新对象位置
});
tween.start();
  1. 光线投射拾取：



// 设置相机和场景
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
 
function onMouseClick(event) {
    // 将鼠标位置转换成归一化设备坐标(-1 到 +1)
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
    // 使用相机和鼠标位置更新射线
    raycaster.setFromCamera(mouse, camera);
 
    // 计算物体和射线的交点
    let intersects = raycaster.intersectObjects(scene.children);
 
    for (let i = 0; i < intersects.length; i++) {
        // 处理交点信息
        console.log(intersects[i].object.name); // 输出碰撞的对象名称
    }
}
 
// 绑定鼠标点击事件
document.addEventListener('click', onMouseClick, false);
  1. 加载.obj/.mtl外部文件：



let onProgress = function (xhr) {
    if (xhr.lengthComputable) {
        // 可计算加载进度
        console.log((xhr.loaded / xhr.total * 100) + '%');
    }
};
 
let onError = function (xhr) {
};
 
let manager = new THREE.LoadingManager();
manager.addHandler(/\.dds$/i, new THREE.DDSLoader());
 
let textureLoader = new THREE.TextureLoader(manager);
let materialLoader = new THREE.MTLLoader(manager);
materialLoader.setTextureLoader(textureLoader);
materialLoader.load('path/to/your/material.mtl', function (materials) {
    // 加载.mtl文件后的回调函数
    let objLoader = new THREE.OBJLoader(manager);
    objLoader.setMaterials(materials);
    objLoader.load('path/to/your/model.obj', function (object) {
        // 加载.obj文件后的回调函数
        scene.add(object);
    }, onProgress, onError);
});
  1. 使用相机控制器：



// 导入相机控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
// 创建相机控制器实例
let controls = new OrbitControls(camera, renderer.domElement);
 
// 设置控制器选项
controls.enableDamping = true;
 
// 更新相机控制器
function animate() {
    requestAnimationFrame(animate);
 
    // 更新控制器
    controls.update();
 
    // 渲染场景
    renderer.render(scene, camera);
}
 
// 启动动画循环
animate();

这些代码示例展示了如何在Three.js中使用Tween动画库进行对象位置的更新，如何使用光线投射拾取与场景中对象的交互，以及如何加载外部的.obj和.mtl模型文件和使用相机控制器来提升用户交互体验。

- 阅读更多 -
Three.js加载压缩模型-Draco压缩（1.0）
System
2024-08-09
所有,javascript

在Three.js中加载Draco压缩的3D模型，你需要使用THREE.DRACOLoader。以下是一个加载Draco压缩模型的示例代码：




import * as THREE from 'three';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
 
// 创建场景、摄像机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建DRACOLoader
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('path/to/draco/gltf/decoders/'); // 设置Decoder路径
dracoLoader.setDecoderConfig({ type: 'js' }); // 设置Decoder配置
dracoLoader.load('path/to/draco/compressed/model.drc', function (geometry) {
    geometry.center(); // 可选：将模型的中心设置为原点
 
    // 创建材质和网格
    const material = new THREE.MeshStandardMaterial({ color: 0xffffff });
    const mesh = new THREE.Mesh(geometry, material);
 
    // 将网格添加到场景
    scene.add(mesh);
 
    // 渲染循环
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();
});

确保替换path/to/draco/gltf/decoders/和path/to/draco/compressed/model.drc为实际的Decoder路径和压缩模型文件路径。这段代码首先创建了Three.js场景、摄像机和渲染器，然后初始化DRACOLoader并加载Draco压缩的模型，最后将模型添加到场景中并启动渲染循环。

- 阅读更多 -
在JS（JavaScript）中，常见的点击事件（click）修饰符
System
2024-08-09
所有,javascript

在JavaScript中，"click"事件是一个常见的事件修饰符，用于处理鼠标点击操作。它是DOM级别的事件，当用户用鼠标左键点击HTML元素时触发。

以下是如何使用JavaScript中的"click"事件修饰符的一些示例：

  1. 使用addEventListener方法添加点击事件：



document.getElementById("myButton").addEventListener("click", function(){
    alert("按钮被点击了！");
});

在这个例子中，我们使用addEventListener方法为id为"myButton"的元素添加了一个点击事件。当按钮被点击时，会弹出一个警告框。

  1. 使用onclick属性直接添加点击事件：



document.getElementById("myButton").onclick = function() {
    alert("按钮被点击了！");
};

在这个例子中，我们直接使用HTML元素的onclick属性为其添加了一个点击事件。当按钮被点击时，会弹出一个警告框。

  1. 使用jQuery添加点击事件：



$("#myButton").click(function() {
    alert("按钮被点击了！");
});

在这个例子中，我们使用jQuery的click方法为id为"myButton"的元素添加了一个点击事件。当按钮被点击时，会弹出一个警告框。

注意：在使用JavaScript或jQuery时，你需要确保文档已经完全加载，才能正确地为元素添加事件。这通常通过将代码放在一个ready函数中来实现，例如在jQuery中使用$(document).ready()，或者在纯JavaScript中使用window.onload事件。

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