分类 javascript 下的文章

2024-08-23




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snowflake Animation</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .snowflake {
    position: fixed;
    background-color: white;
    border-radius: 50%;
    transform: translate(-50%, -100%);
    pointer-events: none;
  }
</style>
</head>
<body>
<script>
  class Snowflake {
    constructor() {
      this.snowflake = document.createElement('div');
      this.snowflake.classList.add('snowflake');
      this.size = Math.random() * 10 + 10;
      this.speed = Math.random() * 2 + 1;
      this.x = Math.random() * window.innerWidth;
      this.y = Math.random() * -window.innerHeight;
      this.snowflake.style.width = `${this.size}px`;
      this.snowflake.style.height = `${this.size}px`;
      document.body.appendChild(this.snowflake);
      this.update();
    }
    update() {
      this.y += this.speed;
      this.snowflake.style.transform = `translate(${this.x}px, ${this.y}px)`;
      if (this.y > window.innerHeight) {
        this.snowflake.remove();
      }
      requestAnimationFrame(() => this.update());
    }
  }
 
  const snowflakes = [];
  for (let i = 0; i < 50; i++) {
    snowflakes.push(new Snowflake());
  }
</script>
</body>
</html>

这段代码创建了一个简单的雪花飘落效果。它使用了JavaScript中的类来构建每个雪花对象，每个对象都有自己的大小、速度和初始位置。每个雪花的CSS类定义了基本的样式，并且JavaScript代码负责更新每个雪花的位置，并移除那些移出屏幕的雪花。这个简单的示例展示了如何用JavaScript和CSS创建交互式动画效果。

- 阅读更多 -

js 进阶 ---剩余参数和arguments对象

System

2024-08-23

所有,javascript

在JavaScript中，我们可以使用...(剩余参数)语法来获取函数的多余参数，并将它们作为一个数组。同时，我们还可以使用arguments对象来访问所有传递给函数的参数。

使用剩余参数




function sum(...values) {
  let sum = 0;
  for (let val of values) {
    sum += val;
  }
  return sum;
}
 
console.log(sum(1, 2, 3)); // 输出：6

在这个例子中，我们定义了一个名为sum的函数，它接受任意数量的参数。我们使用...values语法来获取所有的参数，并将它们作为一个数组。然后我们遍历这个数组并将所有的值加起来，返回最终的总和。

使用arguments对象




function printArgs() {
  console.log(arguments);
}
 
printArgs('Hello', 'World'); // 输出：[Arguments] { '0': 'Hello', '1': 'World' }

在这个例子中，我们定义了一个名为printArgs的函数，它接受任意数量的参数。我们使用arguments对象来访问所有传递给函数的参数。然后我们打印出arguments对象，它是一个类数组对象，包含了所有传递给函数的参数。

注意：剩余参数和arguments对象应该谨慎使用，因为在使用它们时，你可能会忽略参数的顺序，这可能会导致代码的可读性降低。

System

2024-08-23

所有,javascript




// 解法1: 使用UUID生成唯一ID
function generateUUID() {
    var d = new Date().getTime(); //Timestamp
    var d2 = (performance && performance.now && (performance.now()*1000)) || 0; //Time in microseconds since page-load or 0 if unsupported
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16; //random number between 0 and 16
        if(d > 0) { //Use timestamp until depleted
            r = (d + r)%16 | 0;
            d = Math.floor(d/16);
        } else { //Use microseconds since page-load if supported
            r = (d2 + r)%16 | 0;
            d2 = Math.floor(d2/16);
        }
        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
}
 
// 使用
var uniqueId = generateUUID();
console.log(uniqueId);

这段代码使用了一个简化版本的UUID生成方法，它基于当前的时间戳和性能数据生成一个看似随机的字符串，可以用作生成唯一ID。这种方法的优点是不需要外部依赖，但在某些特定环境下可能存在重复的风险。

System

2024-08-23

所有,javascript




// 基类
class Animal {
  name: string;
 
  constructor(name: string) {
    this.name = name;
  }
 
  move(distanceInMeters: number = 0) {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}
 
// 继承自Animal的子类
class Dog extends Animal {
  bark() {
    console.log('Woof!');
  }
}
 
// 使用prototype属性实现继承
function Animal() {
  this.name = 'Animal';
}
 
Animal.prototype.move = function(distanceInMeters: number) {
  console.log(`${this.name} moved ${distanceInMeters}m.`);
};
 
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
 
const dog = new Dog();
dog.name = 'Buddy';
dog.bark = function() { console.log('Woof!'); };
dog.move(10);
 
// 使用call或apply调用父类构造函数
class Cat extends Animal {
  constructor(name: string) {
    super.constructor.call(this, name);
  }
 
