1. 首页
  2. 标签
  3. Javascript
Three.js第1篇，Three.js新手教学，如何使用Three.js（three.js使用流程详细，three.js的使用方式，three.js创建3d物体）
System
2024-08-13
所有,javascript



// 引入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场景，包括创建场景、摄像机、渲染器，以及一个旋转的立方体。这是学习Three.js的一个基础入门示例。

- 阅读更多 -
使用 HTML、CSS 和 JavaScript 实现滚动触发的小球弹出和切换 Banner 动画
System
2024-08-13
所有,css



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner 弹出小球动画</title>
<style>
  .banner {
    position: relative;
    width: 100%;
    height: 100vh;
    background: url('banner-bg.jpg') no-repeat center center;
    background-size: cover;
    overflow: hidden;
  }
  .ball {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    transition: 1s ease-in-out;
  }
</style>
</head>
<body>
<div class="banner">
  <div class="ball"></div>
</div>
<script>
window.addEventListener('scroll', function() {
  var banner = document.querySelector('.banner');
  var ball = document.querySelector('.ball');
  var bannerTop = banner.getBoundingClientRect().top;
  var scrollPercent = 100 - (Math.abs(bannerTop) / (window.innerHeight - banner.offsetHeight) * 100);
  if (scrollPercent >= 0 && scrollPercent <= 100) {
    ball.style.transform = 'translateY(' + (scrollPercent - 100) * 1.5 + 'px) translateX(-50%)';
  }
});
</script>
</body>
</html>

这段代码实现了滚动时小球上移的效果，并且根据滚动位置计算小球的移动距离。当用户滚动到 Banner 区域时，小球会根据滚动的进度上移，创造出滚动触发的动画效果。

- 阅读更多 -
js+css元素动态出现,前端让元素从底部动态显现,前端让元素从底部跳跃显示
System
2024-08-13
所有,css

要实现一个元素从底部动态显现，并且有一个跳跃效果，可以使用CSS动画。以下是一个简单的例子：

HTML:




<div class="box"></div>

CSS:




.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  bottom: -100px; /* 开始时元素在视口之外 */
  animation: slide-in 2s forwards; /* 动画名称，持续时间，填充模式 */
}
 
@keyframes slide-in {
  to {
    bottom: 0; /* 动画结束时元素位于视口底部 */
  }
}

JavaScript (如果需要动态添加元素):




const box = document.createElement('div');
box.classList.add('box');
document.body.appendChild(box);

这段代码会创建一个类名为box的元素，并且通过CSS动画让它从页面底部向上移动，直至到达页面底部。如果你想要一个“跳跃”的效果，可以调整动画关键帧或使用不同的动画属性。

- 阅读更多 -
JavaScript通过API调取信息，AJAX请求，局部刷新
System
2024-08-13
所有,ajax

在JavaScript中，可以使用AJAX（Asynchronous JavaScript and XML）来发送请求到API并局部刷新页面内容。以下是一个简单的例子，展示了如何使用原生JavaScript发送GET请求到API，并更新页面上的一个元素内容。

HTML部分：




<div id="content">原始内容</div>
<button id="refreshButton">刷新内容</button>

JavaScript部分：




document.getElementById('refreshButton').addEventListener('click', function() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.example.com/data', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = JSON.parse(xhr.responseText);
      document.getElementById('content').innerHTML = response.data; // 假设返回的JSON中包含data字段
    }
  };
  xhr.send();
});

在这个例子中，当用户点击按钮时，会发送一个GET请求到指定的API地址。当请求完成并且响应状态为200（即请求成功）时，我们会解析返回的JSON数据，并将其中的data字段的内容设置到页面上ID为content的元素的innerHTML中，从而实现局部刷新。

- 阅读更多 -
【JAVAWEB开发】基于Java+Servlet+Ajax+jsp网上购物系统设计实现
System
2024-08-13
所有,ajax

由于篇幅限制，以下仅展示如何使用Servlet处理Ajax请求的核心函数。




