1. 首页
  2. 标签
  3. Javascript
html5&css&js代码 024 响应式布局示例
System
2024-08-19
所有,css



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Layout Example</title>
    <style>
        .container {
            width: 100%;
            margin: auto;
        }
        .header, .footer {
            background-color: #ddd;
            padding: 10px 0;
            text-align: center;
        }
        .content {
            background-color: #f8f8f8;
            padding: 20px;
            margin-bottom: 20px;
        }
        @media (min-width: 768px) {
            .container {
                width: 750px;
            }
        }
        @media (min-width: 992px) {
            .container {
                width: 970px;
            }
        }
        @media (min-width: 1200px) {
            .container {
                width: 1170px;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Responsive Layout</h1>
    </div>
    <div class="container">
        <div class="content">
            <h2>Content goes here...</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        </div>
    </div>
    <div class="footer">
        <p>Footer content here...</p>
    </div>
</body>
</html>

这个代码实例展示了如何使用CSS媒体查询来创建一个响应式的布局。.container类根据屏幕宽度的不同使用不同的宽度，从而适应不同的设备。同时，示例中的HTML结构保持简单，并且只包含了必要的内容，以便更好地教学。

- 阅读更多 -
js请求封装ajax、统一响应
System
2024-08-19
所有,ajax

以下是一个简单的JavaScript请求封装函数，使用fetch进行HTTP请求，并对响应结果进行统一处理的示例代码：




function fetchJSON(url, options) {
  // 默认的请求选项
  const defaults = {
    headers: {
      'Content-Type': 'application/json',
    },
  };
 
  // 合并默认选项和传入的选项
  options = { ...defaults, ...options };
 
  // 发起请求并处理响应
  return fetch(url, options)
    .then(response => {
      // 确保响应成功
      if (!response.ok) {
        throw new Error(`HTTP错误! 状态码: ${response.status}`);
      }
      // 解析JSON响应
      return response.json();
    })
    .catch(error => {
      console.error('请求出错:', error);
      // 这里可以根据需要返回一个错误处理的Promise或者抛出错误
      // 例如返回一个Promise.reject
      throw error;
    });
}
 
// 使用示例
fetchJSON('https://api.example.com/data', {
  method: 'POST',
  body: JSON.stringify({ key: 'value' })
})
.then(data => console.log('请求成功:', data))
.catch(error => console.error('请求失败:', error.message));

这段代码定义了一个fetchJSON函数，它接受一个URL和一个选项对象作为参数。它使用fetch方法发起请求，并确保响应是成功的。如果响应不成功，它会抛出一个错误。如果响应成功，它会解析JSON响应。在使用时，你可以通过传递不同的HTTP方法和数据来定制请求。如果请求成功，它会通过then链进一步处理数据；如果请求失败，它会通过catch链处理错误。

- 阅读更多 -
【JavaScript 漫游】【034】AJAX
System
2024-08-19
所有,ajax

AJAX（Asynchronous JavaScript and XML）是一种创建交互式网页的技术，可以在不重新加载整个网页的情况下，与服务器交换数据。

以下是使用原生JavaScript实现AJAX的示例代码：




// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'your-api-endpoint', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('AJAX Request failed');
    }
  }
};
 
// 发送请求
xhr.send();

在这个例子中，我们创建了一个新的 XMLHttpRequest 对象，并对其进行了配置，以发送一个GET请求到指定的API端点。我们还定义了一个回调函数，当请求的状态发生变化时会被调用，它会检查请求是否完成并且响应状态码为200，这表示请求成功。如果成功，它会输出响应文本，如果失败，则会输出错误信息。最后，我们通过调用 send() 方法发送请求。

- 阅读更多 -
分享three.js实现粒子背景
System
2024-08-19
所有,javascript

以下是一个使用three.js创建粒子背景的简单示例代码：




// 引入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.Geometry();
const material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.5 });
 
// 生成一些随机的粒子
for (let i = 0; i < 1000; i++) {
  const vertex = new THREE.Vector3();
  vertex.x = Math.random() * 2 - 1;
  vertex.y = Math.random() * 2 - 1;
  vertex.z = Math.random() * 2 - 1;
  geometry.vertices.push(vertex);
}
 
