1. 首页
  2. 标签
  3. Javascript
HTML/JavaScript实现复制文本、复制HTML、复制图片功能
System
2024-08-17
所有,html



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Copy Functions</title>
    <script>
        function copyTextToClipboard(text) {
            var textArea = document.createElement("textarea");
            textArea.value = text;
            
            // 防止元素显示在屏幕上
            textArea.style.position = "fixed";
            textArea.style.top = "0";
            textArea.style.left = "0";
            textArea.style.width = "2em";
            textArea.style.height = "2em";
            textArea.style.padding = "0";
            textArea.style.border = "none";
            textArea.style.outline = "none";
            textArea.style.boxShadow = "none";
            textArea.style.background = "transparent";
            
            document.body.appendChild(textArea);
            textArea.select();
            
            try {
                var successful = document.execCommand('copy');
                var msg = successful ? 'successful' : 'unsuccessful';
                console.log('Copy text command was ' + msg);
            } catch (err) {
                console.error('Oops, unable to copy', err);
            }
            
            document.body.removeChild(textArea);
        }
        
        function copyHTMLToClipboard(html) {
            var tempDiv = document.createElement("div");
            tempDiv.innerHTML = html;
            var selection = window.getSelection();
            var range = document.createRange();
            window.getSelection().removeAllRanges();
            range.selectNodeContents(tempDiv);
            selection.addRange(range);
            var successful = document.execCommand('copy');
            selection.removeAllRanges();
            tempDiv.parentNode.removeChild(tempDiv);
            console.log('Copy HTML command was ' + (successful ? 'successful' : 'unsuccessful'));
        }
        
        function downloadImage(href) {
            var image = new Image();
            image.src = href;
            image.crossOrigin = 'Anonymous';
            image.onload = function() {
                var canvas = document.createElement('canvas');
                canvas.width = image.width;
                canvas.height = image.height;
                var ctx = canvas.getContext('2d');
                ctx.drawImage(image, 0, 0, image.width, image.height);
                var dataURL = canvas.toD
- 阅读更多 -
如何在一个传统的html中，引入vueJs并使用vue复制组件？
System
2024-08-17
所有,html

要在传统的HTML中引入Vue.js并使用组件，你需要按照以下步骤操作：

  1. 在HTML文件中通过<script>标签引入Vue.js。
  2. 创建一个Vue组件。
  3. 在Vue实例中注册该组件，并使用它。

下面是一个简单的例子：




<!DOCTYPE html>
<html>
<head>
    <title>Vue Component Example</title>
</head>
<body>
    <div id="app">
        <!-- 使用my-component组件 -->
        <my-component></my-component>
    </div>
 
    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    
    <!-- Vue组件定义 -->
    <script type="text/x-template" id="my-component-template">
        <div>
            <h1>Hello, Vue Component!</h1>
        </div>
    </script>
 
    <script>
        // 创建Vue组件
        Vue.component('my-component', {
            template: '#my-component-template'
        });
 
        // 创建Vue实例
        new Vue({
            el: '#app'
        });
    </script>
</body>
</html>

在这个例子中，我们通过script标签引入了Vue.js，然后定义了一个简单的Vue组件，并在Vue实例中注册了它。最后，在HTML中通过自定义元素 <my-component></my-component> 使用了这个组件。

- 阅读更多 -
threejs元素周期表-CSS3DRenderer
System
2024-08-17
所有,css3

在Three.js中，要创建一个元素周期表并使用CSS3DRenderer，你需要做以下几步：

  1. 初始化场景、相机和渲染器。
  2. 创建CSS3DRenderer并设置其大小与画布相同。
  3. 为每个元素周期表的元素创建3D对象，并将它们添加到场景中。
  4. 将HTML元素绑定到3D对象，并将它们添加到CSS3DRenderer。
  5. 动画循环中更新渲染器。

以下是一个简化的代码示例：




// 初始化Three.js场景、相机和渲染器
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);
 
// 创建CSS3DRenderer
const cssRenderer = new THREE.CSS3DRenderer();
cssRenderer.setSize(window.innerWidth, window.innerHeight);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = 0;
document.body.appendChild(cssRenderer.domElement);
 
// 创建元素并添加到场景
function createElement(element, position) {
    const elementBox = new THREE.BoxGeometry(1, 1, 1);
    const elementMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0.5 });
    const elementMesh = new THREE.Mesh(elementBox, elementMaterial);
    elementMesh.position.set(position.x, position.y, position.z);
    scene.add(elementMesh);
 
    // 创建HTML元素并添加到CSS3DRenderer
    const htmlElement = document.createElement('div');
    htmlElement.className = 'element';
    htmlElement.textContent = element;
    cssRenderer.render(scene, camera);
    return htmlElement;
}
 
