标签 Javascript 下的文章

【HTML③】JavaScript基础、使用JavaScript制作网页特效、使用前端库及UI框架快速开发_javascript网站制作

2024-08-09




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
    <script defer src="script.js"></script>
</head>
<body>
    <section class="section">
        <div class="container">
            <h1 class="title">
                Hello World
            </h1>
            <p class="subtitle">
                My first bulma page
            </p>
        </div>
    </section>
</body>
</html>

在这个示例中，我们使用了jQuery库和Bulma UI框架。jQuery是一个快速、简洁的JavaScript库，方便我们处理HTML文档的结构与行为；Bulma是一个现代的，响应式的前端框架，可以快速搭建美观的网页布局。通过在HTML文档的<head>标签内包含这些库的引用，我们可以在页面中使用它们。defer属性表示脚本将在整个页面解析完成后执行，这对于加载大型脚本非常有帮助。

System

2024-08-09

所有,javascript

在Three.js中，创建材质并将其应用于几何体对象时，可以使用不同类型的贴图，包括环境贴图、透明贴图和高光贴图。以下是如何为材质设置这些贴图的示例代码：




// 假设已经有一个Three.js场景(scene)和相机(camera)
// 创建几何体，这里以BoxGeometry为例
var geometry = new THREE.BoxGeometry();
 
// 创建材质
var material = new THREE.MeshPhongMaterial({
    color: 0xffffff, // 基本颜色
    specular: 0xffffff, // 高光颜色
    shininess: 30, // 高光强度
    envMap: reflectionCubeTexture, // 环境贴图
    map: diffuseTexture, // 材质贴图
    transparent: true, // 透明度映射
    alphaMap: alphaTexture, // 透明度贴图
    reflectivity: 0.75, // 环境贴图强度
    // ... 其他材质参数
});
 
// 创建网格对象
var mesh = new THREE.Mesh(geometry, material);
 
// 将网格添加到场景
scene.add(mesh);
 
// 创建CubeCamera作为环境贴图
var reflectionCube = new THREE.CubeCamera(1, 100000, 256);
scene.add(reflectionCube);
 
// 在渲染循环中更新CubeCamera位置
reflectionCube.update(renderer, scene);
 
// 渲染场景
renderer.render(scene, camera);

在这个例子中，我们创建了一个MeshPhongMaterial材质，并为它设置了环境贴图（envMap）、材质贴图（map）、透明度贴图（alphaMap）。这些贴图可以是2D纹理，也可以是CubeTexture用于环境贴图。然后，我们将创建的网格对象添加到场景中，并在渲染循环中更新CubeCamera以实现环境映射效果。最后，我们渲染场景。

- 阅读更多 -

如何将JavaScript应用到HTML中

System

2024-08-09

所有,html

要将JavaScript应用到HTML中，你可以通过以下几种方式实现：

内联JavaScript代码：在HTML文件中直接使用<script>标签包裹JavaScript代码。




<!DOCTYPE html>
<html>
<head>
    <title>内联JavaScript示例</title>
</head>
<body>
    <h1>内联JavaScript</h1>
    <button onclick="showMessage()">点击我</button>
 
    <script>
        function showMessage() {
            alert('你好，世界！');
        }
    </script>
</body>
</html>

外部JavaScript文件：将JavaScript代码放入单独的.js文件中，然后在HTML文件中通过<script>标签的src属性引用。




<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>外部JavaScript示例</title>
</head>
<body>
    <h1>外部JavaScript</h1>
    <button onclick="showMessage()">点击我</button>
 
    <script src="script.js"></script>
</body>
</html>




// script.js
function showMessage() {
    alert('你好，世界！');
}

在HTML元素事件中引用JavaScript函数：可以在HTML元素的事件属性中直接引用JavaScript函数，比如onclick、onload等。

以上三种方法是将JavaScript应用到HTML中最常见的方式。根据实际需求和项目规模，你可以选择适合的方法来应用JavaScript。

- 阅读更多 -

