Tech Blog

2024-08-11

在HTML5中，可以使用<input>元素的multiple属性来实现多文件上传功能。这个属性允许用户选择多个文件进行上传。

以下是一个简单的HTML代码示例，展示了如何使用multiple属性来实现多文件上传：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多文件上传示例</title>
</head>
<body>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="files">选择要上传的文件：</label>
        <input type="file" id="files" name="files" multiple>
        <input type="submit" value="上传">
    </form>
</body>
</html>

在这个示例中，<input type="file" multiple>允许用户选择多个文件进行上传。当表单被提交时，这些文件会被发送到服务器上的/upload路径。服务器需要有相应的处理程序来接收和处理上传的文件数据。

- 阅读更多 -

uniapp 强制刷新子组件

System

2024-08-11

所有,html5

在uniapp中，如果你需要强制子组件进行刷新，可以通过以下几种方式实现：

使用v-if来控制组件的销毁和重建。
通过父组件向子组件传递一个变量，并在该变量变化时触发子组件的更新。

以下是使用v-if实现强制刷新的示例代码：




<template>
  <view>
    <child-component v-if="refreshChild"></child-component>
    <button @click="refresh">刷新子组件</button>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      refreshChild: true
    };
  },
  methods: {
    refresh() {
      // 切换refreshChild的值来强制重建子组件
      this.refreshChild = false;
      this.$nextTick(() => {
        this.refreshChild = true;
      });
    }
  }
};
</script>

在这个例子中，当点击按钮时，refresh 方法会被调用，通过切换 refreshChild 的值，v-if 指令会销毁并重建子组件。这里使用了 this.$nextTick 确保在DOM更新后再进行操作，以避免可能的渲染问题。

- 阅读更多 -

DOM基础（基础操作元素修改内容和样式）

System

2024-08-11

所有,html5




<!DOCTYPE html>
<html>
<head>
    <title>DOM 基础操作示例</title>
    <script>
        function changeContent() {
            var element = document.getElementById("content");
            element.textContent = "新的内容";
        }
 
        function changeStyle() {
            var element = document.getElementById("styleExample");
            element.style.color = "blue";
            element.style.fontSize = "20px";
        }
    </script>
</head>
<body>
    <h1 id="content">原始内容</h1>
    <button onclick="changeContent()">修改内容</button>
 
    <p id="styleExample">这是一个文本示例。</p>
    <button onclick="changeStyle()">修改样式</button>
</body>
</html>

这段代码演示了如何使用JavaScript来修改HTML元素的内容和样式。当用户点击“修改内容”按钮时，会调用changeContent函数，该函数会获取ID为content的元素，并将其文本内容修改为"新的内容"。当用户点击“修改样式”按钮时，会调用changeStyle函数，该函数会获取ID为styleExample的元素，并修改其颜色和字体大小。

- 阅读更多 -

uniapp H5嵌套通讯方案-webview&iframe

System

2024-08-11

所有,html5

在uniapp中，可以使用web-view组件来嵌入网页内容，这是一种比较常用的方式。但是，由于uniapp的web-view是基于WebView的，在某些情况下可能会有兼容性问题或性能限制。

对于一些特定的场景，例如需要嵌入一些简单的内容，可以使用iframe标签。uniapp支持iframe标签，可以直接在页面模板中使用。

以下是一个使用iframe嵌入内容的示例：




<template>
  <view>
    <!-- 使用web-view组件嵌入网页内容 -->
    <web-view src="https://www.example.com"></web-view>
 
    <!-- 使用iframe嵌入简单的内容 -->
    <iframe src="https://www.example.com" width="100%" height="500px"></iframe>
  </view>
</template>

请注意，由于uniapp的web-view组件是基于WebView的，在App平台可能需要额外配置，并且在不同的平台（如小程序）上可能不被支持。因此，在使用时需要根据实际需求和平台特性进行选择。

System

2024-08-11

所有,html5




// 获取页面中的视频元素和按钮
const videoElement = document.querySelector('video');
const startRecordingButton = document.getElementById('start-recording');
const stopRecordingButton = document.getElementById('stop-recording');
 
let mediaRecorder;
let recordedBlobs;
 
// 开始录制的函数
function startRecording() {
  recordedBlobs = [];
  const stream = videoElement.srcObject;
  mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
 
  mediaRecorder.ondataavailable = event => recordedBlobs.push(event.data);
  mediaRecorder.start();
  console.log('Recording started');
}
 
// 停止录制的函数
function stopRecording() {
  mediaRecorder.stop();
  console.log('Recording stopped');
}
 