@WebServlet("/shoppingCart")
public class ShoppingCartServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 获取请求参数
        String action = request.getParameter("action");
 
        // 根据不同的action执行不同的逻辑
        if ("addToCart".equals(action)) {
            addToCart(request, response);
        } else if ("removeFromCart".equals(action)) {
            removeFromCart(request, response);
        } else if ("updateCart".equals(action)) {
            updateCart(request, response);
        } else if ("getCart".equals(action)) {
            getCart(request, response);
        }
    }
 
    private void addToCart(HttpServletRequest request, HttpServletResponse response) throws IOException {
        // 添加商品到购物车的逻辑
    }
 
    private void removeFromCart(HttpServletRequest request, HttpServletResponse response) throws IOException {
        // 从购物车移除商品的逻辑
    }
 
    private void updateCart(HttpServletRequest request, HttpServletResponse response) throws IOException {
        // 更新购物车商品数量的逻辑
    }
 
    private void getCart(HttpServletRequest request, HttpServletResponse response) throws IOException {
        // 获取购物车商品列表的逻辑
    }
}

这个Servlet处理了四种不同的操作：添加商品到购物车、从购物车移除商品、更新购物车商品数量、获取购物车商品列表。每个操作都有其对应的处理函数，这些函数负责执行数据库操作、更新用户会话状态等。这个例子展示了如何使用Servlet作为Ajax请求的处理中心，并且如何根据请求参数执行不同的逻辑。

- 阅读更多 -
javaweb-异步请求Ajax&axios&JSON
System
2024-08-13
所有,ajax

在JavaWeb中，可以使用Ajax、axios和JSON来进行异步请求处理。以下是使用这些技术的示例代码：

  1. 使用Ajax发送异步请求：

前端JavaScript代码：




$.ajax({
    url: '/your-endpoint', // 服务器端点
    type: 'POST', // 请求类型，根据需要可以是 'GET' 或 'POST'
    contentType: 'application/json', // 发送信息至服务器时内容编码类型
    data: JSON.stringify({ key: 'value' }), // 将对象转换为JSON字符串
    dataType: 'json', // 预期服务器返回的数据类型
    success: function(response) {
        // 请求成功时的回调函数
        console.log(response);
    },
    error: function(xhr, status, error) {
        // 请求失败时的回调函数
        console.log(xhr.responseText);
    }
});
  1. 使用axios发送异步请求：

前端JavaScript代码：




axios.post('/your-endpoint', { key: 'value' })
     .then(function (response) {
         // 请求成功时的回调函数
         console.log(response.data);
     })
     .catch(function (error) {
         // 请求失败时的回调函数
         console.log(error);
     });
  1. 使用JSON处理数据：

前端JavaScript代码：




// 解析JSON字符串
var jsonString = '{"key": "value"}';
var jsonObj = JSON.parse(jsonString);
 
// 将JSON对象转换为字符串
var jsonObj = { key: 'value' };
var jsonString = JSON.stringify(jsonObj);

在实际应用中，你需要确保服务器端的端点（URL）是可访问的，并且服务器端的代码（如Java Servlet）已经配置好以接收和处理这些异步请求。

- 阅读更多 -
Ajax+axios+跨域+JSONP
System
2024-08-13
所有,ajax

Ajax、axios 和 JSONP 都是常用的浏览器端技术，用于实现异步数据交换，但它们有不同的应用场景和实现方式。

  1. Ajax (XMLHttpRequest)：Ajax 是一种浏览器技术，允许在不刷新页面的情况下更新网页的部分内容。使用原生的 XMLHttpRequest 对象进行跨域请求时，需要服务器支持 CORS (Cross-Origin Resource Sharing)。
  2. axios：axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js 环境。它支持跨域请求，通过在请求头中设置跨域资源共享的相关字段，或者使用代理服务器来绕过同源策略。
  3. JSONP：JSONP 主要用于解决跨域请求数据的问题。它通过动态创建 <script> 标签，并在其 src 属性中传递一个 callback 函数名来请求数据。服务器端需要支持这种请求方式。

以下是使用 axios 进行跨域请求的示例代码：




// 引入 axios
import axios from 'axios';
 
// 发送 GET 请求
axios.get('https://api.example.com/data', {
  params: {
    // 查询参数
  }
})
.then(response => {
  // 处理响应数据
  console.log(response.data);
})
.catch(error => {
  // 处理错误情况
  console.error(error);
});
 
// 发送 POST 请求
axios.post('https://api.example.com/data', {
  // 请求体数据
})
.then(response => {
  // 处理响应数据
  console.log(response.data);
})
.catch(error => {
  // 处理错误情况
  console.error(error);
});