办公园区建筑科技风效果(html+threejs)

System

2024-08-09

所有,html

以下是一个使用Three.js创建办公园区的简化示例，展示了如何使用Three.js的GLTFLoader来加载带有科技感的建筑模型，并将其置于场景中：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Office Campus with Three.js</title>
    <style>
        body { margin: 0; overflow: hidden; }
    </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/examples/js/loaders/GLTFLoader.min.js"></script>
<script>
    let camera, scene, renderer, model;
    const clock = new THREE.Clock();
 
    init();
    animate();
 
    function init() {
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 5, 10);
        camera.lookAt(0, 0, 0);
 
        scene = new THREE.Scene();
 
        // 添加环境光源
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);
 
        // 加载GLTF模型
        const loader = new THREE.GLTFLoader();
        loader.load('models/office_campus.gltf', function (gltf) {
            model = gltf.scene;
            scene.add(model);
        });
 
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
    }
 
    function animate() {
        requestAnimationFrame(animate);
 
        const delta = clock.getDelta();
        if (model) {
            // 如果模型已加载，可以在这里添加模型的动画控制逻辑
        }
 
        renderer.render(scene, camera);
    }
</script>
</body>
</html>

在这个例子中，我们首先导入了Three.js库和GLTFLoader插件。然后，我们初始化了相机、场景、渲染器，并添加了一个环境光源。最后，我们使用GLTFLoader加载了一个名为office_campus.gltf的模型，并将其添加到场景中。在动画循环中，我们调用renderer.render()来更新渲染。

注意：这个例子假设你有一个名为office_campus.gltf的建筑模型放在models文件夹中。你需要根据你的文件结构调整模型路径。此外，Three.js的版本和API可能随着时间而变化，请确保使用的是你所需要的版本。

- 阅读更多 -

基于CSS原生JS、Vue3.0技术各自实现序列帧动画效果

System

2024-08-09

所有,css3

由于这个问题涉及到多个技术栈，我将提供每个部分的核心代码。

CSS3实现序列帧动画：




/* 定义关键帧 */
@keyframes example {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
  }
}
 
/* 应用动画 */
.box {
  width: 100px;
  height: 100px;
  animation-name: example; /* 使用关键帧的名称 */
  animation-duration: 4s; /* 动画时长 */
}

原生JS实现序列帧动画：




// 获取元素
const box = document.querySelector('.box');
 
// 定义序列帧动画
const keyframes = [
  { backgroundColor: 'red' },
  { backgroundColor: 'yellow' }
];
 
// 应用动画
function animate(timeFraction) {
  const color = keyframes[Math.floor(timeFraction * keyframes.length)];
  box.style.backgroundColor = color.backgroundColor;
}
 
// 主循环
function animateLoop(time) {
  requestAnimationFrame(animateLoop);
  const timeFraction = (time / 1000) % keyframes.length;
  animate(timeFraction);
}
 
requestAnimationFrame(animateLoop);

Vue 3.0实现序列帧动画：

首先，在Vue组件中定义样式和关键帧：




/* 组件内部的<style>标签 */
<style>
@keyframes example {
  0%   { background-color: red; }
  100% { background-color: yellow; }
}
.box {
  width: 100px;
  height: 100px;
  animation: example 4s infinite;
}
</style>

然后，在模板中使用该样式：




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

这样就实现了序列帧动画的Vue 3.0版本。注意，Vue 3.0中的动画是基于CSS的，所以我们使用了CSS的animation属性并设置了infinite来实现持续循环播放动画。

- 阅读更多 -

关于JS隐式类型转换的完整总结

System

2024-08-09

所有,javascript

隐式类型转换是JavaScript中自动进行的类型转换，通常发生在不同数据类型的值进行运算时。以下是一些常见的隐式类型转换及其例子：

字符串连接：当+用于字符串和其他类型时，会将其他类型转换为字符串。




let result = "5" + 1; // result是字符串"51"