// 处理录制结束的函数
mediaRecorder.onstop = e => {
  const superBuffer = new Blob(recordedBlobs, { type: 'video/webm' });
  // 创建一个下载链接
  const url = URL.createObjectURL(superBuffer);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'recording.webm';
  a.click();
  // 清理资源
  window.URL.revokeObjectURL(url);
};
 
// 监听按钮点击事件
startRecordingButton.addEventListener('click', startRecording);
stopRecordingButton.addEventListener('click', stopRecording);

这段代码实现了使用HTML5 MediaRecorder API进行视频录制的基本功能。首先，获取页面中的视频元素和开始/停止按钮。然后定义了开始录制和停止录制的函数，并在录制结束时处理下载录制内容的逻辑。最后，为按钮绑定点击事件监听器。

- 阅读更多 -

用HTML5实现灯笼效果

System

2024-08-11

所有,html5

在HTML5中，可以使用CSS3的动画特性来实现灯笼效果。以下是一个简单的例子，展示了如何使用HTML和CSS创建一个简单的灯笼动画：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Lamp Effect</title>
<style>
  .lamp {
    width: 100px;
    height: 200px;
    background-color: #ffeb3b;
    border-radius: 10px;
    position: relative;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    animation: lampGlow 3s ease-in-out infinite;
    margin: 50px auto;
  }
 
  .lamp::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 50px;
    width: 50px;
    height: 50px;
    background-color: #000;
    border-radius: 50%;
  }
 
  .lamp::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 10px;
    width: 80px;
    height: 80px;
    background-color: #ffeb3b;
    border-radius: 50%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  }
 
  @keyframes lampGlow {
    0% {
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    }
    50% {
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
    }
    100% {
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    }
  }
</style>
</head>
<body>
<div class="lamp"></div>
</body>
</html>

这段代码创建了一个简单的灯笼效果。.lamp类定义了灯笼的基本样式，并使用CSS动画使其发出光芒。lampGlow关键帧动画使灯笼的盒阴影在大小和透明度上变化，产生灯笼闪烁的效果。这个例子展示了如何使用CSS创建交互式的视觉效果，而不需要依赖Flash或其他复杂的技术。

System

2024-08-11

所有,html5

HTML5 引入了许多新的 input 类型，以及一些新的表单属性，以改善表单的功能和可访问性。

新的 input 类型包括：

email：要求输入格式为电子邮件的文本。
url：要求输入格式为URL的文本。
number：要求输入格式为数字的文本。
range：要求输入一定范围内的数字。
date：允许输入日期。
time：允许输入时间。
week：允许输入周。
month：允许输入月份。
search：用于搜索框，可以包含清除按钮。
color：允许输入颜色值。

新的表单属性包括：

placeholder：提供输入字段的提示信息（例如，“请输入您的姓名”）。
autofocus：页面加载时自动聚焦到该表单元素。
required：要求在提交表单之前填写该字段。
pattern：定义输入数据需要匹配的正则表达式。
min 和 max：设置 number 或 range 类型输入的最小值和最大值。
step：设置 number 或 range 类型输入的合法数字间隔。
list：与 datalist 配合使用，为输入框提供预定义值的下拉列表。
multiple：允许输入字段接受多个值（多文件上传等）。

示例代码：




<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
 
  <label for="website">URL:</label>
  <input type="url" id="website" name="website">
 
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="0" max="100">
 
  <label for="volume">Volume:</label>
  <input type="range" id="volume" name="volume" min="0" max="100">
 
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
 
  <label for="time">Next Train:</label>
  <input type="time" id="time" name="time">
 
  <label for="search">Search:</label>
  <input type="search" id="search" name="search" autocomplete="off">
 
  <label for="color">Favorite Color:</label>
  <input type="color" id="color" name="color">
 
  <input type="submit" value="Submit">
</form>

在这个示例中，我们创建了一个包含各种新 input 类型的表单。每个 input 元素都有一个标签与其关联，以提高表单的可访问性。其中一些 input 元素使用了新的属性，例如，通过 required 属性，我们可以确保字段在提交前必须填写。

System

2024-08-11

所有,html5