  meow() {
    console.log('Meow!');
  }
}
 
const cat = new Cat('Kitty');
cat.move(5);
 
// TypeScript中的extends关键字也可以用于接口继承
interface Animal {
  name: string;
  move: (distanceInMeters: number) => void;
}
 
interface Dog extends Animal {
  bark: () => void;
}
 
// 实现接口
const dog: Dog = {
  name: 'Rex',
  move: (distanceInMeters = 0) => {
    console.log(`${dog.name} moved ${distanceInMeters}m.`);
  },
  bark: () => {
    console.log('Woof!');
  },
};

这个代码示例展示了如何在TypeScript中使用类继承、prototype属性以及call和apply方法来实现继承。同时，也演示了如何在TypeScript中使用接口来实现多态行为。

- 阅读更多 -

基于HTML实现浪漫情人节表白代码（附源代码）

System

2024-08-23

所有,javascript

以下是一个简单的HTML页面示例，用于实现浪漫情人节表白：




<!DOCTYPE html>
<html>
<head>
    <title>情人节表白</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url('background.jpg') no-repeat center center fixed;
            background-size: cover;
            color: white;
            font-family: Arial, sans-serif;
        }
        .heart {
            position: relative;
            width: 200px;
            height: 200px;
            background: url('heart.png') no-repeat center center;
            background-size: cover;
            animation: beat 0.6s infinite;
        }
        @keyframes beat {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }
        .text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="heart">
        <div class="text">
            <h1>我爱你</h1>
            <p>情人节快乐！</p>
        </div>
    </div>
</body>
</html>

在这个示例中，我们使用了CSS动画来实现心跳效果，同时使用了背景图片和背景音乐来增加页面的视觉和听觉效果。需要注意的是，你需要替换heart.png和background.jpg为你自己的图片资源。如果你希望增加听觉元素，可以添加一个<audio>标签来播放音乐。

- 阅读更多 -

js解析.shp文件

System

2024-08-23

所有,javascript

在JavaScript中，没有内置的方法来解析.shp文件，因为.shp文件是一种特定于GIS（地理信息系统）的二进制格式。然而，你可以使用第三方库，如shpjs来解析.shp文件。

以下是使用shpjs解析.shp文件的步骤：

安装shpjs库。




npm install shpjs

在你的JavaScript代码中引入shpjs库。
使用shpjs的API来解析.shp文件。

示例代码：




import { parseShp } from 'shpjs';
 
// 假设你已经通过某种方式获取到了shp文件的ArrayBuffer数据
function fetchShpFile(url) {
  return fetch(url).then(response => response.arrayBuffer());
}
 
fetchShpFile('path/to/your/file.shp')
  .then(arrayBuffer => parseShp(arrayBuffer))
  .then(geoJSON => {
    // 在这里处理解析得到的GeoJSON数据
    console.log(geoJSON);
  })
  .catch(error => {
    console.error('Error parsing SHP file:', error);
  });

请注意，这个例子假设你已经有方法来获取.shp文件的ArrayBuffer。在实际应用中，你可能需要使用fetch或其他方式来获取文件。

shpjs库可能不支持所有.shp文件的特性，如果你的文件包含特殊的或不常见的数据，你可能需要查看库的文档，或者使用其他支持更多特性的库。

- 阅读更多 -

next.js app目录 i18n国际化简单实现

System

2024-08-23

所有,javascript




// next.config.js
const { i18n } = require('./next-i18next.config');
 
module.exports = {
  i18n,
  // 其他配置...
};
 
// next-i18next.config.js
const { i18n } = require('./i18n');
 
module.exports = {
  i18n,
};
 
// i18n.js
module.exports = {
  i18n: {
    // 定义支持的语言列表
    locales: ['en', 'fr', 'es'],
    // 默认语言
    defaultLocale: 'en',
  },
  // 其他配置...
};

这个代码实例展示了如何在Next.js应用中配置i18n国际化支持。首先，在next.config.js中导入并使用next-i18next.config.js中定义的i18n配置。然后，在next-i18next.config.js中导出了一个对象，该对象包含了i18n配置和语言列表。最后，在i18n.js文件中定义了支持的语言列表和默认语言。这样，Next.js应用就可以支持国际化了。

- 阅读更多 -

从零开始NEXT.js——服务器组件

System

2024-08-23

所有,javascript

在NEXT.js中，我们可以使用“服务器组件”来处理需要直接在服务器端执行的逻辑，并将结果传递给客户端。服务器组件是一个以.server.js结尾的文件，它可以导入任何Node.js模块，并且只在服务器端执行。

以下是一个简单的服务器组件示例，它返回当前的服务器时间：




