标签 html5 下的文章

2024-08-15

onHide和onUnload是Uni-app中页面生命周期的方法，它们通常在页面隐藏或卸载时触发。如果你发现这些方法不触发，可能是以下原因：

方法拼写错误：检查方法名是否拼写正确。
生命周期错误：确保你的方法在正确的生命周期内。
事件绑定错误：确保你在页面的正确位置绑定了事件监听器。
页面错误导致：可能存在其他错误导致页面渲染异常，影响到生命周期的正常执行。

解决方法：

检查拼写：确认onHide和onUnload方法名称拼写正确。
检查生命周期：确保你的方法在onHide或onUnload适当的生命周期内。
检查事件绑定：确保你在页面的script标签中正确绑定了方法到生命周期钩子上。
检查代码错误：查看其他代码是否有错误，并修正它们，确保页面正确渲染和运行。

示例代码：




export default {
  onHide() {
    // 页面隐藏时的处理逻辑
    console.log('页面 onHide');
  },
  onUnload() {
    // 页面卸载时的处理逻辑
    console.log('页面 onUnload');
  }
}

确保以上步骤正确无误，通常可以解决onHide和onUnload不触发的问题。如果问题依然存在，可以查看官方文档或者社区支持寻求帮助。

HTML5 FormData 方法介绍

2024-08-15

FormData 对象用以构建可用于提交的表单数据。它可以更加容易地发送表单数据，包括文件，而不需要构建一个字符串。

方法：

new FormData(): 创建一个新的 FormData 对象。
append(key, value): 添加一个新的键值对到 FormData 对象中。
delete(key): 从 FormData 对象中删除指定的键。
get(key): 获取指定键的第一个值。
getAll(key): 获取指定键的所有值。
set(key, value): 设置指定键的值。如果该键已存在，则会覆盖它。
has(key): 返回一个布尔值，表示 FormData 对象是否包含某个键。
entries(): 返回一个迭代器，可以遍历所有键值对。

示例代码：




// 创建一个新的 FormData 对象
var formData = new FormData();
 
// 添加键值对
formData.append('username', 'JohnDoe');
formData.append('userfile', document.getElementById('fileInput'));
 
// 删除键
formData.delete('username');
 
// 获取键的值
var value = formData.get('username');
 
// 获取所有指定键的值
var values = formData.getAll('username');
 
// 设置键的值
formData.set('username', 'JaneDoe');
 
// 检查是否包含某个键
var hasUsername = formData.has('username');
 
// 遍历所有键值对
for (var pair of formData.entries()) {
    console.log(pair[0] + ', ' + pair[1]);
}

使用 FormData 对象可以简化发送表单数据和文件的过程，特别适合于异步请求（例如使用 XMLHttpRequest 或 fetch API）。

2024-08-15

uni-app是一个使用Vue.js开发跨平台应用的框架，目前支持编译到iOS、Android、H5、以及微信小程序等多个平台。

概述：
Uni-app是一个使用Vue.js开发所有前端应用的框架。开发者编写一次代码，可编译到iOS、Android、H5、以及微信小程序等多个平台。
条件编译：
条件编译是Uni-app的一个重要特性，开发者可以通过条件编译为不同平台编译不同的代码。
App端Nvue开发：
Uni-app支持使用与Web相似的Vue语法进行App端的开发，并提供了类似于React Native的Nvue文件用于开发原生组件。
HTML5+：
HTML5+是一个轻量级的API集，可以让开发者使用HTML5语言调用手机的原生能力，如摄像头、地图、支付等。
开发环境搭建：
开发者需要安装Node.js和HBuilderX（官方IDE），然后通过HBuilderX创建和管理项目。
自定义组件：
开发者可以创建自定义组件，并通过条件编译为不同平台编译不同的组件。
配置：
配置文件是项目的核心部分，包括了项目的基本信息、平台特有的配置等。

以上是对uni-app的基本概述和关键特性的概要，具体使用时需要参考官方文档和API。

前端JS特效第15波：HTML5音乐播放器带歌词

2024-08-15

以下是一个简单的HTML5音乐播放器示例，它包括歌曲信息和歌词显示功能。




