标签 Javascript 下的文章

2024-08-23




// 引入Three.js库
import * as THREE from 'three';
 
// 创建场景
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;
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
 
  // 旋转立方体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
 
  renderer.render(scene, camera);
}
 
animate();

这段代码展示了如何在一个网页中引入Three.js库，并创建一个简单的3D场景，其中包含一个旋转的立方体。这是学习WebGL和Three.js的一个基本示例，对于想要入门3D网页开发的开发者来说，这是一个很好的起点。

- 阅读更多 -

80个HTML5+js小游戏集合

System

2024-08-23

所有,html5

HTML5和JavaScript的结合使得开发者可以创建丰富的网页内容，其中包括游戏。以下是80个HTML5和JavaScript小游戏的集合，它们涵盖了各种类型，包括解决谜题、教育性游戏、游戏编程练习等。

这些游戏可以直接嵌入到你的网站，或者作为独立的网页来运行。

以下是一些游戏的示例：

扫雷游戏




<canvas id="canvas"></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  // 游戏逻辑
</script>

棋盘游戏




<div id="game"></div>
<script>
  var game = document.getElementById('game');
  // 游戏逻辑
</script>

棋盘游戏




<div id="game"></div>
<script>
  var game = document.getElementById('game');
  // 游戏逻辑
</script>

每个游戏都有其独特的代码和逻辑，你可以在其官方提供的链接中找到完整的源代码和演示。

注意：由于这些游戏的数量众多，并且每个游戏都有自己的特点和复杂度，因此无法在一个回答中详细列出所有游戏的代码。如果你需要特定游戏的代码，你应该访问该游戏的官方页面或者源代码库。

- 阅读更多 -

js获取ios安全区域的高度

System

2024-08-23

所有,html5

在iOS设备上，"安全区域"是指屏幕上不会被操作系统视图（如状态栏）覆盖的区域。你可以通过JavaScript和CSS来处理这个问题，使得内容不会被遮挡。

在WebKit中，提供了一个名为"env()"的CSS函数，允许开发者访问环境变量，包括安全区域。然而，这需要在支持的浏览器中使用，并且目前只有Safari支持。

在JavaScript中，你可以使用window的visualViewport属性来获取视口的信息，但是这不会直接告诉你安全区域的高度。不过，你可以通过检测视口的高度与设备屏幕的高度之间的差异来大致估算出安全区域的高度。

以下是一个JavaScript示例代码，用于获取iOS设备上状态栏的高度，这通常是安全区域的高度：




function getStatusBarHeight() {
  // 设备屏幕高度减去视口高度，即为状态栏的高度
  return window.screen.height - window.innerHeight;
}
 
console.log('状态栏高度（大致等同于安全区域高度）:', getStatusBarHeight());

请注意，这个方法不是100%准确的，因为它假设状态栏的高度就是安全区域的高度，这在有些情况下可能不正确。而且，这个方法不考虑顶部的安全区域（如iPhone X及以上机型）和底部的安全区域，只考虑了状态栏的高度。

如果你想要更精确地处理安全区域，可以使用WebKit提供的CSS的"env()"函数，并结合媒体查询来处理不同的设备和屏幕方向。但是，这通常需要结合服务器端的渲染或者JavaScript动态修改CSS的能力。

- 阅读更多 -

js获取图片原始宽高

System

2024-08-23

所有,html5

在JavaScript中，我们可以使用Image对象的naturalWidth和naturalHeight属性来获取图片的原始宽度和高度。下面是两种不同的实现方法：

方法一：




var image = new Image();
image.src = 'image.jpg';
image.onload = function() {
  var width = this.naturalWidth;
  var height = this.naturalHeight;
  console.log('图片的原始宽度：', width);
  console.log('图片的原始高度：', height);
};

方法二：




var image = document.createElement('img');
image.src = 'image.jpg';
image.addEventListener('load', function() {
  var width = this.naturalWidth;
  var height = this.naturalHeight;
  console.log('图片的原始宽度：', width);
  console.log('图片的原始高度：', height);
});

这两种方法都首先创建一个Image对象或img元素，并设置其src属性为要加载的图片的URL。然后，我们使用onload事件或addEventListener方法来监听图片加载完成的事件。在事件处理程序中，我们可以使用this.naturalWidth和this.naturalHeight来获取图片的原始宽度和高度。

- 阅读更多 -

编程笔记 html5&css&js 012 HTML分块

