标签 Javascript 下的文章

2024-08-14

HTML、CSS和JS组合起来可以创建一个动态的网页。

HTML (Hypertext Markup Language) 负责网页的结构，CSS (Cascading Style Sheets) 负责网页的样式，JS (JavaScript) 负责网页的行为。

以下是一个简单的HTML、CSS和JS结合的例子：

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>Simple Page</title>
    <style>
        .highlight { color: red; }
    </style>
</head>
<body>
    <h1 id="greeting">Hello, World!</h1>
    <button onclick="changeText()">Click Me!</button>

    <script>
        function changeText() {
            document.getElementById('greeting').className = 'highlight';
        }
    </script>
</body>
</html>

在这个例子中，HTML定义了页面的结构，包括一个标题和一个按钮。CSS定义了当标题被点击后如何改变样式（这里是改变颜色）。JS定义了当按钮被点击时要执行的函数，该函数改变了标题元素的类，从而应用了CSS规则。

当你打开这个页面并点击按钮时，标题文字的颜色会变成红色。这就是HTML、CSS和JS结合创建动态网页的一个简单例子。

- 阅读更多 -

前端使用html+js+css实现一个弹出选择框

System

2024-08-14

所有,css

以下是一个使用HTML、JavaScript和CSS实现的简单弹出选择框的示例：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Select Box</title>
<style>
  .select-box {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    padding: 10px;
    z-index: 10;
  }
  .select-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .select-box ul li {
    padding: 5px 10px;
    cursor: pointer;
  }
  .select-box ul li:hover {
    background-color: #eee;
  }
</style>
</head>
<body>

<div class="trigger">点击这里弹出选择框</div>
<div class="select-box">
  <ul>
    <li>选项 1</li>
    <li>选项 2</li>
    <li>选项 3</li>
    <li>其他选项</li>
  </ul>
</div>

<script>
document.querySelector('.trigger').onclick = function() {
  var selectBox = document.querySelector('.select-box');
  selectBox.style.display = 'block';

  // 添加点击其他位置关闭选择框的事件监听
  document.addEventListener('click', function(e) {
    if(e.target !== selectBox && !selectBox.contains(e.target)) {
      selectBox.style.display = 'none';
      document.removeEventListener('click', arguments.callee);
    }
  });
};

// 选项点击事件
document.querySelectorAll('.select-box ul li').forEach(function(item) {
  item.onclick = function() {
    alert('你选择了: ' + item.textContent);
    document.querySelector('.select-box').style.display = 'none';
  };
});
</script>

</body>
</html>

这个示例包括了一个简单的弹出选择框，点击触发元素会显示选择框，选择一个选项后会弹出提示框，并关闭选择框。点击非选择框区域外任何地方都会关闭选择框。这个例子提供了一个基本框架，可以根据实际需求进行扩展和定制。

- 阅读更多 -

Springboot整合Thymeleaf引入公共的CSS和JS文件的方法

System

2024-08-14

所有,css

在Spring Boot整合Thymeleaf时，可以通过以下步骤引入公共的CSS和JS文件：

将公共的CSS和JS文件放置在Spring Boot项目的src/main/resources/static目录下。
在src/main/resources/templates目录下的HTML模板文件中，使用Thymeleaf的th:href和th:src属性来引入这些公共文件。

例如，假设你有一个名为main.css的公共CSS文件和一个名为main.js的公共JS文件，你可以在HTML模板文件的<head>部分这样引入它们：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Your Title</title>
    <!-- 引入公共CSS文件 -->
    <link rel="stylesheet" th:href="@{/main.css}">
</head>
<body>
    <!-- 引入公共JS文件 -->
    <script th:src="@{/main.js}"></script>
</body>
</html>

这里@{/main.css}和@{/main.js}是静态资源的路径，Spring Boot会自动将它们映射到src/main/resources/static目录下的相应文件。

确保你的Spring Boot项目已经配置了Web MVC，通常情况下，Spring Boot的自动配置会处理静态资源的映射。如果需要自定义配置，你可以在application.properties或application.yml文件中设置静态资源的路径，例如：

# application.properties
spring.resources.static-locations=classpath:/static/

这样配置后，Spring Boot会从指定的路径中查找静态资源。

System

2024-08-14

所有,css

在CSS中，text-decoration属性用于设置或获取对象文本的装饰。这种装饰通常是下划线、上划线、删除线等。

以下是一些使用text-decoration的示例：

为文本添加下划线：

p.decoration {
  text-decoration: underline;
}

为文本添加上划线：

p.decoration {
  text-decoration: overline;
}

为文本添加删除线：

p.decoration {
  text-decoration: line-through;
}

为文本同时添加上划线和下划线：

p.decoration {
  text-decoration: underline overline;
}

在CSS中，selector是用来选择你要添加样式的HTML元素。例如，如果你想要选择所有的<p>元素，并为它们添加上划线的样式，你可以这样做：

p {
  text-decoration: underline;
}

