HTML简约时钟插件代码

作者：System 时间：2024年08月07日分类：所有,html 字数：1259

这篇文章距离上次修改已过204天，其中的内容可能已经有所变动。

以下是一个使用jQuery和CSS创建简约时钟的示例代码：

首先，确保在HTML文件中包含jQuery库：




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

接下来，添加时钟的HTML结构和CSS样式：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Clock</title>
<style>
  body { font-family: Arial, sans-serif; }
  #clock { width: 300px; margin: 0 auto; padding: 20px; border: 1px solid #000; }
  #clock h1 { text-align: center; color: #555; }
  #clock p { text-align: center; font-size: 20px; }
</style>
</head>
<body>
 
<div id="clock">
  <h1>Simple Clock</h1>
  <p id="time"></p>
</div>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  function updateClock() {
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;
    $('#time').text(hours + ':' + minutes + ':' + seconds);
  }
 
  $(document).ready(function() {
    setInterval(updateClock, 1000);
    updateClock();
  });
</script>
 
</body>
</html>

这段代码会在网页上显示一个简约时钟，并且会每秒更新时间。jQuery被用来处理DOM元素的交互，而CSS则负责时钟的样式展示。

HTML简约时钟插件代码

评论已关闭

推荐阅读