System

2024-08-23

所有,html5

在HTML中，分块通常意味着将页面内容划分为不同的部分，每个部分可以通过HTML元素进行标记。以下是一个简单的HTML分块示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分块示例</title>
    <style>
        .section {
            padding: 20px;
            margin: 10px 0;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="section">
        <h2>第一部分标题</h2>
        <p>第一部分的内容...</p>
    </div>
    <div class="section">
        <h2>第二部分标题</h2>
        <p>第二部分的内容...</p>
    </div>
    <div class="section">
        <h2>第三部分标题</h2>
        <p>第三部分的内容...</p>
    </div>
</body>
</html>

在这个例子中，我们使用了<div>元素来创建分块布局，并通过CSS为.section类添加了边框和内边距。每个<div class="section">都是页面上的一个独立区块。这种方法可以用于构建更复杂的页面结构。

- 阅读更多 -

使用 Next SEO 在 Next.js 中管理 SEO

System

2024-08-23

所有,html5




import Head from 'next/head';
import { NextSeo } from 'next-seo';
 
export default function HomePage() {
  const title = '首页';
  const description = '这是首页的描述。';
 
  return (
    <>
      <NextSeo
        title={title}
        description={description}
        openGraph={{
          title: title,
          description: description,
          url: 'https://yourdomain.com',
          images: [
            {
              url: 'https://yourdomain.com/static/home-image.jpg',
              width: 800,
              height: 420,
              alt: '主页图片',
            },
          ],
        }}
        twitter={{
          handle: '@your_twitter',
          site: '@your_twitter',
          cardType: 'summary_large_image',
        }}
      />
      <Head>
        <meta name="msapplication-TileColor" content="#da532c" />
        <meta name="theme-color" content="#ffffff" />
      </Head>
      {/* 页面其余内容 */}
    </>
  );
}

这个代码实例展示了如何在一个Next.js应用中使用Next SEO来管理页面的SEO信息。我们定义了一个标题和描述，并且配置了Open Graph和Twitter卡片信息。同时，我们添加了两个meta标签来定制Windows平台的标签和设置应用的主题颜色。

- 阅读更多 -

Vue中JSH5移动端调起第三方地图软件(高德、腾讯、百度)

System

2024-08-23

所有,html5

在Vue中调起移动端第三方地图软件，可以通过URL Scheme实现。以下是针对高德、腾讯和百度地图的调用方法：

高德地图:




// 示例: 打开高德地图导航到指定坐标
const lat = 39.984060; // 目的地纬度
const lon = 116.481270; // 目的地经度
const url = `androidamap://navi?sourceApplication=VueApp&poiname=目的地&lat=${lat}&lon=${lon}&dev=0&style=2`;
window.location.href = url;

腾讯地图:




// 示例: 打开腾讯地图导航到指定坐标
const lat = 39.984060; // 目的地纬度
const lon = 116.481270; // 目的地经度
const url = `qqmap://map/routeplan?type=drive&fromcoord=CurrentLocation&tocoord=${lat},${lon}&referer=VueApp`;
window.location.href = url;

百度地图:




// 示例: 打开百度地图导航到指定坐标
const lat = 39.984060; // 目的地纬度
const lon = 116.481270; // 目的地经度
const url = `baidumap://map/direction?mode=driving&from=currentLocation&coordtype=gcj02&to=${lat},${lon}&src=VueApp`;
window.location.href = url;

请注意，这些URL Scheme可能会随着应用版本或者地图软件的更新而变化，请参照相应的第三方地图软件官方文档进行确认。此外，在实际使用中，可能需要添加一些错误处理逻辑，例如检查用户设备是否安装了相应的地图软件。

- 阅读更多 -

el-upload 上传头像 vue3 js项目

System

2024-08-23

所有,html5

在Vue 3项目中使用el-upload组件上传头像，你可以参考以下步骤和代码示例：

安装Element Plus（如果你还没有安装）:




npm install element-plus --save

在你的组件中引入el-upload和el-image组件：




<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    list-type="picture-card"
    :on-success="handleSuccess"
    :on-remove="handleRemove"
    :before-upload="beforeUpload"
    :file-list="fileList"
  >
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-image
    v-if="imageUrl"
    style="width: 100px; height: 100px"
    :src="imageUrl"
    fit="fill"></el-image>
</template>

在script标签中，处理上传和移除的逻辑：




<script setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';
 
const imageUrl = ref('');
const fileList = ref([]);
 
const handleSuccess = (response, file, fileList) => {
  imageUrl.value = URL.createObjectURL(file.raw);
};
 
const handleRemove = (file, fileList) => {
  imageUrl.value = '';
};
 
const beforeUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    ElMessageBox.alert('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    ElMessageBox.alert('Image size can not exceed 2MB!');
  }
  return isJpgOrPng && isLt2M;
};
</script>