// 添加元素到场景和CSS3DRenderer
const elements = ['H', 'He', 'Li', 'Be', 'B', 'C', 'N', 'O', 'F', 'Ne'];
const positions = [
    { x: 0, y: 0, z: 0 },
    { x: 1, y: 0, z: 0 },
    // ... 其他位置
];
 
elements.forEach((element, index) => {
    const htmlElement = createElement(element, positions[index]);
    cssRenderer.elem.appendChild(htmlElement);
});
 
// 动画循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    cssRenderer.render(scene, camera);
}
 
animate();

这个代码示例创建了一个简单的元素周期表，其中每个元素都是一个Three.js的Mesh对象，每个Mesh都有一个对应的HTML元素与之绑定，并被添加到CSS3DRenderer中。动画循环中更新了渲染器，使得周期表动起来。

- 阅读更多 -
Three.js CSS3D、CSS2D及精灵的区别
System
2024-08-17
所有,css3

在Three.js中，CSS3D、CSS2D和精灵是用于在3D场景中添加CSS样式元素的不同方法。

  1. CSS3D对象是通过将HTML元素作为CSS2DObject添加到3D场景中来工作的，这意味着它们将表现得像3D场景中的2D对象。
  2. CSS2D对象是通过将HTML元素直接放置在2D画布上来工作的，这意味着它们将表现得像2D画布上的普通HTML元素。
  3. 精灵是通过使用SpriteMaterial创建的2D对象，它们可以有2D内容（如图像），但不能有CSS样式。

以下是创建这些对象的简单示例代码：

CSS3D对象




var element = document.createElement( 'div' );
element.style.cssText = 'background: red; width: 100px; height: 100px;';
 
var object = new THREE.CSS3DObject( element );
scene.add( object );

CSS2D对象




var element = document.createElement( 'div' );
element.style.cssText = 'background: red; width: 100px; height: 100px;';
 
var object = new THREE.CSS2DObject( element );
scene.add( object );

精灵对象




var sprite = new THREE.Sprite(new THREE.SpriteMaterial({ map: new THREE.CanvasTexture(createCanvas()) }));
scene.add(sprite);
 
function createCanvas() {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = 100;
    canvas.height = 100;
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, 100, 100);
    return canvas;
}

在这些示例中，我们创建了一个红色的正方形div元素，并将其添加到Three.js场景中。CSS3D对象和CSS2D对象的主要区别在于它们在3D空间中的表现方式。精灵对象则不支持CSS样式，但可以包含图像等材质。

- 阅读更多 -
HTML+CSS+JS实现用户输入数据，表格展示数据
System
2024-08-17
所有,css3

以下是一个简单的HTML、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>User Input Table</title>
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  table, th, td {
    border: 1px solid black;
  }
</style>
</head>
<body>
 
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody id="data-table">
    <!-- Data rows will be added here -->
  </tbody>
</table>
 
<input type="text" id="name-input" placeholder="Name">
<input type="number" id="age-input" placeholder="Age">
<input type="email" id="email-input" placeholder="Email">
<button onclick="addData()">Add Data</button>
 
<script>
function addData() {
  const name = document.getElementById('name-input').value;
  const age = document.getElementById('age-input').value;
  const email = document.getElementById('email-input').value;
 
  const newRow = `<tr>
                    <td>${name}</td>
                    <td>${age}</td>
                    <td>${email}</td>
                  </tr>`;
 
  document.getElementById('data-table').insertAdjacentHTML('beforeend', newRow);
 
  // Clear the input fields after submission
  document.getElementById('name-input').value = "";
  document.getElementById('age-input').value = "";
  document.getElementById('email-input').value = "";
}
</script>
 
</body>
</html>

CSS:




