1. 首页
  2. 标签
  3. Javascript
Mapbox GL JS 中文文档
System
2024-08-15
所有,javascript

Mapbox GL JS 是一个用于创建交互式地图的开源JavaScript库。由于Mapbox GL JS官方文档主要以英文提供，中文资料相对较少，我们可以通过翻译官方文档来帮助开发者更好地理解和使用Mapbox GL JS。

以下是一个简单的Mapbox GL JS的示例代码，展示了如何在网页上创建一个基本的交互式地图：




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Mapbox GL JS 地图示例</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css" rel="stylesheet" />
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN'; // 替换为你的Mapbox访问令牌
    var map = new mapboxgl.Map({
        container: 'map', // 地图容器的id
        style: 'mapbox://styles/mapbox/streets-v11', // 地图样式
        center: [116.4073963, 39.9041999], // 地图中心点坐标
        zoom: 11 // 地图缩放级别
    });
</script>
</body>
</html>

在这个示例中，你需要替换YOUR_ACCESS_TOKEN为你自己的Mapbox访问令牌，获取方式可以在Mapbox官网注册账号后获得。

如果你想要查看中文资源，可以考虑参考Mapbox官方文档的中文翻译版本，但请注意，由于翻译通常是由社区贡献者完成的，可能无法及时反映最新的信息。如果需要最新和最准确的信息，请直接参考官方英文文档。

- 阅读更多 -
[JavaScript游戏开发] 绘制Q版地图、键盘上下左右地图场景切换
System
2024-08-15
所有,javascript



// 假设我们已经有了一个HTML5 Canvas元素和相关的ctx绘图上下文
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
 
// 地图数据，这里使用二维数组表示每个方格是否可以通行
var mapData = [
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 1, 1, 1, 1, 0, 1],
    [1, 0, 1, 0, 0, 1, 0, 1],
    [1, 0, 1, 1, 1, 1, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 1, 1, 1, 1, 1, 1, 1]
];
 
// 地图的大小
var mapWidth = 8;
var mapHeight = 7;
 
// 地图的单元格大小
var cellSize = 32;
 
// 绘制地图
function drawMap() {
    for (var y = 0; y < mapHeight; y++) {
        for (var x = 0; x < mapWidth; x++) {
            if (mapData[y][x] === 1) {
                ctx.fillStyle = '#333'; // 绘制为深灰色的方块
                ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
            }
        }
    }
}
 
// 键盘按键处理
document.addEventListener('keydown', function(event) {
    var keyCode = event.keyCode;
    switch (keyCode) {
        case 37: // 左键移动视图
            break;
        case 38: // 上移动视图
            break;
        case 39: // 右键移动视图
            break;
        case 40: // 下移动视图
            break;
    }
});
 
// 调用函数绘制地图
drawMap();

这个代码示例展示了如何使用JavaScript和HTML5 Canvas来绘制一个简单的Q版地图，并且通过键盘的上下左右按键来控制地图场景的移动。代码中包含了绘制地图的函数drawMap和键盘按键的事件监听器，但没有实现实际的场景移动逻辑，因为这个逻辑取决于具体的游戏设计和上下文。

- 阅读更多 -
如何在Vue3中使用音频库Howler.js实现音频播放？
System
2024-08-15
所有,javascript

在Vue 3中使用Howler.js来实现音频播放，你需要首先安装Howler.js库，然后在你的Vue组件中引入并使用它。以下是一个简单的例子：

  1. 安装Howler.js：



npm install howler
  1. 在Vue组件中使用Howler.js：



<template>
  <div>
    <button @click="playAudio">播放音频</button>
  </div>
</template>
 
<script>
import { defineComponent } from 'vue';
import { Howl } from 'howler';
 
export default defineComponent({
  setup() {
    const audio = new Howl({
      src: ['your-audio-file.mp3'],
      html5: true,
      format: ['mp3']
    });
 
    const playAudio = () => {
      audio.play();
    };
 
    return { playAudio };
  },
});
</script>

在这个例子中，我们首先导入了Howl类。然后在setup函数中，我们创建了一个Howl实例，指定了音频文件路径和格式。playAudio方法通过调用Howl实例的play方法来播放音频。在模板中，我们添加了一个按钮，当点击时会调用playAudio方法。