<!DOCTYPE html>
<html>
<head>
    <title>HTML5 音乐播放器</title>
    <style>
        #audioPlayer {
            width: 400px;
            margin: auto;
            text-align: center;
        }
        #lyrics {
            width: 400px;
            margin: auto;
            text-align: center;
            color: #fff;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="audioPlayer">
        <audio id="song" controls preload="auto">
            <source src="your-song.mp3" type="audio/mp3">
            对不起，您的浏览器不支持 audio 元素。
        </audio>
        <div id="lyrics">
            歌词加载中...
        </div>
    </div>
 
    <script>
        window.onload = function() {
            var audio = document.getElementById('song');
            var lyrics = document.getElementById('lyrics');
            var currentLyrics = '';
            var nextLyrics = '';
            var lyricsArray = ['这里是歌词1', '这里是歌词2', '这里是歌词3']; // 歌词数组
            var currentTime = 0;
 
            // 更新歌词函数
            function updateLyrics() {
                currentLyrics = lyricsArray[currentTime].replace(/^\s+|\s+$/g, ''); // 去除空白字符
                nextLyrics = lyricsArray[currentTime + 1] ? lyricsArray[currentTime + 1].replace(/^\s+|\s+$/g, '') : '';
                if (audio.currentTime >= currentTime && audio.currentTime < nextLyrics.length ? nextLyrics : currentLyrics) {
                    lyrics.textContent = currentLyrics;
                }
            }
 
            // 监听时间更新事件
            audio.addEventListener('timeupdate', function() {
                // 每500毫秒检查一次歌词
                if (audio.currentTime % 5 === 0) {
                    currentTime = Math.floor(audio.currentTime);
                    updateLyrics();
                }
            });
 
            // 初始化歌词显示
            updateLyrics();
        };
    </script>
</body>
</html>

在这个示例中，我们首先定义了一个简单的HTML结构，其中包括一个audio元素和一个用于显示歌词的div。然后，我们使用JavaScript在页面加载完成时初始化音乐播放器。我们创建了一个更新歌词的函数updateLyrics，并且在timeupdate事件中调用它，以便在音乐播放时更新歌词。

注意：这个示例假设歌词数组lyricsArray已经按照对应的音乐时间点顺序填充了歌词。在实际应用中，歌词可能需要从外部文件加载，或者通过API获取。此外，歌词的同步可能需要更复杂的逻辑，例如考虑歌词的高亮显示、换行处理等。

HTML5中video元素事件详解（实时监测当前播放时间）

2024-08-15

在HTML5中，<video>元素支持一系列的事件，可以用来监测视频播放的各个阶段。其中，timeupdate事件每次当媒体的播放位置发生改变时都会被触发。我们可以利用这个事件来实现实时监测当前播放时间的功能。

以下是一个简单的示例代码，展示如何使用timeupdate事件来输出视频的当前播放时间：




<!DOCTYPE html>
<html>
<head>
<title>Video Time Update Example</title>
</head>
<body>
 
<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
<p id="current-time">Current time: 0:00</p>
 
<script>
// 获取video元素和用于显示当前播放时间的段落
var video = document.getElementById('myVideo');
var time = document.getElementById('current-time');
 
// 为video元素添加timeupdate事件监听器
video.addEventListener('timeupdate', function() {
    // 更新当前播放时间
    var currentMinutes = Math.floor(video.currentTime / 60);
    var currentSeconds = Math.floor(video.currentTime % 60);
    var formattedTime = currentMinutes + ":" + (currentSeconds < 10 ? '0' : '') + currentSeconds;
    time.textContent = "Current time: " + formattedTime;
});
</script>
 
</body>
</html>

在这个例子中，我们首先获取了视频元素和用于显示当前播放时间的<p>元素。然后，我们为视频元素添加了一个timeupdate事件的监听器。每当事件触发时，监听器函数就会执行，计算当前播放时间，并将其格式化后显示在屏幕上。

编程笔记 html5&css&js 026 HTML输入类型（2/2）

2024-08-15

在HTML中，输入类型是由<input>标签的type属性定义的。以下是HTML5中常见的其他输入类型：

