HTML | DOM 小程序集合

本篇文章涵盖了一些HTML和DOM小程序，这些小程序将帮助你更有效地使用HTML和JavaScript创建开发各种网站。

##自定义设备尺寸

如果你需要开发一个响应式网站，并且想要在不同的设备尺寸下预览你的网站，那么这个小程序是必不可少的。

<meta name="viewport" content="width=device-width, initial-scale=1">

该代码表示在不同的屏幕尺寸上，你的网站将自动调整其大小，以保证最佳的用户体验。

碰撞检测

在开发游戏或交互式应用程序时，需要检测对象之间的碰撞。使用下面的代码来实现碰撞检测：

<script>
function collides(a, b) {
  let aRect = a.getBoundingClientRect();
  let bRect = b.getBoundingClientRect();

  return !(
    (aRect.bottom < bRect.top) ||
    (aRect.top > bRect.bottom) ||
    (aRect.right < bRect.left) ||
    (aRect.left > bRect.right)
  );
}
</script>

这个函数接受两个参数（对象 a 和对象 b），并返回一个布尔值，表示这两个对象是否相交。

图片预加载

在某些情况下，用户需要等待一些图像或其他内容加载完成，才能开始浏览您的网站。使用下面的代码可以让图片预加载：

<img src="loading.gif" data-src="image.jpg">
<script>
let img = document.querySelector('img');
let src = img.getAttribute('data-src');
img.onload = function() {
  img.setAttribute('src', src);
}
</script>

在这个示例中，图像文件名为 "image.jpg"，而 "loading.gif" 是占位符，它会在 "image.jpg" 加载时显示。

防止表单提交

当表单被提交时，网页将会被刷新。在某些情况下，我们需要防止表单提交，可以使用下面的代码：

<form onsubmit="event.preventDefault();">
  ...
</form>

在这个示例中，event.preventDefault() 方法将防止表单提交并刷新网页。

复制到剪贴板

你可以通过“复制到剪贴板”功能使网站更易于使用并提高用户体验。下面的代码演示了如何实现此功能：

<button onclick="copy()">复制</button>
<script>
function copy() {
  let text = document.getElementById('copy-text').innerText;
  navigator.clipboard.writeText(text);
}
</script>

在这个示例中，我们使用了一个按钮，并在用户单击按钮时调用 copy() 函数。该函数将文本复制到剪贴板。

滚动到顶部

在浏览网页时，有时需要滚动到页面的顶部。下面的代码演示如何实现这个小程序：

<button onclick="topFunction()">回到顶部</button>
<script>
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

在这个示例中，我们使用一个按钮，并在用户单击按钮时调用 topFunction() 函数。该函数将滚动条位置设置为 0，以使页面回到顶部。

获取页面滚动量

在某些情况下，你需要知道用户已经滚动了多远。使用下面的代码可以获取页面的滚动量：

<script>
function getScrollPosition() {
  return {
    x: window.pageXOffset,
    y: window.pageYOffset
  }
}
</script>

在这个示例中，我们定义了一个函数，它返回一个对象，该对象包含 x 和 y 轴的滚动量。

显示当前日期和时间

在某些情况下，需要在网页上显示当前时间和日期。使用下面的代码来实现它：

<div id="clock"></div>
<script>
function updateClock() {
  let now = new Date();
  let time = now.toLocaleTimeString();
  let date = now.toLocaleDateString();
  document.getElementById('clock').innerHTML = time + ' ' + date;
  setTimeout(updateClock, 1000);
}
updateClock();
</script>

在这个示例中，我们使用一个 DIV 元素，并在 JavaScript 中定义了一个函数，并使用 setTimeout() 方法使时间每 1 秒钟更新一次。

结论

希望这些HTML和DOM小程序可以帮助你更好地开发你的网站。如果你有任何问题或建议，请在下面的评论中告诉我们。