- 阅读更多 -
vue3+vite+js 实现移动端，PC端响应式布局
System
2024-08-15
所有,javascript

在Vue 3和Vite的组合中实现移动端和PC端的响应式布局，可以使用CSS的媒体查询来定义不同屏幕尺寸下的样式，并结合Vue的指令来动态调整DOM。

以下是一个简单的例子：

  1. 安装Vue 3和Vite:



npm create vite@latest my-vue-app --template vue-ts
cd my-vue-app
npm install
  1. 在src/App.vue中编写响应式布局的组件:



<template>
  <div class="container">
    <header>Header</header>
    <main>
      <aside>Side Content</aside>
      <article>Main Content</article>
    </main>
    <footer>Footer</footer>
  </div>
</template>
 
<script setup lang="ts">
// No script needed for basic layout
</script>
 
<style>
.container {
  display: flex;
  flex-direction: column;
}
 
header, footer {
  text-align: center;
  padding: 1rem 0;
}
 
main {
  display: flex;
  flex: 1;
}
 
aside {
  width: 200px; /* 固定宽度或百分比 */
  background-color: #f2f2f2;
}
 
article {
  flex: 1;
  background-color: #e2e2e2;
}
 
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
 
  main {
    flex-direction: column;
  }
 
  aside, article {
    width: 100%;
    max-width: 100%;
  }
}
</style>

在上述代码中，.container是一个flex容器，用于组织页面的结构。header和footer保持在页面顶部和底部，而main部分包含侧边栏和主内容。媒体查询@media (max-width: 768px)用于在屏幕宽度小于768像素时改变布局，使侧边栏和主内容在移动端上占据全部宽度。

在实际应用中，你可能需要使用Vue的指令来根据屏幕宽度动态切换布局（例如使用v-if或v-show来控制移动端和PC端的显示），但上述代码提供了一个响应式的基础布局示例。

- 阅读更多 -
【Node.js】WebSocket 全面解析+实战演练——（Nodejs实现简易聊天室）
System
2024-08-15
所有,javascript



// 导入WebSocket库
const WebSocket = require('ws');
 
// 初始化WebSocket服务器实例
const wss = new WebSocket.Server({ port: 8080 });
 