<template>
  <div class="drag-container">
    <div
      v-for="(item, index) in list"
      :key="item.id"
      class="drag-item"
      :draggable="true"
      @dragstart="handleDragStart($event, item)"
      @dragover.prevent="handleDragOver($event)"
      @drop="handleDrop($event, item, index)"
    >
      {{ item.name }}
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        // ...更多项目
      ],
      draggedItem: null, // 正在拖动的项
      draggedIndex: null, // 正在拖动的项的初始索引
    };
  },
  methods: {
    handleDragStart(event, item) {
      this.draggedItem = item;
      // 设置要传递的数据
      event.dataTransfer.setData('text', item.id);
    },
    handleDragOver(event) {
      // 这是必要的，否则drop事件不会触发
      event.preventDefault();
    },
    handleDrop(event, item, index) {
      const draggedItemId = event.dataTransfer.getData('text');
      const draggedItem = this.list.find(i => i.id === parseInt(draggedItemId));
      this.draggedIndex = this.list.indexOf(item);
      // 移除原位置的元素
      this.list.splice(this.draggedIndex, 1);
      // 在新位置插入元素
      this.list.splice(index, 0, draggedItem);
    }
  }
};
</script>
 
<style scoped>
.drag-container {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background-color: #f9f9f9;
}
.drag-item {
  user-select: none;
  margin: 10px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
}
</style>

这个简单的Vue组件展示了如何使用HTML5拖放API来实现一个列表的排序功能。用户可以点击并拖动列表中的项来重新排列它们。代码中包含了拖动开始、拖动过程中的事件处理以及放置的逻辑，并且使用了Vue的响应式数据绑定来更新列表的顺序。

- 阅读更多 -

HTML5 ＜select＞标签

System

2024-08-11

所有,html5

HTML5 <select> 标签用于创建下拉列表。用户可以从预定义的选项列表中选择一个选项。

基本的 <select> 标签示例：




<select>
  <option value="option1">选项 1</option>
  <option value="option2">选项 2</option>
  <option value="option3">选项 3</option>
</select>

你可以使用 multiple 属性允许用户选择多个选项：




<select multiple>
  <option value="option1">选项 1</option>
  <option value="option2">选项 2</option>
  <option value="option3">选项 3</option>
</select>

使用 size 属性可以显示多个选项：




<select size="3">
  <option value="option1">选项 1</option>
  <option value="option2">选项 2</option>
  <option value="option3">选项 3</option>
</select>

你可以通过设置 disabled 属性禁用 <option>：




<select>
  <option value="option1">选项 1</option>
  <option value="option2" disabled>选项 2</option>
  <option value="option3">选项 3</option>
</select>

使用 required 属性可以使 <select> 成为必填项：




<select required>
  <option value="option1">选项 1</option>
  <option value="option2">选项 2</option>
  <option value="option3">选项 3</option>
</select>

使用 placeholder 属性可以添加一个默认的提示信息：




<select required>
  <option value="" disabled selected>请选择一个选项</option>
  <option value="option1">选项 1</option>
  <option value="option2">选项 2</option>
  <option value="option3">选项 3</option>
</select>

这些是 <select> 标签的基本用法和高级用法。

System

2024-08-11

所有,html5

以下是一个简单的HTML5页面示例，用于创建一个表白网页，包含3D旋转的雪花和展开相册的效果。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>七夕情人节表白</title>
<style>
  /* 雪花样式 */
  .snow {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 1000;
  }
  .flake {
    position: absolute;
    top: 0;
    color: #FFD700;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    font-size: 10px;
    overflow: hidden;
  }
  /* 相册展开样式 */
  .album {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    transform-style: preserve-3d;
    transform: translateZ(-100px) rotateX(90deg);
    transition: transform 1s ease-in-out;
    pointer-events: none;
  }
  .album.open {
    transform: translateZ(-100px) rotateX(0);
  }
  .album img {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transition: transform 1s ease-in-out;
  }
  .album img:first-child {
    transform: rotateY(0deg) translateZ(100px);
  }
  .album.open img:first-child {
    transform: rotateY(180deg) translateZ(100px);
  }
  /* 其他样式 */
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    color: #FFD700;
    font-size: 20px;
    text-shadow: 0 0 10px #FFD700;
  }
</style>
</head>
<body>
<div class="snow">
  <div class="flake">❤</div>
</div>
<div class="album">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>
<script>
  // 雪花动画
  function snowFall() {
    const snow = document.querySelector('.snow');
    const flake = document.querySelector('.flake');
    let x = Math.random() * window.innerWidth;
    let y = Math.random() * window.innerHeight;
    let size = Math.random() * 10;
    flake.style.left = x + 'px';
    flake.style.top = y + 'px';
    flake.style.fontSize = size + 'px';
    snow.appendChild(flake.cloneNode(true));
  }
 
  setInterval(snowFall, 500);
 
  // 相册展开动画
  const album = document.querySelector('.album');
  album.addEventListener('click', () => {
    album.classList.add('open');
  });
</script>
</body>
</html>

这段代码包含了一个简单的3D旋转雪花效果和点击相册触发的展开动画。你需要替换image1.jpg, \`image2.jpg

- 阅读更多 -