纯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将URL网址转为16进制加密与解密函数

    下面就是“js将URL网址转为16进制加密与解密”的完整攻略: 1. 前置知识 在开始本攻略前,需要你掌握以下两个方面的知识: JavaScript基础语法:至少需要懂基本的变量声明、流程控制等语法。 URL编码和解码:需要了解URL编码和解码的原理及JavaScript中对应的方法。 2. 加密函数实现 下面给出一个将URL网址转为16进制加密的函数实现:…

    JavaScript 2023年5月19日
    00
  • 详解JS正则replace的使用方法

    详解JS正则replace的使用方法 什么是正则表达式 正则表达式是一种模式匹配的工具,可以用来检查一个字符串是否符合某种模式。在编程中,正则表达式可以被用于搜索、替换和验证。 replace方法 replace方法是JavaScript中字符串对象的一个方法,可以在一个字符串中替换指定的内容,并返回替换后的新字符串。其语法如下: str.replace(r…

    JavaScript 2023年5月28日
    00
  • Javascript前端优化代码

    Javascript前端优化代码是一个很重要的主题,本文将介绍Javascript前端代码优化的完整攻略,包括如何减少HTTP请求,如何优化代码结构以便缩小文件体积,以及如何异步加载Javascript代码等技巧。 一、减少HTTP请求 减少HTTP请求是提高网站性能的一个关键因素。每个HTTP请求都消耗资源,减少HTTP请求可提高页面加载速度。下面是一些减…

    JavaScript 2023年5月28日
    00
  • npm qs模块使用详解

    npm qs模块使用详解 什么是qs模块? qs是一个Node.js模块,用于解析查询字符串(query string)。查询字符串是一组键值对(key-value)字符串,用来在URL中传递参数。qs模块可以将查询字符串解析为JavaScript对象,并且还可以将JavaScript对象序列化成查询字符串。 安装 使用npm安装qs模块: npm inst…

    JavaScript 2023年6月10日
    00
  • 详细总结Javascript中的焦点管理

    详细总结Javascript中的焦点管理 焦点管理是指在web页面中,控制用户当前所在的元素以及元素的状态。Javascript是一门用于编写动态页面的高级脚本语言,在web开发中,通常需要用Javascript来实现焦点的管理。 HTML的焦点管理 HTML元素可以通过设置tabindex属性来定义在页面中的tab顺序,从而控制元素的焦点。在HTML中,焦…

    JavaScript 2023年6月10日
    00
  • 简单实现ajax获取跨域数据

    实现ajax跨域获取数据在Web开发中非常常见,由于浏览器的同源策略,直接在页面中通过ajax获取跨域数据是不允许的,但是我们可以通过JSONP和CORS两种方式来实现跨域数据获取。 JSONP JSONP(JSON with Padding)是一种基于JSON的数据交互方式,它允许我们通过在页面上动态创建标签的方式来实现跨域数据获取。JSONP的原理是利用…

    JavaScript 2023年6月11日
    00
  • HTML+JavaScript实现扫雷小游戏

    项目准备要实现HTML+JavaScript的扫雷小游戏,需要先准备好游戏界面,以及相关的代码和算法。首先,需要绘制游戏地图,并放置相应的地雷。接着,需要通过JavaScript编写游戏逻辑和算法,并在对应的HTML文件中引用相应的JS脚本和CSS样式表,以配置游戏的界面和交互组件。需要注意的是,在引用JS脚本的过程中,应该采用外链方式,而不是直接嵌入到HT…

    JavaScript 2023年5月28日
    00
  • JavaScript学习笔记之JS事件对象

    JavaScript学习笔记之JS事件对象 什么是JS事件对象 JavaScript事件对象(Event Object)是在事件被触发时由浏览器自动创建的对象,它包含了与事件相关的所有信息,我们可以通过JS事件对象来获取一些有用的信息,如事件类型、触发事件的元素、鼠标的位置等。 JS事件对象的属性 以下是JS事件对象常用的属性: type:事件类型,如”cl…

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