正文

HTML5常用函数详解及实用案例教程

/0 浏览量
0508

在HTML5中，我们不仅可以使用丰富的标签来构建网页，还可以利用一些内置的函数来增强页面的交互性和动态效果。本文将详细介绍HTML5中一些常用函数，并通过实际案例展示如何应用这些函数。

1. HTML5常用函数概述

1.1 window.onload

window.onload 函数用于在页面加载完成后执行一段代码。它确保了页面上的所有元素都已经被加载，包括图片、样式表和子框架。

window.onload = function() {
  console.log('页面加载完成！');
};

1.2 document.querySelector

document.querySelector 函数用于获取页面中匹配指定CSS选择器的元素。它返回匹配的第一个元素。

var element = document.querySelector('.my-class');
console.log(element);

1.3 document.querySelectorAll

document.querySelectorAll 函数与 document.querySelector 类似，但它返回一个包含所有匹配元素的NodeList。

var elements = document.querySelectorAll('.my-class');
console.log(elements);

1.4 addEventListener

addEventListener 函数用于向元素添加事件监听器。它可以监听多种事件，如点击、鼠标移动、键盘事件等。

document.querySelector('.my-button').addEventListener('click', function() {
  console.log('按钮被点击！');
});

1.5 localStorage 和 sessionStorage

localStorage 和 sessionStorage 用于在浏览器中存储数据。它们可以存储字符串或对象，并且数据会一直保留，直到显式清除。

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
var value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

2. 实用案例教程

2.1 案例一：动态显示当前时间

使用 window.onload 和 setInterval 函数，我们可以创建一个动态显示当前时间的功能。

<!DOCTYPE html>
<html>
<head>
  <title>显示当前时间</title>
</head>
<body>
  <div id="current-time"></div>
  <script>
    window.onload = function() {
      var currentTime = function() {
        var now = new Date();
        var hours = now.getHours().toString().padStart(2, '0');
        var minutes = now.getMinutes().toString().padStart(2, '0');
        var seconds = now.getSeconds().toString().padStart(2, '0');
        document.getElementById('current-time').innerText = hours + ':' + minutes + ':' + seconds;
      };
      setInterval(currentTime, 1000);
    };
  </script>
</body>
</html>

2.2 案例二：点击按钮切换图片

使用 addEventListener 函数，我们可以为按钮添加点击事件，并切换图片。

<!DOCTYPE html>
<html>
<head>
  <title>切换图片</title>
</head>
<body>
  <img src="image1.jpg" alt="图片1" id="image">
  <button onclick="changeImage()">切换图片</button>
  <script>
    function changeImage() {
      var image = document.getElementById('image');
      if (image.src.includes('image1.jpg')) {
        image.src = 'image2.jpg';
      } else {
        image.src = 'image1.jpg';
      }
    }
  </script>
</body>
</html>

2.3 案例三：使用localStorage存储用户名

使用 localStorage，我们可以将用户名存储在浏览器中，并在页面加载时显示。

<!DOCTYPE html>
<html>
<head>
  <title>存储用户名</title>
</head>
<body>
  <h1>欢迎，<span id="username"></span>！</h1>
  <button onclick="saveUsername()">保存用户名</button>
  <script>
    function saveUsername() {
      var username = prompt('请输入您的用户名：');
      localStorage.setItem('username', username);
      document.getElementById('username').innerText = username;
    }
    window.onload = function() {
      var username = localStorage.getItem('username');
      if (username) {
        document.getElementById('username').innerText = username;
      }
    };
  </script>
</body>
</html>

3. 总结

本文介绍了HTML5中一些常用函数，并通过实际案例展示了如何应用这些函数。掌握这些函数可以帮助开发者更好地构建动态和交互式网页。希望本文能对您有所帮助！

-- 展开阅读全文 --