// pages/api/time.server.js
export default async function handler(req, res) {
  const time = new Date().toLocaleTimeString();
  res.send(`当前服务器时间是：${time}`);
}

在客户端，你可以使用fetch函数来获取这个服务器组件的响应：




// pages/index.js
export default function Home() {
  const [serverTime, setServerTime] = useState('');
 
  useEffect(() => {
    fetch('/api/time')
      .then(res => res.text())
      .then(time => setServerTime(time));
  }, []);
 
  return (
    <div>
      <p>服务器时间: {serverTime}</p>
    </div>
  );
}

在这个例子中，服务器组件/pages/api/time.server.js返回服务器的当前时间，然后客户端通过调用这个API，获取并展示服务器时间。这个过程是在服务器端完成的，客户端只负责展示。

- 阅读更多 -

three.js: gltf模型设置发光描边

System

2024-08-23

所有,javascript

在Three.js中，要为GLTF模型设置发光描边，你需要使用MeshLambertMaterial或MeshPhongMaterial作为材质，并将emissive和emissiveIntensity属性设置为使模型发光。然后，你可以使用MeshLine和MeshLineMaterial来描边模型。

以下是一个简单的例子，展示如何为GLTF模型设置发光描边：




import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { MeshLine, MeshLineMaterial } from 'three.meshline';
 
// 创建场景、摄像机和渲染器
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);
 
// 加载GLTF模型
const loader = new GLTFLoader();
loader.load('path/to/your/model.gltf', (gltf) => {
  const model = gltf.scene;
  scene.add(model);
 
  // 设置模型材质发光描边
  model.traverse((child) => {
    if (child.isMesh) {
      const material = new THREE.MeshPhongMaterial({
        color: 0xffffff,
        emissive: 0xffffff, // 设置发光颜色
        emissiveIntensity: 0.5, // 设定发光强度
        side: THREE.DoubleSide, // 两面可见
        transparent: true, // 开启透明
        opacity: 0.75, // 设置透明度
      });
      child.material = material;
 
      // 描边部分
      const geometry = new THREE.EdgesGeometry(child.geometry);
      const outlineMaterial = new MeshLineMaterial({
        color: 0xffffff,
        linewidth: 2,
        transparent: true,
        opacity: 0.8,
        depthTest: false,
      });
      const mesh = new THREE.Mesh(geometry, outlineMaterial);
      child.add(mesh);
    }
  });
}, undefined, (error) => {
  console.error(error);
});
 
camera.position.z = 5;
 
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
 
animate();

在这个例子中，我们首先加载GLTF模型，然后遍历模型的所有网格部分，将它们的材质设置为发光的MeshPhongMaterial。之后，我们使用EdgesGeometry来创建网格的边缘，并使用MeshLineMaterial来描绘这些边缘。通过调整emissive和emissiveIntensity属性，你可以控制模型的发光强度。通过调整linewidth和opacity属性，你可以控制描边的宽度和透明度。

System

2024-08-23

所有,javascript

这个错误通常发生在使用Next.js框架进行开发时，尝试使用动态路由但缺少必要的参数。在Next.js中，如果你在pages目录下定义了一个带有参数的动态路由，例如[id].js，你需要在该文件中提供一个名为getStaticPaths的函数，该函数必须返回一个对象，其paths属性是一个数组，包含了所有预渲染页面的路径和参数，fallback属性则定义了当页面的路由不在paths数组中时的行为。

错误解释：

这个错误表明Next.js在尝试预渲染页面时，因为缺少getStaticPaths函数中的paths数组中需要的静态参数而失败。

解决方法：

定位到引起问题的动态路由页面。
在该页面组件或其父组件中，添加一个名为getStaticPaths的函数。
确保getStaticPaths函数返回一个对象，该对象包含paths和fallback两个属性。
在paths数组中，为每个预期的动态路由参数提供一个对象，包含params和（可选的）props。params对象应该匹配路由参数，props可以是任何预渲染页面时需要的数据。
如果页面可能会根据用户请求而变化，设置fallback: true，并实现一个getStaticProps函数来处理后备的数据获取。

例如：




// 假设你的页面文件是[id].js
export const getStaticPaths = () => {
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } } // 根据实际需要添加更多的路径和参数
    ],
    fallback: false // 或者true，如果你需要使用后备渲染
  };
};
 
export const getStaticProps = ({ params }) => {
  // 根据params获取数据
  return {
    props: {
      // 传递给组件的props
    }
  };
};

确保getStaticPaths返回的paths数组包含了所有预期的动态路由参数，如果设置了fallback: true，还需要实现getStaticProps来处理后备的数据获取。如果你不需要预渲染所有可能的页面，可以使用fallback: true并在getStaticPaths中提供一个fallback函数来实现按需渲染。

- 阅读更多 -