const points = new THREE.Points(geometry, material);
scene.add(points);
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
 
  // 旋转粒子
  points.rotation.x += 0.001;
  points.rotation.y += 0.001;
 
  renderer.render(scene, camera);
}
 
animate();

这段代码创建了一个简单的三维场景，包含了一个由随机生成的粒子构成的点集，通过旋转和渲染，实现了动态的粒子背景效果。这个示例可以作为创建类似效果时的基础，开发者可以根据自己的需求进行扩展和定制。

- 阅读更多 -
js实现读取excel文件
System
2024-08-19
所有,javascript

在JavaScript中，可以使用第三方库xlsx来读取Excel文件。以下是一个简单的例子，展示如何使用xlsx库读取Excel文件：

首先，确保安装了xlsx库：




npm install xlsx

然后，使用以下代码读取Excel文件：




const XLSX = require('xlsx');
 
// 读取Excel文件
function readExcel(file) {
  const reader = new FileReader();
 
  reader.onload = function(e) {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });
 
    // 假设我们只读取第一个工作表
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    const json = XLSX.utils.sheet_to_json(worksheet);
 
    console.log(json);
  };
 
  reader.readAsArrayBuffer(file);
}
 
// 假设你有一个input元素来上传文件
const inputElement = document.getElementById('input-excel');
inputElement.addEventListener('change', function(e) {
  const file = e.target.files[0];
  readExcel(file);
});

在HTML中，你需要有一个文件输入元素来上传Excel文件：




<input type="file" id="input-excel" />

这段代码会在用户选择文件后，读取并转换Excel文件内容为JSON格式。注意，这个例子只读取第一个工作表的内容。如果需要读取其他工作表或者有更复杂的需求，可以根据xlsx库的文档进行相应的扩展。

- 阅读更多 -
【环境准备】NodeJs(压缩包版本)安装与配置
System
2024-08-19
所有,javascript

在Linux环境下，可以使用以下步骤安装和配置Node.js：

  1. 下载Node.js压缩包：

    打开Node.js官方下载页面，选择适合你系统的版本。

  2. 使用wget或curl下载压缩包：

    


wget https://nodejs.org/dist/v14.16.0/node-v14.16.0-linux-x64.tar.xz

  3. 解压缩下载的文件：

    


tar -xJf node-v14.16.0-linux-x64.tar.xz

  4. 配置环境变量：

    编辑你的.bashrc或.profile文件，添加以下内容：

    


export NODEJS_HOME=/path/to/node-v14.16.0-linux-x64
export PATH=$NODEJS_HOME/bin:$PATH

    替换/path/to/为你的Node.js解压路径。

  5. 使配置生效：

    


source ~/.bashrc

  6. 验证安装：

    


node -v
npm -v

以上步骤会安装Node.js并将其添加到你的环境变量中，使得你可以在任何位置通过命令行运行Node.js和npm。记得替换下载链接和解压路径，使用与你系统匹配的Node.js版本。

- 阅读更多 -
node之vm2库，js沙盒环境
System
2024-08-19
所有,javascript

vm2 是一个 Node.js 模块，用于在一个隔离的沙箱环境中运行不信任的代码。以下是使用 vm2 创建沙箱并在其中运行代码的基本示例：

首先，安装 vm2：




npm install vm2

然后，使用 vm2 创建沙箱并执行代码：




const { VM } = require('vm2');
 
// 创建一个新的沙箱
const vm = new VM({
  timeout: 1000, // 设置代码执行的超时时间为1000毫秒
  sandbox: { // 定义沙箱中的初始数据
    secret: 'a secret code'
  }
});
 
// 在沙箱中执行代码
const result = vm.run('secretFunction(secret)', 'myScript.vm2');
 
console.log(result); // 输出代码执行的结果