算术运算：在算术运算中，比如+, -, *, /, %，数值会被转换为数字，字符串会被转换为数值，如果转换失败则为NaN。




let result = "5" - "2"; // result是数字3

比较运算：比较运算符（如==, !=, >, <, >=, <=）时，数值会转换为相同类型进行比较。




let result = "5" == 5; // result是true

逻辑运算：在逻辑运算中，比如&&, ||, !，值会被转换为布尔值。




let result = !!"hello"; // result是true

条件（三元）运算符：三元运算符中的条件会被转换为布尔值。




let result = "hello" ? "yes" : "no"; // result是"yes"

记住隐式类型转换可能会导致意外行为，特别是在涉及算术运算或比较时。因此，最好是显式地进行类型转换，以确保代码的可读性和可维护性。

- 阅读更多 -

【web前端HTML+CSS+JS】--- CSS学习笔记02

System

2024-08-09

所有,css

在CSS中，我们可以使用不同的属性来改变元素的样式。以下是一些常用的CSS属性：

字体属性：
- font-family：定义字体类型。
- font-size：定义字体大小。
- font-weight：定义字体粗细。
- font-style：定义字体风格（如斜体）。
文本属性：
- color：定义文本颜色。
- text-align：定义文本对齐方式。
- text-decoration：定义文本装饰（如下划线）。
- text-transform：定义文本大小写。
背景属性：
- background-color：定义背景颜色。
- background-image：定义背景图片。
- background-repeat：定义背景图片是否重复。
- background-position：定义背景图片的位置。
边框属性：
- border：设置边框的宽度、样式和颜色。
盒模型属性：
- margin：设置外边距。
- padding：设置内边距。
- width和height：控制元素的宽度和高度。
布局属性：
- display：设置元素的显示类型（如块级或内联）。
- position：设置元素的定位方式（静态、相对、绝对或固定）。
- top、right、bottom和left：用于绝对定位的元素，设置其距离四边的距离。
其他属性：
- opacity：设置元素的不透明度。
- filter：应用滤镜效果（如模糊或阴影）。

示例代码：




/* 设置字体类型、大小和颜色 */
p {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  color: #333333;
}
 
/* 设置文本对齐和装饰 */
a {
  text-align: center;
  text-decoration: none;
}
 
/* 设置背景颜色和图片 */
body {
  background-color: #f0f0f0;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-position: center;
}
 
/* 设置边框 */
div {
  border: 1px solid #000000;
}
 
/* 设置外边距、内边距和宽度 */
.box {
  margin: 10px;
  padding: 20px;
  width: 300px;
  height: 200px;
}
 
/* 设置元素的显示类型和定位 */
.fixed-box {
  display: block;
  position: fixed;
  bottom: 0;
  right: 0;
}
 
/* 设置不透明度 */
.transparent-box {
  opacity: 0.5;
}

这些CSS属性可以应用于HTML文档中的任何元素，以改变其样式。通过组合使用这些属性，开发者可以创建出丰富多样的网页布局和设计。

- 阅读更多 -

跟小海一起看下雪——用HTML、CSS和JS实现简单的下雪特效

System

2024-08-09

所有,css




<!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%;
        }
        #snow {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <canvas id="snow"></canvas>
 
    <script>
        const canvas = document.getElementById('snow');
        const ctx = canvas.getContext('2d');
        const width = canvas.width = window.innerWidth;
        const height = canvas.height = window.innerHeight;
        const flakes = [];
        const flakeCount = 200;
 
        canvas.style.display = 'block';
 
        function init() {
            for (let i = 0; i < flakeCount; i++) {
                flakes.push(new Flake());
            }
            animate();
        }
 
        function animate() {
            ctx.clearRect(0, 0, width, height);
            for (let i = 0; i < flakeCount; i++) {
                flakes[i].update();
                flakes[i].render(ctx);
            }
            requestAnimationFrame(animate);
        }
 
        function Flake() {
            this.x = Math.random() * width;
            this.y = Math.random() * height;
            this.size = Math.random() * 2;
            this.speed = Math.random() * 0.2 + 0.05;
            this.speedY = Math.random() * 0.5 + 0.5;
        }
 
        Flake.prototype.update = function() {
            this.x += Math.cos(this.speed);
            this.y += this.speedY;
            this.size = Math.random() * 2;
 
            if (this.x > width || this.x < 0) this.x = Math.random() * width;
            if (this.y > height) this.y = 0;
        };
 
        Flake.prototype.render = function(ctx) {
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.fill();
        };
 
        init();
    </script>