在style标签中，添加样式（可选）：




<style>
.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>

确保你的Vite配置或Webpack配置已正确设置以支持Element Plus和<script setup>特性。

这个例子中，el-upload组件用于上传图片，el-image组件用于展示上传的图片。beforeUpload方法用于检查文件类型和大小。handleSuccess和handleRemove方法处理上传成功和移除图片的逻辑。这个例子假设了一个简单的后端接口https://jsonplaceholder.typicode.com/posts/用于处理图片上传，实际项目中你需要替换为你的真实接口。

- 阅读更多 -

用HTML5 + JavaScript实现下雪效果

System

2024-08-23

所有,html5

以下是一个简单的下雪效果实现，使用HTML5和JavaScript。

HTML部分（index.html）:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下雪效果</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  canvas {
    display: block;
  }
</style>
</head>
<body>
<canvas id="snow-canvas"></canvas>
 
<script src="snow.js"></script>
</body>
</html>

JavaScript部分（snow.js）:




const canvas = document.getElementById('snow-canvas');
const ctx = canvas.getContext('2d');
 
const snowflakes = [];
const flakeCount = 200;
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
 
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
 
function init() {
  for (let i = 0; i < flakeCount; i++) {
    snowflakes.push({
      x: Math.random() * canvasWidth,
      y: Math.random() * canvasHeight,
      size: Math.random() * 10,
      speed: Math.random() * 2 + 1,
    });
  }
}
 
function animateSnow() {
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
 
  snowflakes.forEach((flake) => {
    flake.y += flake.speed;
    flake.x *= 0.98;
    ctx.fillStyle = 'white';
    ctx.beginPath();
    ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
    ctx.fill();
 
    if (flake.y > canvasHeight) {
      flake.y = 0;
      flake.x = Math.random() * canvasWidth;
    }
  });
}
 
function loop() {
  requestAnimationFrame(loop);
  animateSnow();
}
 
init();
loop();

这段代码会在页面上创建一个<canvas>元素，并在其中绘制下雪的效果。每个雪花是一个圆形，它们随机生成位置和大小，并以随机速度下降。如果雪花移出底部，它们会重新生成在顶部。这个简单的下雪效果可以通过调整flakeCount来控制雪花的数量，以及通过修改Math.random()的范围来调整雪花的大小和速度。

- 阅读更多 -

JS特效第76弹：漂亮的html5登录窗口界面网页模板

System

2024-08-23

所有,html5

以下是一个简化的HTML和JavaScript代码示例，用于实现上述登录窗口的功能：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Window</title>
<style>
  body, html {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2e4053;
  }
  .login-container {
    width: 300px;
    padding: 40px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  }
  .login-container h2 {
    text-align: center;
  }
  .form-group {
    margin-bottom: 15px;
  }
  .form-group input[type="text"], .form-group input[type="password"] {
    width: 100%;
    padding: 15px;
    margin-top: 30px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .form-group input[type="submit"] {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 4px;
    background: #58a9ff;
    color: #fff;
    cursor: pointer;
  }
  .form-group input[type="submit"]:hover {
    background: #4e8ab3;
  }
</style>
</head>
<body>
 
<div class="login-container">
  <h2>Login to your Account</h2>
  <form action="">
    <div class="form-group">
      <input type="text" required autocomplete="off" placeholder="Username" name="username" />
    </div>
    <div class="form-group">
      <input type="password" required placeholder="Password" name="password" />
    </div>
    <div class="form-group">
      <input type="submit" value="Login" />
    </div>
  </form>
</div>
 
<script>
  // JavaScript code to handle the login form submission
  document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent the form from submitting
    const username = document.querySelector('input[name="username"]').value;
    const password = document.querySelector('input[name="password"]').value;
 
    // Here you would handle the login logic, e.g., by sending a request to the server
    // For now, we'll just log the username and password to the console
    console.log('Login attempt with username: ' + username + ' and passwor

- 阅读更多 -