标签 Javascript 下的文章

2024-08-21

在HTML中使用JavaScript调用摄像头可以通过navigator.mediaDevices.getUserMedia() API实现。以下是一个简单的例子，展示了如何在网页中获取视频流并显示在<video>元素中。




<!DOCTYPE html>
<html>
<head>
<title>Camera Example</title>
</head>
<body>
 
<video id="video" width="640" height="480" autoplay></video>
 
<script>
  const videoElement = document.getElementById('video');
 
  // 检查浏览器是否支持getUserMedia
  if (navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ video: true }) // 请求视频流
      .then(function(stream) {
        videoElement.srcObject = stream; // 将视频流设置到<video>元素
      })
      .catch(function(err) {
        console.error("Error: ", err); // 处理错误
      });
  } else {
    alert('不幸的是，你的浏览器不支持getUserMedia');
  }
</script>
 
</body>
</html>

在这个例子中，<video>元素用于显示摄像头捕获的内容。navigator.mediaDevices.getUserMedia函数会请求获取视频流（video），如果允许，则用户的摄像头会开始向页面提供实时视频流。如果用户拒绝或者浏览器不支持，会抛出错误，并显示相应的提示信息。

- 阅读更多 -

Three.js教程：顶点颜色数据插值计算

System

2024-08-21

所有,css3




// 假设我们已经有了一个Three.js的场景(scene)和一个渲染器(renderer)
 
// 创建一个新的几何体对象
var geometry = new THREE.BufferGeometry();
 
// 创建顶点位置的数据
var vertices = new Float32Array([
    0.0, 0.0, 0.0, // 顶点1坐标
    1.0, 0.0, 0.0, // 顶点2坐标
    0.5, 1.0, 0.0  // 顶点3坐标
]);
 
// 将顶点位置数据分配给几何体属性
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
 
// 创建顶点颜色数据
var colors = new Float32Array([
    1.0, 0.0, 0.0, // 顶点1颜色（红色）
    0.0, 1.0, 0.0, // 顶点2颜色（绿色）
    0.0, 0.0, 1.0  // 顶点3颜色（蓝色）
]);
 
// 将顶点颜色数据分配给几何体属性
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
 
// 设置材质，使用顶点颜色进行着色
var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors });
 
// 创建一个网格对象
var mesh = new THREE.Mesh(geometry, material);
 
// 将网格添加到场景中
scene.add(mesh);
 
// 渲染场景
renderer.render(scene, camera);

这段代码创建了一个简单的几何体，并为它定义了顶点颜色。然后，它使用了MeshBasicMaterial材质，设置vertexColors属性为THREE.VertexColors来指定使用顶点颜色进行着色。最后，将网格添加到场景中并进行渲染。这样，三角形的每个顶点都会被它自己定义的颜色所着色。

- 阅读更多 -

探索tram.js：JavaScript中跨浏览器的CSS3过渡新纪元

System

2024-08-21

所有,css3




// 引入tram-one，它是一个小型的，模块化的库，可以用于创建和管理Web动画
import { css, transform, transition } from 'tram-one';
 
// 定义一个元素，并添加一个过渡效果
const element = document.createElement('div');
element.textContent = 'Hello, world!';
element.style.marginTop = '20px';
element.style.width = '100px';
element.style.height = '100px';
element.style.background = 'blue';
 
// 应用CSS样式和过渡效果
css(element, `
  transition: ${transition(transform, { duration: 2000 })}, background-color 1s;
  ${transform} : translateX(100px);
  background-color: red;
`);
 
// 触发过渡效果
setTimeout(() => {
  css(element, `${transform}: translateX(200px);`);
}, 1000);
 
// 在页面上显示元素
document.body.appendChild(element);

这段代码使用了tram-one库来创建一个具有过渡效果的元素。首先，创建了一个div元素，并对它应用了CSS样式和过渡效果。然后，通过setTimeout在指定的时间后触发了一个位置的变化，从而启动了定义好的过渡效果。最后，将元素添加到页面的body中进行显示。这个例子展示了如何使用tram-one库来简化CSS过渡的创建和管理。

System

2024-08-21