在这个例子中，我们创建了一个新的 VM 实例，并设置了一些选项，如超时和初始化的沙箱环境。然后，我们在这个沙箱中执行了一个简单的函数，它使用了一个秘密信息。这个函数的定义不是在沙箱外定义的，而是在沙箱内部定义的。这样可以提供一定程度的代码隔离。

- 阅读更多 -
js取出数组对象中的全部key值和全部value值
System
2024-08-19
所有,javascript

在JavaScript中，可以使用Object.keys()方法来获取对象的所有键（key）值，使用Object.values()方法来获取对象的所有值（value）。如果数组中包含对象，可以遍历数组并分别获取键和值。

以下是获取数组对象中所有键和值的示例代码：




// 假设有如下数组对象
let arrayOfObjects = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 28 }
];
 
// 获取所有key值
let keys = arrayOfObjects.flatMap(obj => Object.keys(obj));
// 获取所有value值
let values = arrayOfObjects.flatMap(obj => Object.values(obj));
 
console.log(keys); // 输出：['name', 'age', 'name', 'age', 'name', 'age']
console.log(values); // 输出：['Alice', 25, 'Bob', 30, 'Charlie', 28]

在这个例子中，flatMap 方法用于遍历数组对象，并分别获取每个对象的键和值数组，然后将它们扁平化为一个单一数组。这样keys数组包含了所有键的值，values数组包含了所有值的值。

- 阅读更多 -
three.js零基础入门超全超细的教程整理
System
2024-08-19
所有,javascript

在这个系列中，我们将从零开始，逐步教你如何使用three.js创建一个3D场景。首先，我们需要在HTML文件中引入three.js库。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js 入门示例</title>
    <style>
        body { margin: 0; overflow: hidden; } 
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.1/build/three.min.js"></script>
    <script>
        // 这里是我们的Three.js代码
    </script>
</body>
</html>

接下来，我们将创建一个简单的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);
 
// 创建平面
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);
 
// 将立方体置于平面上方
cube.position.set(5, 5, 0);
 
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
 
    // 旋转立方体和平面
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    plane.rotation.z += 0.01;
 
    renderer.render(scene, camera);
}
 
animate();

在这个简单的例子中，我们创建了一个场景，一个摄像机，一个渲染器，一个立方体和一个平面。然后，我们将立方体和平面添加到场景中，并设置了它们的渲染位置。最后，我们进入了一个渲染循环，使得所有的物体可以不断旋转，从而形成一个动态的3D场景。

- 阅读更多 -
js实现字符串转json对象的四种方法
System
2024-08-19
所有,javascript

在JavaScript中，可以使用以下四种方法将字符串转换为JSON对象：

  1. 使用JSON.parse()方法
  2. 使用eval()函数
  3. 使用new Function()构造函数
  4. 使用第三方库如jQuery.parseJSON()

方法1: 使用JSON.parse()

这是最常用的方法，它是原生的JavaScript方法，无需任何依赖。




var jsonString = '{"name":"John", "age":30, "city":"New York"}';
var jsonObj = JSON.parse(jsonString);
console.log(jsonObj.name); // 输出: John

方法2: 使用eval()

虽然eval()可以解析JSON字符串，但它也能执行任何JavaScript代码，这在安全性上是一个问题。因此，不推荐使用。




var jsonString = '({"name":"John", "age":30, "city":"New York"})';
var jsonObj = eval('(' + jsonString + ')');
console.log(jsonObj.name); // 输出: John

方法3: 使用new Function()

这种方法虽然看起来有些复杂，但在某些情况下可以避免eval()的问题。




var jsonString = '{"name":"John", "age":30, "city":"New York"}';
var jsonObj = (new Function('return ' + jsonString))();
console.log(jsonObj.name); // 输出: John

方法4: 使用jQuery.parseJSON()

如果你使用jQuery，可以使用$.parseJSON()方法解析JSON字符串。




var jsonString = '{"name":"John", "age":30, "city":"New York"}';
var jsonObj = $.parseJSON(jsonString);
console.log(jsonObj.name); // 输出: John

注意：从jQuery 3.0开始，$.parseJSON()已被内置的JSON.parse()取代。因此，推荐使用JSON.parse()方法。

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