这段代码会使得所有<p>元素的文本都显示为带有下划线的文本。

在实际开发中，你可以根据需要选择合适的选择器，并结合text-decoration属性来为你的网页添加各种样式。

- 阅读更多 -

前端JavaScript篇之ajax、axios、fetch的区别

System

2024-08-14

所有,ajax

AJAX、axios和fetch都是前端JavaScript中用于发送HTTP请求的工具，但它们有一些主要区别：

AJAX (Asynchronous JavaScript and XML): AJAX是一种创建交互式网页的技术，它通过在后台与服务器交换数据来更新网页的部分内容，而不需要重新加载整个页面。jQuery提供了$.ajax方法来实现AJAX。
Axios: Axios是一个基于Promise的HTTP客户端，它在浏览器和node.js中都可以使用。它从浏览器创建XMLHttpRequests，并从node.js创建http请求，Axios支持Promise API，使得处理异步请求变得更加简单。
Fetch: Fetch是一个现代的、强大的、灵活的、以Promise为基础的JavaScript API，用于从网络获取资源。Fetch是基于Promise设计的，使用起来更加简洁。

区别和使用场景：

如果你需要在浏览器中发送请求，并且不需要在IE浏览器中工作，推荐使用fetch。
如果你需要在Node.js环境中发送请求，推荐使用axios或者http模块。
如果你需要在请求中处理Promise，推荐使用axios或fetch。
如果你需要在浏览器中发送请求，并且需要支持IE浏览器，推荐使用jQuery的$.ajax或axios。

示例代码：

AJAX (使用jQuery):

$.ajax({
  url: 'https://api.example.com/data',
  type: 'GET',
  success: function(res) {
    console.log(res);
  },
  error: function(err) {
    console.error(err);
  }
});

Axios:

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Fetch:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

- 阅读更多 -

scrapy_selenium爬取Ajax、JSON、XML网页：豆瓣电影

System

2024-08-14

所有,ajax

要使用Scrapy-Selenium来爬取豆瓣电影的Ajax、JSON或XML数据，你需要安装Scrapy-Selenium，并编写一个Spider来使用Selenium WebDriver加载页面，并提取所需的数据。以下是一个简单的例子：

安装Scrapy-Selenium:

pip install scrapy-selenium

确保你有一个Selenium WebDriver，例如ChromeDriver或GeckoDriver。
创建一个Scrapy项目和Spider:

scrapy startproject dym_crawler
cd dym_crawler
scrapy genspider dym_spider dym.com

编辑dym_crawler/spiders/dym_spider.py来使用Selenium:

import json
import scrapy
from scrapy_selenium import SeleniumRequest
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

class DymSpider(scrapy.Spider):
    name = 'dym_spider'
    allowed_domains = ['douban.com']
    start_urls = ['https://movie.douban.com/']

    def start_requests(self):
        # 使用SeleniumRequest替代原生的Scrapy Request
        yield SeleniumRequest(
            self.parse_ajax,
            url='https://movie.douban.com/j/chart/top_list?type=5&interval_id=100%3A90&action=&start=0&limit=20',
            callback=self.parse,
            wait_until=EC.presence_of_element_located((By.CSS_SELECTOR, 'div.indent'))
        )

    def parse_ajax(self, response):
        # 解析Ajax响应内容
        data = json.loads(response.text)
        for movie in data.get('data', []):
            yield {
                'title': movie.get('title'),
                'rating': movie.get('rating'),
                'url': movie.get('url')
            }

    def parse(self, response):
        # 解析页面内容
        # 这里你可以提取其他你需要的数据
        pass

在上面的代码中，SeleniumRequest会启动一个Selenium会话，加载页面，并等待直到指定的条件被满足才会继续执行回调函数。在这个例子中，我们等待电影列表出现在页面上，然后解析Ajax响应内容。

确保你的Selenium WebDriver配置正确，并且在运行Spider之前启动了Selenium服务。如果你想要爬取其他类型的数据（如JSON或XML），你可以根据页面上数据的来源调整XPath或CSS选择器来提取数据。

- 阅读更多 -

viewerjs -v 11 动态获取图片（ajax）,以及重复初始化问题。

System

2024-08-14

所有,ajax

// 引入Viewer.js库
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';

// 初始化Viewer实例
let viewer = null;

// 动态获取图片并使用Viewer.js展示
function showImagesWithViewer(imageUrls) {
  // 如果viewer实例已存在，则销毁它
  if (viewer) {
    viewer.destroy();
  }

  // 使用Viewer.js创建图片展示
  const container = document.getElementById('image-container');
  container.innerHTML = imageUrls.map(url => `<img src="${url}" alt="图片"/>`).join('');
  viewer = new Viewer(container, {
    // Viewer.js的初始化选项
    // 例如：toolbar: true, url: 'data-original'
  });

  // 打开Viewer展示第一张图片
  viewer.view(container.getElementsByTagName('img')[0]);
}