table {
  width: 100%;
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

JavaScript:




function addData() {
  const name = document.getElementById('name-input').value;
  const age = document.getElementById('age-input').value;
  const email = document.getElementById('email-input').value;
 
  const newRow = `<tr>
                    <td>${name}</td>
                    <td>${age}</td>
                    <td>${email}</td>
                  </tr>`;
 
  document.getElementById('data-table').insertAdjacentHTML('beforeend', newRow);
 
  // Clear the input fields after submission
  document.getElementById('name-input').value = "";
  document.getElementById('age-input').value = "";
  document.getElementById('email-input').value = "";
}

这段代码包含了一个表格用于展示数据，以及输入字段和一个按钮用于用户输入数据。当用户填写完毕并点击按钮后，数据将被添加到表格的底部，并且输入字段会被清空以便于新一轮的输入。

- 阅读更多 -
重写alert，自定义js中alert，美化alert
System
2024-08-17
所有,css3

要重写JavaScript中的alert函数，可以创建一个自定义函数来显示自定义警告框，并替换页面上的alert函数。以下是一个简单的示例，使用了prompt样式来实现自定义的alert功能：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Alert</title>
<style>
  .custom-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
</style>
</head>
<body>
 
<button onclick="customAlert('Hello, this is a custom alert!')">Show Custom Alert</button>
 
<script>
  function customAlert(message) {
    // 创建一个alert元素
    var alertDiv = document.createElement('div');
    alertDiv.innerText = message;
    alertDiv.className = 'custom-alert';
    
    // 将其添加到文档中
    document.body.appendChild(alertDiv);
    
    // 设置3秒后关闭警告框
    setTimeout(function() {
      alertDiv.parentNode.removeChild(alertDiv);
    }, 3000);
  }
 
  // 替换window.alert
  window.alert = function(message) {
    customAlert(message);
  };
</script>
 
</body>
</html>

在这个例子中，我们创建了一个名为customAlert的函数，它接受一个消息作为参数，并显示一个带有样式的自定义警告框。然后，我们覆盖了window.alert方法，使得调用alert()时实际上调用的是我们的自定义函数。

这只是一个基本示例，您可以根据需要添加更多功能，例如关闭按钮、动画效果、更复杂的样式等。

- 阅读更多 -
css + js 超好看的消息提示
System
2024-08-17
所有,css3

您可以使用纯CSS创建一个简单的消息提示框，然后用JavaScript来显示或隐藏它。以下是一个例子：

HTML:




<div id="message" class="message">这是一个超好看的消息提示！</div>
<button id="showMessage">显示消息</button>
<button id="hideMessage">隐藏消息</button>

CSS:




.message {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: #1976d2;
  color: white;
  padding: 15px;
  border-radius: 5px;
  opacity: 0;
  transition: all 0.3s ease;
}
 
.message.visible {
  display: block;
  opacity: 1;
}

JavaScript:




document.getElementById('showMessage').addEventListener('click', function() {
  var message = document.getElementById('message');
  message.classList.add('visible');
});
 
document.getElementById('hideMessage').addEventListener('click', function() {
  var message = document.getElementById('message');
  message.classList.remove('visible');
});

这个例子中，.message 类定义了消息提示的基本样式，并且默认不显示（display: none）。当用户点击 "显示消息" 按钮时，会添加一个 .visible 类，使消息框显示并渐变出现。点击 "隐藏消息" 按钮则会移除 .visible 类，消息框会渐变消失。这个例子展示了如何使用CSS和JavaScript来创建简单的UI交互效果。

- 阅读更多 -
fabric.js 实现元素拖拽、引入图片、标注交互
System
2024-08-17
所有,javascript

以下是一个使用fabric.js实现拖拽元素、引入图片并添加标注的简单示例代码。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fabric.js Drag and Drop Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <input type="file" id="fileUploader" accept="image/*" />
 
    <script>
        const canvas = new fabric.Canvas('canvas');
        const fileUploader = document.getElementById('fileUploader');
 
        // 监听文件上传
        fileUploader.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (!file) return;
 
            // 创建图片元素
            const img = new Image();
            img.onload = () => {
                const imgInstance = new fabric.Image(img, {
                    left: 50,
                    top: 50,
                    width: 100,
                    height: 100,
                    originX: 'left',
                    originY: 'top'
                });
                canvas.add(imgInstance);
            };
            img.src = URL.createObjectURL(file);
        });
 
        // 初始化拖拽功能
        canvas.on('object:moving', function(e) {
            e.target.opacity = 0.5;
        });
        canvas.on('object:modified', function(e) {
            e.target.opacity = 1;
        });
 
        // 这段代码用于添加标注，可以根据需要进行扩展
        canvas.on('object:selected', (e) => {
            const text = new fabric.Text('注释', {
                left: e.target.getLeft() + 10,
                top: e.target.getTop() - 20,
                fontSize: 12
            });
            canvas.add(text);
        });
    </script>