</body>
</html>

这段代码实现了简单的下雪效果。它首先设置了HTML和CSS，创建了一个<canvas>元素，并通过JavaScript初始化了下雪的逻辑。代码中定义了Flake对象来表示每一片雪花，并且在animate函数中更新了每片雪花的位置和大小，实现了动态的下雪效果。

System

2024-08-09

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九宫格切换效果</title>
<style>
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 600px;
    margin: auto;
  }
  .item {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease;
  }
  .item:hover {
    transform: scale(1.1);
  }
</style>
</head>
<body>
 
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>
 
</body>
</html>

这个代码实例展示了如何使用CSS Grid布局创建一个简单的九宫格图片列表，并通过CSS的hover伪类实现鼠标悬停时图片的缩放效果。这是一个简洁而高效的实现方式，适用于教育目的展示基础的前端技术。

- 阅读更多 -

原生html+js+css添加购物车效果

System

2024-08-09

所有,css

要在原生HTML、JS和CSS中添加购物车效果，你可以创建一个简单的购物车界面，并且使用JavaScript来处理添加商品到购物车的逻辑。以下是一个简单的例子：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart Example</title>
<style>
  .cart { border: 1px solid #eee; width: 300px; margin: 20px; padding: 10px; }
  .cart-item { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
  .cart-item-remove { cursor: pointer; }
</style>
</head>
<body>
 
<h1>Product List</h1>
 
<div class="product" data-price="99" data-name="Product 1">
  <button class="add-to-cart">Add to Cart</button>
  Product 1 - $99
</div>
 
<div class="product" data-price="199" data-name="Product 2">
  <button class="add-to-cart">Add to Cart</button>
  Product 2 - $199
</div>
 
<div class="cart">
  <h2>Shopping Cart</h2>
  <div class="cart-items"></div>
</div>
 
<script>
  let cartItems = document.querySelector('.cart-items');
 
  // Event listener for adding to cart
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.add-to-cart').forEach(button => {
      button.addEventListener('click', event => {
        let product = event.target.parentNode;
        addToCart(product);
      });
    });
  });
 
  // Function to add product to cart
  function addToCart(product) {
    let price = product.dataset.price;
    let name = product.dataset.name;
 
    // Create cart item element
    let cartItem = document.createElement('div');
    cartItem.classList.add('cart-item');
    cartItem.innerHTML = `<span>${name} - $${price}</span> <button class="cart-item-remove" data-name="${name}">Remove</button>`;
 
    // Event listener for removing from cart
    cartItem.querySelector('.cart-item-remove').addEventListener('click', function() {
      removeFromCart(this.dataset.name);
    });
 
    // Add cart item to cart
    cartItems.appendChild(cartItem);
  }
 
  // Function to remove product from cart
  function removeFromCart(name) {
    cartItems.querySelectorAll('.cart-item').forEach(item => {
      if(item.textContent.includes(name)) {
        cartItems.removeChild(item);
      }
    });
  }
</script>
 
</body>
</html>

这个例子中，我们有一个产品列表，每个产品都有一个"Add to Cart"按钮。当按钮被点击时，产品信息会被添加到购物车中，显示在页面底部的<div class="cart-items"></div>区域。每个购物车中的条目都有一个"Remove"按钮，点击后会将该产品从购物车中移除。这个例子使用了HTML5的data-*属性来存储产品的价格和名称，这些数据可以

- 阅读更多 -