// 假设这是通过Ajax异步获取的图片URL列表
const imageUrls = [
  'http://example.com/image1.jpg',
  'http://example.com/image2.jpg'
  // ...更多图片URL
];

// 调用函数展示图片
showImagesWithViewer(imageUrls);

这段代码演示了如何使用Viewer.js动态获取图片并展示。首先，我们引入了Viewer.js库及其样式。然后定义了一个函数showImagesWithViewer，该函数接受一个图片URL数组作为参数，并在DOM中动态创建这些图片。如果Viewer实例已存在，它会先被销毁，然后创建新的图片元素并初始化Viewer实例。最后，我们调用这个函数展示图片。

System

2024-08-14

所有,ajax

这个问题看起来像是在寻求一个关于如何在PHP中实现一个包含购物车功能的个人博客项目，其中涉及到使用JavaScript和Ajax进行前端逻辑处理，以及用户登录和文件上传的功能。以下是一个简化的示例，展示了如何在PHP中实现一个购物车功能的核心代码。

<?php
// 假设这是你的 Session 中的购物车数据
$cartItems = [
    'item1' => ['name' => '商品1', 'price' => 99],
    'item2' => ['name' => '商品2', 'price' => 89],
    // ... 更多商品
];

// 假设这是通过 AJAX 添加到购物车的商品数据
$itemToAdd = [
    'id' => 'item3',
    'name' => '商品3',
    'price' => 79
];

// 添加商品到购物车
$cartItems[$itemToAdd['id']] = $itemToAdd;

// 更新 Session 中的购物车数据
$_SESSION['cart'] = $cartItems;

// 响应 AJAX 请求
echo json_encode([
    'success' => true,
    'message' => '商品已添加到购物车',
    'cartItems' => $cartItems
]);
?>

这段代码展示了如何在PHP中处理通过Ajax发送的添加商品到购物车的请求，并更新用户的Session中的购物车数据。在实际应用中，你需要确保用户登录状态，并对价格和商品信息进行安全验证。此外，你还需要实现前端的Ajax调用和相关的用户界面逻辑。

- 阅读更多 -

JS 创建数组（ 6种方法）

System

2024-08-14

所有,javascript

在JavaScript中，可以通过以下6种方法创建数组：

使用数组字面量：

let arr = []; // 空数组
let fruits = ['apple', 'banana', 'cherry']; // 包含元素的数组

使用Array构造函数：

let arr = new Array(); // 空数组
let fruits = new Array('apple', 'banana', 'cherry'); // 包含元素的数组

使用Array.of()方法：

let arr = Array.of(); // 空数组
let fruits = Array.of('apple', 'banana', 'cherry'); // 包含元素的数组

使用Array.from()方法：

let arr = Array.from('hello'); // 从字符串创建数组
let numbers = Array.from({length: 5}, (_, i) => i); // 创建一个包含5个数字的数组[0, 1, 2, 3, 4]

使用生成器与Array.from()结合（适用于大数据量的情况）：

function* range(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

let numbers = Array.from(range(1, 10)); // 创建一个包含1到10的数组

使用扩展运算符：

let arr = [...'hello']; // 将字符串转换为数组
let clone = [...arr]; // 克隆数组

这些方法可以创建空数组、预定义大小的数组、从字符串或其他对象创建数组，或者克隆数组。根据不同的场景和需求，可以选择合适的方法来创建数组。

System

2024-08-14

所有,javascript

<template>
  <div id="container"></div>
</template>

<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';

export default {
  name: 'ModelViewer',
  props: {
    modelPath: String,
  },
  mounted() {
    const container = document.getElementById('container');
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(container.clientWidth, container.clientHeight);
    container.appendChild(renderer.domElement);

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
    camera.position.z = 5;

    const controls = new THREE.OrbitControls(camera, renderer.domElement);

    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath('path/to/draco/gltf/decoder/');
    dracoLoader.setDecoderConfig({ type: 'js' });
    dracoLoader.preload();

    const gltfLoader = new GLTFLoader();
    gltfLoader.setDRACOLoader(dracoLoader);

    gltfLoader.load(this.modelPath, (gltf) => {
      scene.add(gltf.scene);
      gltf.scene.position.set(0, -2, 0);

      function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        controls.update();
      }

      animate();
    }, undefined, (error) => {
      console.error(error);
    });
  }
}
</script>

<style>
#container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
</style>

在这个代码实例中，我们首先导入了必要的Three.js组件，并在mounted生命周期钩子中初始化了场景、摄像机、渲染器和控件。然后，我们创建了一个DRACOLoader实例，并通过其setDecoderPath方法设置了Decoder的路径。通过gltfLoader.load方法加载glTF模型，并在加载成功后将其添加到场景中。如果加载过程中出现错误，会通过回调函数打印错误信息。最后，我们启动了渲染循环，并在组件销毁时处理相关清理工作。这个例子展示了如何在Vue中处理和加载glb文件，并处理由于文件过大导致的加载问题。

- 阅读更多 -