所有,css3




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>七夕情人节表白</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #222;
            color: #fff;
            font-family: Arial, sans-serif;
        }
        .arrow {
            width: 100px;
            height: 100px;
            background: #fff;
            position: relative;
            animation: fly 5s infinite alternate ease-in-out;
        }
        .arrow:before, .arrow:after {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        .arrow:before {
            width: 20px;
            height: 20px;
            background: #222;
            border-radius: 50%;
            top: -10px;
        }
        .arrow:after {
            width: 10px;
            height: 10px;
            background: #fff;
            border-radius: 50%;
            top: -5px;
            transform: translateX(-50%) rotate(45deg);
        }
        @keyframes fly {
            from {
                transform: translateX(-50%) rotate(0deg);
            }
            to {
                transform: translateX(-50%) rotate(360deg);
                transform: translateY(200px);
            }
        }
    </style>
</head>
<body>
    <div class="arrow"></div>
</body>
</html>

这段代码使用了CSS3的@keyframes规则创建了一个“箭穿心”的动画效果，你可以将其嵌入到你的HTML文件中，作为七夕情人节表白页面的一个特色动画。

- 阅读更多 -

Three.js前端3D开发：使用 CSS3DRenderer 渲染全景图

System

2024-08-21

所有,css3




import * as THREE from 'three';
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 
let scene, camera, renderer, labelRenderer;
let mesh, label;
 
init();
animate();
 
function init() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xeeeeee);
 
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 2, 5);
 
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
 
    labelRenderer = new CSS3DRenderer();
    labelRenderer.setSize(window.innerWidth, window.innerHeight);
    labelRenderer.domElement.style.position = 'absolute';
    labelRenderer.domElement.style.top = 0;
    document.body.appendChild(labelRenderer.domElement);
 
    // 加载GLTF模型（假设有一个包含全景图的模型）
    const loader = new GLTFLoader();
    loader.load('path/to/model.gltf', (gltf) => {
        mesh = gltf.scene;
        scene.add(mesh);
 
        // 创建CSS3DObject对象，并关联全景图标签
        label = new CSS3DObject(document.querySelector('.panorama-label'));
        label.position.set(0, 0, 0);
        scene.add(label);
 
        // 更新全景图标签的位置与模型对齐
        function updateLabelPosition() {
            const position = mesh.position;
            label.position.set(position.x, position.y, position.z);
            label.rotation.set(mesh.rotation.x, mesh.rotation.y, mesh.rotation.z);
        }
        mesh.addEventListener('update', updateLabelPosition);
        updateLabelPosition();
    });
 
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
 
        renderer.setSize(window.innerWidth, window.innerHeight);
        labelRenderer.setSize(window.innerWidth, window.innerHeight);
    }
    window.addEventListener('resize', onWindowResize, false);
}
 