email - 用于应该包含电子邮件地址的输入字段。
url - 用于应该包含URL地址的输入字段。
number - 用于应该包含数值的输入字段。
range - 用于应该包含一定范围内数值的输入字段。
date - 用于应该包含日期的输入字段。
time - 用于应该包含时间的输入字段。
week - 用于应该包含周的日期的输入字段。
month - 用于应该包含月份的输入字段。
search - 用于搜索框，比如站点搜索。
color - 用于选择颜色。

CSS和JavaScript可以用来增强这些输入类型的功能和样式，并对用户的输入进行验证。以下是一个简单的例子，使用JavaScript验证电子邮件地址的输入：




<!DOCTYPE html>
<html>
<head>
<title>Email Input Example</title>
<script>
function validateEmail() {
    var email = document.getElementById("email").value;
    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
 
    if (emailPattern.test(email)) {
        document.getElementById("emailError").innerHTML = "";
    } else {
        document.getElementById("emailError").innerHTML = "Please enter a valid email address.";
    }
}
</script>
</head>
<body>
 
<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" onblur="validateEmail()">
  <span id="emailError"></span>
  <input type="submit">
</form>
 
</body>
</html>

在这个例子中，当用户离开电子邮件输入字段时，会触发onblur事件，调用validateEmail函数来验证电子邮件地址的格式。如果地址不正确，会在<span>元素中显示错误信息。

html5-qrcode 实现扫码

2024-08-15

HTML5-QRCode 是一个使用 JavaScript 和 HTML5 的库，可以在网页上实现二维码扫描功能。以下是使用 HTML5-QRCode 实现扫码的基本步骤和示例代码：

引入 HTML5-QRCode 库：




<script src="https://rawgit.com/mebjas/html5-qrcode/master/html5-qrcode.min.js"></script>

准备一个用于显示结果的元素，比如一个 div：




<div id="qr-reader-results"></div>

使用 HTML5-QRCode 扫描二维码：




function onScanSuccess(decodedText, decodedResult) {
  // 扫描成功后的回调函数
  // 处理扫描结果，例如显示在页面上
  document.getElementById('qr-reader-results').innerHTML = decodedText;
}
 
function onScanError(error) {
  // 扫描出错的回调函数
  // 处理错误，例如显示错误信息
  document.getElementById('qr-reader-results').innerHTML = error;
}
 
// 开始扫描
HTML5QRCode.scanCamera(
  document.getElementById('qr-reader'), // 扫描的视频元素
  onScanSuccess, // 成功时的回调
  onScanError, // 错误时的回调
  { fps: 10, // 帧率
    qrbox: 250 // 二维码扫描框的大小
  }
);

确保你的网页中有一个视频输入元素（通常是 video 标签）用于显示摄像头的实时画面：




<video id="qr-reader" width="250" height="250"></video>

这个示例代码展示了如何使用 HTML5-QRCode 库来扫描用户摄像头捕获的视频流中的二维码。当二维码被扫描并解码后，会调用 onScanSuccess 回调函数，并在页面上显示解码后的文本。如果扫描过程中出现错误，会调用 onScanError 函数，并显示错误信息。

2024-08-15

由于篇幅所限，这里只提供了首页的HTML和CSS代码示例。其他页面的制作方法类似，只需更改相应的内容即可。




<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公益关爱残疾人</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav class="navigation">
            <ul>
                <li><a href="index.html" class="active">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="services.html">服务</a></li>
                <li><a href="gallery.html">图库</a></li>
                <li><a href="news.html">新闻</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </nav>
    </header>
 
    <main>
        <!-- 主要内容 -->
    </main>
 
    <footer>
        <!-- 页脚内容 -->
    </footer>
</body>
</html>




/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
}
 
header {
    background-color: #333;
    padding: 10px 0;
    color: #fff;
}
 
.navigation ul {
    list-style-type: none;
    display: flex;
}
 
.navigation li {
    margin-right: 10px;
}
 
.navigation li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid transparent;
}
 
.navigation li a.active,
.navigation li a:hover {
    border-color: #fff;
}
 
main {
    /* 主要内容的样式 */
}
 
footer {
    /* 页脚的样式 */
}

这个示例提供了一个简单的HTML和CSS框架，你可以在此基础上添加具体的页面内容和设计。记得为其他页面创建相应的HTML文件，并在<header>中的<nav>标签内更新正确的链接。