// 监听连接事件
wss.on('connection', function connection(ws) {
  // 监听消息事件
  ws.on('message', function incoming(message) {
    // 广播消息到所有连接的客户端
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
 
  // 监听关闭连接事件
  ws.on('close', function close() {
    console.log('连接已关闭！');
  });
 
  // 监听错误事件
  ws.on('error', function error(e) {
    console.log('发生错误:', e);
  });
});
 
console.log('WebSocket服务器运行在 ws://localhost:8080');

这段代码使用了Node.js的ws库来创建一个简单的WebSocket服务器。服务器监听8080端口的连接，并将接收到的消息广播给所有其他的连接的客户端。同时，它还处理了关闭连接和错误事件。这是一个实战级的WebSocket实现，适合用于教学和实际应用的原型设计。

- 阅读更多 -
20个基于Three.js的代码示例
System
2024-08-15
所有,javascript

以下是20个基于Three.js的代码示例，涵盖了创建3D场景、添加几何体、添加材质和纹理、添加灯光以及动画等常见的3D场景元素。

  1. 创建一个简单的3D立方体:



// 创建场景
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);
 
// 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
camera.position.z = 5;
 
const animate = function () {
  requestAnimationFrame(animate);
 
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
 
  renderer.render(scene, camera);
};
 
animate();
  1. 创建一个带有纹理的3D球体:



// 加载纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');
 
// 创建材质
const material = new THREE.MeshBasicMaterial({map: texture});
const sphereGeometry = new THREE.SphereGeometry(1, 20, 20);
const sphere = new THREE.Mesh(sphereGeometry, material);
scene.add(sphere);
  1. 添加环境光和点光源:



// 环境光
scene.add(new THREE.AmbientLight(0x404040));
 
// 点光源
const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(10, 0, 25);
scene.add(pointLight);
  1. 使用OBJLoader加载复杂的3D模型:



const objLoader = new THREE.OBJLoader();
objLoader.load('path/to/model.obj', 'path/to/model.mtl', function (object) {
  scene.add(object);
});
  1. 添加鼠标旋转控制:



new THREE.OrbitControls(camera);
  1. 添加简单的动画:



function animate() {
  requestAnimationFrame(animate);
 
  // 旋转立方体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
 
  renderer.render(scene, camera);
}
  1. 使用GUI库添加可配置参数:



// 创建GUI
const gui = new dat.GUI();
gui.add(scene, 'fog').name('Fog');
gui.addColor(scene, 'background').name('Background Color');
  1. 使用Post Processing添加后处理效果:



const renderPass = new THREE.RenderPass(scene, camera);
const effectPass = new THREE.ShaderPass(THREE.DigitalGlitch);
effectPass.uniforms['duration'].value = 2.0;
effectPass.uniforms['strength'].value = 1.5;
 
const composer = new THREE.EffectComposer(renderer);
composer.addPass(renderPass);
composer.addPass(effectPass);
- 阅读更多 -
Node JS 模块：使用 npm install 安装包
System
2024-08-15
所有,javascript

在Node.js中，您可以使用npm（Node Package Manager）来安装包。以下是如何使用npm安装包的步骤：

  1. 打开命令行工具（例如终端、命令提示符或PowerShell）。
  2. 导航到您的项目目录（其中包含您的package.json文件）。
  3. 运行以下命令来安装一个包：



npm install <package_name>

将<package_name>替换为您想要安装的包的名称。

例如，如果您想要安装express这个流行的Node.js web应用框架，您会运行：




npm install express

默认情况下，这将安装最新版本的包。如果您想要安装特定版本的包，可以这样做：




npm install <package_name>@<version>

例如，安装express的4.17.1版本：




npm install express@4.17.1

如果您想要将安装的包保存到您的项目依赖中，可以添加--save选项：




npm install <package_name> --save

这将在您的package.json文件的dependencies部分添加该包。

如果您想要将包安装为开发依赖项（仅在开发过程中使用），可以使用--save-dev选项：




npm install <package_name> --save-dev

这将在package.json文件的devDependencies部分添加该包。

- 阅读更多 -
[泛微OA]流程提交弹出需再次确认提醒框js实现方法
System
2024-08-15
所有,javascript

在泛微OA中，如果需要在提交流程时弹出一个需要用户再次确认的提醒框，可以使用JavaScript来实现。以下是一个简单的实现方法：

  1. 在流程的相关页面中，添加一个按钮或链接来触发确认框的弹出。
  2. 使用JavaScript的confirm函数来创建确认框。
  3. 根据用户的选择（确认或取消）来决定是否继续提交流程。

以下是一个简单的示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>确认提交</title>
    <script type="text/javascript">
        function confirmSubmit() {
            var confirmed = confirm("您确定要提交该流程吗？");
            if (confirmed) {
                // 执行提交操作，这里可以是表单提交或其他逻辑
                document.getElementById('yourFormId').submit();
            }
        }
    </script>
</head>
<body>
 
<form id="yourFormId" action="your_form_submit_url">
    <!-- 表单内容 -->
    <input type="button" value="提交" onclick="confirmSubmit()" />
</form>
 
</body>
</html>

在这个例子中，当用户点击按钮时，会触发confirmSubmit函数，该函数会弹出一个确认框。如果用户选择“确定”，则会提交表单；如果用户选择“取消”，则不会执行任何操作。

请注意，这个代码只是一个示例，实际应用时需要根据泛微OA的具体情况进行调整，例如表单的ID、提交的URL以及其他需要的逻辑。

- 阅读更多 -
〖大前端 - 基础入门三大核心之JS篇㉓〗- JavaScript 的「数组」
System
2024-08-15
所有,javascript

在JavaScript中，数组是一种特殊的对象，它能在单个的变量名下存储多个值。

  1. 创建数组



let fruits = ['apple', 'banana', 'cherry'];
  1. 访问数组元素



console.log(fruits[0]); // 输出 'apple'
  1. 更新数组元素



fruits[0] = 'orange';
console.log(fruits[0]); // 输出 'orange'
  1. 在数组末尾添加元素



fruits.push('peach');
console.log(fruits); // 输出 ['orange', 'banana', 'cherry', 'peach']
  1. 删除数组最后一个元素



fruits.pop();
console.log(fruits); // 输出 ['orange', 'banana', 'cherry']
  1. 在数组开头添加元素



fruits.unshift('strawberry');
console.log(fruits); // 输出 ['strawberry', 'orange', 'banana', 'cherry']
  1. 删除数组第一个元素



fruits.shift();
console.log(fruits); // 输出 ['orange', 'banana', 'cherry']
  1. 使用数组的函数方法（例如 map, filter, reduce）



let nums = [1, 2, 3, 4, 5];
let sum = nums.reduce((total, num) => total + num);
console.log(sum); // 输出 15
  1. 使用循环遍历数组



for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
  1. 使用 forEach 方法遍历数组



fruits.forEach(fruit => console.log(fruit));
  1. 使用 for...of 循环遍历数组



for (const fruit of fruits) {
  console.log(fruit);
}
  1. 数组的合并



let moreFruits = ['grape', 'fig'];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits); // 输出 ['orange', 'banana', 'cherry', 'grape', 'fig']
  1. 数组的克隆



