纯js+css实现在线时钟

实现在线时钟一般需要用到 JavaScript 和 CSS 进行布局和动画效果的实现。下面是实现纯 JS 和 CSS 的在线时钟的完整攻略。

步骤一:HTML 结构

时钟需要显示时、分、秒,因此需要一个容器来分别放置时钟的三个部分,容器可以使用一个 div 标签。

<div class="clock">
  <div class="hour"> </div>
  <div class="minute"> </div>
  <div class="second"> </div>
</div>

步骤二:CSS 样式

首先需要设置容器的基本样式,如背景颜色、宽度、高度、圆角等。然后使用相对定位 positions 让时、分、秒的部分可以根据容器定位,再使用 CSS3 的旋转变换让时、分、秒的针正确旋转。

.clock{
  background: #EFEFEF;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  margin: 50px auto;
}

.hour,
.minute,
.second {
  position: absolute;
  width: 8px;
  height: 8px;
  background: black;
  border-radius: 50%;
  transform-origin: bottom center;
}
.hour {
  height: 50px;
  width: 4px;
  background-color: #222;
  left: 95px;
  bottom: 100px;
}
.minute {
  height: 70px;
  width: 3px;
  background-color: #222222;
  left: 98px;
  bottom: 100px;
}
.second {
  height: 85px;
  width: 2px;
  background-color: #E74C3C;
  left: 99px;
  bottom: 100px;
}

步骤三:使用 JavaScript 更新时钟

使用 Date 对象获取当前的时、分、秒,通过计算当前时间中时、分、秒对应的度数,旋转时、分、秒针。

function clock(){
  var d = new Date();
  var hours = d.getHours();
  var minutes = d.getMinutes();
  var seconds = d.getSeconds();  

  var hourDeg = (hours * 30) + (0.5 * minutes);
  var minuteDeg = minutes * 6;
  var secondDeg = seconds * 6;

  $(".hour").css({"transform" : "rotate("+ hourDeg +"deg)"});
  $(".minute").css({"transform" : "rotate("+ minuteDeg +"deg)"});
  $(".second").css({"transform" : "rotate("+ secondDeg +"deg)"});
}

setInterval(clock, 1000); 

上面的 JavaScript 代码中,首先获取了当前时间的小时、分钟、秒数,然后计算出每个指针的旋转角度,最后通过 jQuery 处理样式变换,每秒钟一次更新时钟。

示例

下面是两个实现时钟的示例:

示例一