HTML5本地存储

2024-08-15

HTML5提供了一个本地存储的API，可以在客户端的浏览器中保存数据。这些数据以键/值对的形式保存，可以通过JavaScript进行访问。

以下是一些使用HTML5本地存储的方法：

使用localStorage存储数据




// 存储数据
localStorage.setItem("key", "value");
 
// 获取数据
var data = localStorage.getItem("key");
 
// 删除数据
localStorage.removeItem("key");
 
// 清除所有数据
localStorage.clear();

使用sessionStorage存储数据

sessionStorage与localStorage类似，不同之处在于sessionStorage的存储数据只在当前会话期间有效，关闭页面后即被清除。




// 存储数据
sessionStorage.setItem("key", "value");
 
// 获取数据
var data = sessionStorage.getItem("key");
 
// 删除数据
sessionStorage.removeItem("key");
 
// 清除所有数据
sessionStorage.clear();

使用indexedDB进行更复杂的存储

indexedDB是一个运行在浏览器上的非关系型数据库，它可以存储大量数据，提供查询接口，允许数据有序、高效的存储和访问。




// 打开或创建数据库
var request = window.indexedDB.open("databaseName", version);
 
// 数据库创建或版本改变时的回调函数
request.onupgradeneeded = function(event) {
    var db = event.target.result;
    // 创建或更新object store
};
 
// 数据库打开成功的回调函数
request.onsuccess = function(event) {
    var db = event.target.result;
    // 打开数据库成功后的操作
};
 
// 数据库打开失败的回调函数
request.onerror = function(event) {
    // 处理错误
};
 
// 使用事务操作object store
var transaction = db.transaction(["objectStoreName"], "readwrite");
var objectStore = transaction.objectStore("objectStoreName");
 
// 添加数据
objectStore.add(value);
 
// 读取数据
objectStore.get(key);
 
// 删除数据
objectStore.delete(key);
 
// 更新数据
objectStore.put(value);
 
// 创建索引
objectStore.createIndex("indexName", "propertyName", { unique: false });
 
// 使用索引查询
var request = objectStore.index("indexName").get(value);

以上就是HTML5本地存储的一些基本用法。

情人节专属--html5 canvas制作情人节告白爱心动画特效

2024-08-15

以下是一个使用HTML5 Canvas制作的告白情人节爱心动画的示例代码：




<!DOCTYPE html>
<html>
<head>�
    <title>告白情人节爱心动画</title>
    <style>
        canvas {
            background-color: #222;
        }
    </style>
</head>
<body>
    <canvas id="heartCanvas" width="400" height="400"></canvas>
 
    <script>
        const canvas = document.getElementById('heartCanvas');
        const ctx = canvas.getContext('2d');
        const heart = new Heart(ctx, 200, 200, 100, 100, 5);
 
        // 动画循环
        (function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            heart.update();
            window.requestAnimationFrame(animate);
        })();
 
        // 告白话语动画
        const text = new LoveText(ctx, "I Love You!", 200, 100, 20, "#ff0000");
        (function animateText() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            text.update();
            window.requestAnimationFrame(animateText);
        })();
 
        // 告白话语类
        class LoveText {
            constructor(ctx, text, x, y, speed, color) {
                this.ctx = ctx;
                this.text = text;
                this.x = x;
                this.y = y;
                this.speed = speed;
                this.color = color;
                this.opacity = 0;
            }
 
            update() {
                this.opacity += this.speed / 255;
                this.ctx.globalAlpha = this.opacity / 255;
                this.ctx.fillStyle = this.color;
                this.ctx.font = "40px Arial";
                this.ctx.textAlign = "center";
                this.ctx.fillText(this.text, this.x, this.y);
                if (this.opacity >= 255) {
                    this.opacity = 255;
                }
            }
        }
 
        // 心形类
        class Heart {
            constructor(ctx, x, y, width, height, speed) {
                this.ctx = ctx;
                this.x = x;
                this.y = y;
                this.width = width;
                this.height = height;
                this.speed = speed;
                this.scale = 1;
                this.rotation = 0;
            }
 
            update() {
                this.rotatio