let fruitsCopy = fruits.slice();
console.log(fruitsCopy); // 输出 ['orange', 'banana', 'cherry']
  1. 数组元素的搜索



let index = fruits.indexOf('banana');
console.log(index); // 输出 1
  1. 数组元素的排序



let sortedNums = nums.sort((a, b) => a - b);
console.log(sortedNums); // 输出 [1, 2, 3, 4, 5]
  1. 数组的反转



fruits.reverse();
console.log(fruits); // 输出 ['cherry', 'banana', 'orange']
  1. 数组的截取



let partFruits = fruits.slice(1, 3);
console.log(partFruits); // 输出 ['banana', 'cherry']
  1. 数组的转换为字符串



console.log(fruits.join(' - ')); // 输出 'orange - banana - cherry'
  1. 检查数组中是否包含某个元素



console.log(fruits.includes('banana')); //
- 阅读更多 -
JS 将时间戳转换为日期字符串 （5种方法 ）
System
2024-08-15
所有,javascript



// 方法1: 使用 Date 对象和 toLocaleDateString 方法
function timestampToDateString1(timestamp) {
  const date = new Date(timestamp);
  return date.toLocaleDateString();
}
 
// 方法2: 使用 Date 对象和 toDateString 方法
function timestampToDateString2(timestamp) {
  const date = new Date(timestamp);
  return date.toDateString();
}
 
// 方法3: 使用 Date 对象和 Intl.DateTimeFormat 构造函数
function timestampToDateString3(timestamp) {
  const date = new Date(timestamp);
  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  const formatter = new Intl.DateTimeFormat('zh-CN', options);
  return formatter.format(date);
}
 
// 方法4: 使用 Date 对象和自定义函数
function timestampToDateString4(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = date.getMonth() + 1; // 月份是从0开始的
  const day = date.getDate();
  return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
}
 
// 方法5: 使用 Moment.js 库
function timestampToDateString5(timestamp) {
  return moment(timestamp).format('YYYY-MM-DD');
}
 
// 示例
console.log(timestampToDateString1(1609459200000)); // 输出格式依赖于运行环境的地区设置
console.log(timestampToDateString2(1609459200000)); // 同上
console.log(timestampToDateString3(1609459200000)); // 输出: "2021年1月1日"
console.log(timestampToDateString4(1609459200000)); // 输出: "2021-01-01"
// 需要确保已经引入了 Moment.js，然后才能调用 timestampToDateString5 方法
// console.log(timestampToDateString5(1609459200000)); // 输出: "2021-01-01"

在这个示例中，我们定义了5个函数来将时间戳转换为日期字符串，并在最后给出了使用这些函数的示例。注意，方法4使用了原生JavaScript的字符串操作来构造日期字符串，方法5使用了Moment.js库，需要先引入这个库才能使用。

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