服务器端也需要设置适当的 CORS 头部，例如 Access-Control-Allow-Origin，来允许跨域请求。

如果服务器不支持 CORS，可以考虑使用 JSONP，但请注意，axios 不原生支持 JSONP，可能需要第三方库或者自定义实现。

- 阅读更多 -
使用JS，写了一个轮询发送请求的工具。
System
2024-08-13
所有,ajax



// 导入axios，这是一个基于promise的HTTP客户端，用于发送请求
import axios from 'axios';
 
// 轮询的配置对象
const pollConfig = {
  requests: [], // 请求数组，包含请求的url和方法
  interval: 5000, // 轮询间隔，单位毫秒
  stopCondition: () => false, // 停止轮询的条件，返回true时停止
};
 
// 轮询发送请求的函数
function pollRequests(config) {
  const { requests, interval, stopCondition } = config;
  let intervalId;
 
  // 执行请求并处理响应的函数
  function makeRequest(request) {
    axios(request).then(response => {
      console.log('请求成功:', response);
      // 根据响应处理逻辑
      // ...
 
      // 如果没有满足停止条件，继续轮询
      if (!stopCondition()) {
        intervalId = setTimeout(makeRequest, interval, request);
      } else {
        clearTimeout(intervalId);
        console.log('停止轮询');
      }
    }).catch(error => {
      console.error('请求失败:', error);
      // 错误处理逻辑
      // ...
 
      // 如果没有满足停止条件，继续轮询
      if (!stopCondition()) {
        intervalId = setTimeout(makeRequest, interval, request);
      } else {
        clearTimeout(intervalId);
        console.log('停止轮询');
      }
    });
  }
 
  // 开始轮询
  requests.forEach(request => {
    makeRequest(request);
  });
}
 
// 使用示例
pollRequests(pollConfig);

这段代码定义了一个名为pollRequests的函数，它接收一个配置对象作为参数，该对象包含轮询的请求数组、间隔时间以及停止轮询的条件。函数内部使用setTimeout进行轮询，并通过axios发送HTTP请求。如果响应成功，它会根据响应执行相关逻辑；如果发生错误，它会执行错误处理逻辑。如果满足停止轮询的条件，它会清除定时器并输出相应的日志信息。这个例子展示了如何使用JavaScript编写一个简单的轮询请求发送工具。

- 阅读更多 -
JS 基础: 取消 Ajax 请求(fetch abort)
System
2024-08-13
所有,ajax

在JavaScript中，可以使用AbortController来取消一个fetch请求。以下是一个示例代码：




const controller = new AbortController();
const signal = controller.signal;
 
fetch('https://example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log('Fetch error:', error));
 
// 在需要取消请求的时候
controller.abort();

在上面的代码中，我们首先创建了一个AbortController实例，然后通过调用其signal属性获得了一个AbortSignal对象，该对象可以传递给fetch请求。我们在fetch调用中使用了这个signal属性。

当我们希望取消请求时，我们调用controller.abort()方法，这将会触发一个"abort"事件在控制器的AbortSignal上，进而导致所有监听这个信号的Promise都会被拒绝，并且抛出一个DOMException异常，错误名为AbortError。

- 阅读更多 -
使用原生js实现Ajax
System
2024-08-13
所有,ajax

使用原生JavaScript实现Ajax的基本步骤如下：

  1. 创建一个新的XMLHttpRequest对象。
  2. 设置请求的方法（如GET或POST）和URL。
  3. 绑定状态变化的事件监听器。
  4. 发送请求。
  5. 在事件监听器中处理服务器响应。

以下是一个简单的GET请求示例：




var xhr = new XMLHttpRequest();
xhr.open("GET", "your-api-endpoint", true);
 
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功
    var response = xhr.responseText;
    // 处理response
    console.log(response);
  }
};
 
xhr.send();

对于POST请求，需要设置请求头以及发送数据：




var xhr = new XMLHttpRequest();
xhr.open("POST", "your-api-endpoint", true);
 
// 设置请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功
    var response = xhr.responseText;
    // 处理response
    console.log(response);
  }
};
 
// 发送数据
xhr.send("key1=value1&key2=value2");

以上代码实现了基本的Ajax请求，可以根据实际需求进行调整。

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