function animate() {
    requestAnimationFrame(

System

2024-08-21

所有,css3

以下是一个简单的HTML页面布局示例，使用了HTML5和CSS3，采用了“三行模式”布局：头部（header）、侧边栏（sidebar）和内容区（content）。




<!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 {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  header, nav, section, aside, footer {
    margin: 5px;
    padding: 10px;
    border: 1px solid #ddd;
  }
  header {
    background-color: #f8f8f8;
    text-align: center;
    padding: 20px 0;
  }
  nav {
    text-align: center;
    background-color: #f2f2f2;
  }
  section {
    text-align: center;
    background-color: #e6e6e6;
  }
  aside {
    text-align: center;
    background-color: #d0d0d0;
  }
  footer {
    background-color: #f8f8f8;
    text-align: center;
    padding: 20px 0;
  }
</style>
</head>
<body>
<header>
  <h1>页头</h1>
</header>
<nav>
  <ul>
    <li><a href="#">导航链接1</a></li>
    <li><a href="#">导航链接2</a></li>
  </ul>
</nav>
<section>
  <h2>主要内容</h2>
  <p>这里是主要内容区域...</p>
</section>
<aside>
  <h3>侧边信息</h3>
  <p>这里是侧边信息...</p>
</aside>
<footer>
  <p>页脚信息</p>
</footer>
</body>
</html>

这个示例展示了如何使用HTML5和CSS3创建一个基本的三行模式布局，具有头部、侧边栏和内容区。通过CSS样式，我们设定了不同区域的背景色和边框，以便更好地展示页面布局。

System

2024-08-21

所有,css3

在Vue2项目中使用Three.js并在3D模型上方显示信息框，可以使用CSS3DSprite创建一个精灵模型来代表信息框。以下是一个简化的例子：

安装Three.js:




npm install three

在Vue组件中创建Three.js场景，并添加3D模型和CSS3DSprite信息框:




<template>
  <div ref="threeContainer"></div>
</template>
 
<script>
import * as THREE from 'three';
import { CSS3DRenderer, CSS3DSprite } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
 
export default {
  name: 'ThreeModelWithLabel',
  mounted() {
    this.initThree();
    this.add3DModel();
    this.addLabelSprite();
    this.animate();
  },
  methods: {
    initThree() {
      const width = this.$refs.threeContainer.clientWidth;
      const height = this.$refs.threeContainer.clientHeight;
 
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(width, height);
      this.$refs.threeContainer.appendChild(this.renderer.domElement);
 
      this.cssRenderer = new CSS3DRenderer();
      this.cssRenderer.setSize(width, height);
      this.cssRenderer.domElement.style.position = 'absolute';
      this.cssRenderer.domElement.style.top = 0;
      this.$refs.threeContainer.appendChild(this.cssRenderer.domElement);
 
      this.camera.position.z = 5;
    },
    add3DModel() {
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      this.cube = new THREE.Mesh(geometry, material);
      this.scene.add(this.cube);
    },
    addLabelSprite() {
      const sprite = new CSS3DSprite(document.createElement('div'));
      sprite.scale.set(0.2, 0.2, 0.2);
      sprite.position.set(0, 1, 0); // 在模型上方1单位处创建精灵模型
      sprite.material.transparent = true;
      this.scene.add(sprite);
      this.labelSprite = sprite;
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.renderer.render(this.scene, this.camera);
      this.cssRenderer.render(this.scene, this.camera);
 
      // 示例：旋转模型和标签位置
      this.cube.rotation.x += 0.01;
      this.cube.rotation.y += 0.01;
      this.labelSprite.rotation.x += 0.01;
      this.labelSprite.rotat

- 阅读更多 -

在Vue中使用JavaScript修改CSS

System

2024-08-21

所有,css

在Vue中，您可以使用几种方法来使用JavaScript修改CSS。以下是一些常见的方法：

直接修改element.style：




// 假设有一个元素的ref为myElement
this.$refs.myElement.style.color = 'red';

使用v-bind:style绑定内联样式：




<div :style="{ color: dynamicColor, fontSize: dynamicFontSize + 'px' }"></div>




data() {
  return {
    dynamicColor: 'red',
    dynamicFontSize: 20
  };
}

使用CSS类绑定通过Vue的class或style绑定应用样式：




<div :class="{ active: isActive }"></div>




data() {
  return {
    isActive: true
  };
}

使用Vue的v-bind:class动态切换类：




<div :class="{ active: hasActivated, 'text-danger': error }"></div>




data() {
  return {
    hasActivated: true,
    error: false
  };
}

使用Vue的v-bind:style绑定一个样式对象：




<div :style="dynamicStyles"></div>




data() {
  return {
    dynamicStyles: {
      color: 'red',
      fontSize: '20px'
    }
  };
}

使用第三方库如animate.css通过条件渲染类名：




<div class="animate__animated animate__bounce" v-if="shouldAnimate"></div>




data() {
  return {
    shouldAnimate: true
  };
}

使用JavaScript操作CSS规则（需要访问全局document对象）：




// 获取第一个样式表
let sheet = document.styleSheets[0];
 
// 在样式表的最后添加一条规则
sheet.insertRule('body { background-color: blue; }', sheet.cssRules.length);

选择合适的方法取决于您的具体需求和场景。在Vue中，通常推荐使用数据绑定来修改样式，因为这有利于Vue的响应式系统工作。

- 阅读更多 -

【HTML CSS JS 实现QQ2009界面——附源代码】

System

2024-08-21

所有,css

由于原始代码已经非常接近实现QQ2009界面的效果，我们可以直接使用原始代码作为解决方案。以下是核心的HTML和CSS代码示例：

HTML:




<!DOCTYPE html>
<html>
<head>
    <title>QQ2009</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="qq2009">
        <div class="header">
            <div class="logo">
                QQ2009
            </div>
            <div class="menu">
                <ul>
                    <li><a href="#">菜单1</a></li>
                    <li><a href="#">菜单2</a></li>
                    <li><a href="#">菜单3</a></li>
                </ul>
            </div>
        </div>
        <div class="content">
            <!-- 这里放置QQ的主要内容 -->
        </div>
    </div>
</body>
</html>

CSS (style.css):




/* 引入了原始代码中的style.css文件 */

请注意，你需要将CSS文件包含进来，以便获得完整的样式效果。这个示例仅展示了HTML结构和如何引入CSS文件，实际的样式和布局需要参考原始的style.css文件。

- 阅读更多 -

使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面

System

2024-08-21

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gaming Tools Showcase</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Gaming Tools Showcase</h1>
        <input type="text" id="search" placeholder="Search for a game or tool..." />
    </header>
    <section>
        <ul id="games">
            <!-- Game and tool cards will be added dynamically using JavaScript -->
        </ul>
    </section>
    <script src="script.js"></script>
</body>
</html>




/* styles.css */
body {
    font-family: Arial, sans-serif;
    padding: 0;
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
 
header {
    background-color: #333;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
header h1 {
    margin: 0;
}
 
header input {
    padding: 8px;
    font-size: 16px;
}
 
section {
    flex: 1;
    padding: 10px;
}
 
#games {
    list-style-type: none;
    padding: 0;
}
 
/* Card styles */
.card {
    margin-bottom: 10px;
    background-color: #f3f3f3;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}
 
.card img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}
 
.card h2 {
    margin: 0;
    font-size: 16px;
}
 
.card p {
    margin: 0;
    color: #666;
}




// script.js
document.addEventListener('DOMContentLoaded', function() {
    var searchInput = document.getElementById('search');
    var gameCards = document.getElementById('games').getElementsByClassName('card');
 
    searchInput.addEventListener('input', function() {
        var searchQuery = searchInput.value.toLowerCase();
        Array.from(gameCards).forEach(function(card) {
            var title = card.querySelector('h2').textContent.toLowerCase();
            if (title.indexOf(searchQuery) !== -1) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
    });
});

这个示例展示了如何创建一个简单的响应式搜索界面，用户可以在其中输入以搜索游戏或工具名称。JavaScript 监听输入框的变化，并使用数组的 filter 方法来过滤结果，从而实现本地

- 阅读更多 -