这个示例将时钟在页面中央居中,实现了响应式布局,时钟的大小会根据屏幕大小而改变。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>在线时钟</title>
  <style>
    body {
      background: #f2f2f2;
    }
    .container{
      max-width: 700px;
      margin: 0 auto;
    }
    .clock{
      background: #EFEFEF;
      width: 80%;
      height: 400px;
      max-width: 700px;
      border-radius: 50%;
      position: relative;
      margin: 50px auto;
    }
    .hour,
    .minute,
    .second {
      position: absolute;
      width: 8px;
      height: 8px;
      background: black;
      border-radius: 50%;
      transform-origin: bottom center;
    }
    .hour {
      height: 50px;
      width: 4px;
      background-color: #222;
      left: 50%;
      margin-left: -2px;
      bottom: 200px;
    }
    .minute {
      height: 70px;
      width: 3px;
      background-color: #222;
      left: 50%;
      margin-left: -1.5px;
      bottom: 200px;
    }
    .second {
      height: 85px;
      width: 2px;
      background-color: #E74C3C;
      left: 50%;
      margin-left: -1px;
      bottom: 200px;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="clock">
      <div class="hour"></div>
      <div class="minute"></div>
      <div class="second"></div>
    </div>
  </div>
  <script>
    function clock(){
      var d = new Date();
      var hours = d.getHours();
      var minutes = d.getMinutes();
      var seconds = d.getSeconds();

      var hourDeg = (hours * 30) + (0.5 * minutes);
      var minuteDeg = minutes * 6;
      var secondDeg = seconds * 6;

      $(".hour").css({"transform" : "rotate("+ hourDeg +"deg)"});
      $(".minute").css({"transform" : "rotate("+ minuteDeg +"deg)"});
      $(".second").css({"transform" : "rotate("+ secondDeg +"deg)"});
    }

    setInterval(clock, 1000);
  </script>
</body>
</html>

示例二

这个示例将时钟放在页面的右下角,同时调整了时钟的颜色和大小。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>在线时钟</title>
  <style>
    body {
      background: #f2f2f2;
    }
    .clock{
      background: #222;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      position: fixed;
      bottom: 25px;
      right: 25px;
    }
    .hour,
    .minute,
    .second {
      position: absolute;
      width: 8px;
      height: 8px;
      background: white;
      border-radius: 50%;
      transform-origin: bottom center;
    }
    .hour {
      height: 60px;
      width: 5px;
      background-color: #eaeaea;
      left: 95px;
      bottom: 100px;
    }
    .minute {
      height: 80px;
      width: 3px;
      background-color: #eaeaea;
      left: 98px;
      bottom: 100px;
    }
    .second {
      height: 100px;
      width: 2px;
      background-color: #e74c3c;
      left: 99px;
      bottom: 100px;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div class="clock">
    <div class="hour"></div>
    <div class="minute"></div>
    <div class="second"></div>
  </div>
  <script>
    function clock(){
      var d = new Date();
      var hours = d.getHours();
      var minutes = d.getMinutes();
      var seconds = d.getSeconds();

      var hourDeg = (hours * 30) + (0.5 * minutes);
      var minuteDeg = minutes * 6;
      var secondDeg = seconds * 6;

      $(".hour").css({"transform" : "rotate("+ hourDeg +"deg)"});
      $(".minute").css({"transform" : "rotate("+ minuteDeg +"deg)"});
      $(".second").css({"transform" : "rotate("+ secondDeg +"deg)"});
    }

    setInterval(clock, 1000);
  </script>
</body>
</html>

以上是使用纯 JS 和 CSS 实现在线时钟的攻略,你可以根据自己的需要,自行调整时钟的颜色、大小、位置和样式。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:纯js+css实现在线时钟 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 详解js界面跳转与值传递

    关于“详解js界面跳转与值传递”的攻略,我们可以分为以下几个部分: 1. 基本的页面跳转方式 在Web应用开发中,实现页面跳转是一个非常常见的需求。在JavaScript中,我们可以使用location对象来实现页面跳转。下面是示例代码: location.href = "http://www.example.com"; // 使用hre…

    JavaScript 2023年6月11日
    00
  • 浅析Javascript匿名函数与自执行函数

    浅析Javascript匿名函数与自执行函数 在Javascript编程中,匿名函数(Anonymous Function)和自执行函数(Immediately Invoked Function Expression,简称IIFE)是两个常被使用的概念。本文将深入浅出地讲解这两个概念的定义、用法和区别。 匿名函数 匿名函数就是没有名字的函数,也称为函数表达式…

    JavaScript 2023年5月27日
    00
  • JavaScript MutationObserver实例讲解

    下面是关于“JavaScript MutationObserver实例讲解”的详细攻略。 什么是MutationObserver MutationObserver是在现代浏览器中新增的监视DOM元素变化的API。它提供了一种能够在DOM对象发生变化时,异步被通知的能力。 如何使用MutationObserver MutationObserver是一个构造函数…

    JavaScript 2023年6月10日
    00
  • javascript for-in有序遍历json数据并探讨各个浏览器差异

    JavaScript for-in 有序遍历 JSON 数据并探讨各个浏览器差异 什么是JavaScript for-in? JavaScript for-in 语句循环遍历对象的属性。语句还会遍历可枚举的属性,其中不仅包括对象自己的属性,还包括从它的原型继承的属性。 如何使用JavaScript for-in有序遍历JSON数据? 在 JavaScript…

    JavaScript 2023年5月27日
    00
  • JavaScript 中的六种循环方法

    让我们来详细讲解 JavaScript 中的六种循环方法。 1. for 循环 for 循环是 JavaScript 中最常用的循环方法之一。它可以用来遍历数组、对象等。for 循环的语法格式如下: for (let i = 0; i < array.length; i++) { console.log(array[i]); } 上面的代码中,i 是循…

    JavaScript 2023年5月27日
    00
  • Javascript中的arguments对象

    Javascript中的arguments对象 在Javascript中,函数参数可以通过arguments对象访问。这个对象是一个类数组对象,包含了函数调用时所有传入的实参,可以用来访问函数调用时没有在形参列表中声明的参数。 arguments对象的基本用法 arguments对象有如下属性和方法: 属性 callee: 返回当前正在执行的函数的引用,一般…

    JavaScript 2023年5月27日
    00
  • js实现鼠标悬浮框效果

    JavaScript 实现鼠标悬浮框效果的过程主要分为以下几步: 1. 创建 HTML 结构 首先需要在 HTML 中定义框架,例如容器、容器内的内容、触发事件的 DOM 元素等。其中包含一个容器作为悬浮框,在鼠标触发事件后自动显示,同时鼠标移出事件后自动隐藏。 例如: <div class="parent"> <but…

    JavaScript 2023年6月11日
    00
  • vue-router后台鉴权流程实现

    下面我将为你详细讲解“vue-router后台鉴权流程实现”的完整攻略。 背景 Vue.js 是一款轻量级的前端框架,而 Vue Router 是 Vue.js 的官方路由库。在 Vue.js 应用开发中,Vue Router 经常被用于实现前端路由管理,来实现 SPA(单页应用)应用。但是,在实际开发中,我们常常需要做到前端用户权限管理,来保护我们的业务安…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部