</body>
</html>

这段代码首先引入了fabric.js库，并创建了一个<canvas>元素。它还包括了一个文件上传器，允许用户上传图片。上传的图片会被转换成fabric.js图片对象，并添加到画布上。此外，代码还初始化了拖拽功能，并提供了一个简单的标注示例，当选中元素时会添加一个文本标注。

- 阅读更多 -
前端区域块拖拽的纯css纯js、splitpanes插件的方法
System
2024-08-17
所有,css3

要实现一个前端区块的拖拽功能，你可以使用纯CSS3或纯JavaScript，也可以使用splitpanes插件。以下是每种方法的简要说明和示例代码：

  1. 纯CSS3方法：

CSS3可以通过resize属性和grid布局实现拖拽功能。但这种方法不具备复杂的交互，适合简单的拖拽操作。




.container {
  display: grid;
  grid-template-columns: 1fr 3px 1fr;
}
 
.resizable {
  overflow: hidden;
  resize: horizontal;
  border: 1px solid #000;
  padding: 10px;
}
 
.resizable:hover {
  cursor: e-resize;
}



<div class="container">
  <div class="resizable">区块1</div>
  <div class="resizable">区块2</div>
</div>
  1. 纯JavaScript方法：

使用JavaScript可以实现更复杂的拖拽功能。




<div class="container">
  <div class="block" id="block1">区块1</div>
  <div class="block" id="block2">区块2</div>
</div>



const container = document.querySelector('.container');
let dragging = null;
 
container.addEventListener('mousedown', (e) => {
  if (e.target.classList.contains('block')) {
    dragging = e.target;
    document.body.style.cursor = 'ew-resize';
  }
});
 
document.addEventListener('mousemove', (e) => {
  if (dragging) {
    const x = e.clientX - container.offsetLeft;
    dragging.style.width = `${x}px`;
  }
});
 
document.addEventListener('mouseup', (e) => {
  dragging = null;
  document.body.style.cursor = '';
});
  1. 使用splitpanes插件：

Splitpanes是一个流行的JavaScript库，可以轻松地创建可拖拽分割的区块。

首先，你需要在HTML中引入splitpanes库：




<link rel="stylesheet" href="https://unpkg.com/splitpanes@latest/dist/splitpanes.css">
<script src="https://unpkg.com/splitpanes@latest/dist/splitpanes.js"></script>

然后，你可以这样使用它：




<div class="splitpanes">
  <div class="splitpanes__panel">区块1</div>
  <div class="splitpanes__panel">区块2</div>
</div>



Splitpanes.init({
  element: document.querySelector('.splitpanes')
});

以上三种方法都可以实现前端区块拖拽的功能，具体使用哪一种取决于你的项目需求和个人喜好。

- 阅读更多 -
ThreeJS教程：CSS3批量标注多个标签
System
2024-08-17
所有,css3

在Three.js中，我们可以使用CSS3DObject和CSS3DRenderer来将CSS样式的元素批量标注到3D场景中的多个标签上。以下是一个简单的例子，展示如何实现这一功能：




import * as THREE from 'three';
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
 
// 设置场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建CSS3DObject并加入到场景中
function addCSSObject(text, x, y, z) {
  const element = document.createElement('div');
  element.textContent = text;
  element.style.cssText = `
    position: absolute;
    width: 50px;
    height: 50px;
    color: #ffffff;
    background-color: #000000;
    text-align: center;
    line-height: 50px;
  `;
  
  const object = new CSS3DObject(element);
  object.position.set(x, y, z);
  scene.add(object);
  
  return object;
}
 
// 批量添加标签
const labels = ['A', 'B', 'C', 'D', 'E'].map((text, index) => {
  const x = 50 * (index - 2);
  const y = 50 * (index - 2);
  const z = 0;
  return addCSSObject(text, x, y, z);
});
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
 
animate();

在这个例子中，我们首先创建了一个addCSSObject函数，它接受文本和位置参数，创建一个div元素，并将其转换为CSS3DObject。然后我们用一个map函数批量创建了五个标签，并将它们添加到场景中。最后，我们进入了一个简单的渲染循环。这个代码片段可以作为一个起点，用于将CSS样式的标签应用于Three.js场景中的多个对象。

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