利用css+原生js制作简单的钟表

2024-10-16 07:27:06

利用css+原生js制作简单的钟表。效果如下所示

实现该效果，分三大块：html、javascript、css

html部分
html部分比较简单，定义一个clock的div，内部有原点、时分秒针、日期以及时间，至于钟表上的刻度、数字等元素，因为量比较多，采用jvascript生成

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel='stylesheet' href='外部的css文件路径' />
  <title>时钟</title>
</head>
<body>
  <div class="clock" id="clock">
    <!-- 原点 -->
    <div class="origin"></div>

    <!-- 时分秒针 -->
    <div class="clock-line hour-line" id="hour-line"></div>
    <div class="clock-line minute-line" id="minute-line"></div>
    <div class="clock-line second-line" id="second-line"></div>

    <!-- 日期 -->
    <div class="date-info" id="date-info"></div>
    <!-- 时间 -->
    <div class="time-info" >
      <div class="time" id="hour-time"></div>
      <div class="time" id="minute-time"></div>
      <div class="time" id="second-time"></div>
    </div>
  </div>
<script type='text/javascript' src='外部的javascript文件路径'></script>
</body>
</html>

css部分
开始代码之前，有一些css的属性需要了解，比如定位(position)，边框圆角(border-radius),变换(transform)等
position属性
position属性规定元素的定位类型，有五个值：absolute、fixed、relative、static、inherit,默认为static，即没有定位，元素按正常文档流显示；这里主要用到的是absolute和relative
absulte值，将元素设置成绝对定位，相对于static定位意外的第一个上级元素进行定位，位置可以通过'left'、'top'、'right'、'bottom'属性进行定位；如果上级元素都是static定位，则相对于body元素的位置进行定位
本例中，设定最外层的div clock为relative，所有下级元素均设定为absolute绝对定位，然后通过设置left、top等属性的值，确定其相对于clock的位置。
border-radius属性
border-radius属性向元素添加圆角边框，可以设置四个圆角的大小，本例中使用该属性将clock元素设置成一个圆
此处写了一个示例：4个div元素，宽高都是100px，border-radius不同时的效果：

transform属性
transform属性向元素应用2D或3D旋转，该属性允许我们对元素进行旋转、缩放、移动、或倾斜。本例中时针、分针、秒针、刻度等均用transform属性设置旋转；另外，transform-origin属性可以设置元素的基点位置

css部分的代码

/* 全局 */
*{
  margin:0;
  padding:0;
}
.clock{
  width:400px;
  height:400px;
  border:10px solid #333;
  box-shadow: 0px 0px 20px 3px #444 inset;
  border-radius:210px;
  position:relative;
  margin:5px auto;
  z-index:10;
  background-color:#f6f6f6;
}
/* 时钟数字 */
.clock-num{
  width:40px;
  height:40px;
  font-size:22px;
  text-align:center;
  line-height:40px;
  position:absolute;
  z-index:8;
  color:#555;
  font-family:fantasy, 'Trebuchet MS';
}
.em_num{
  font-size:28px;
}
/* 指针 */
.clock-line{
  position:absolute;
  z-index:20;
}
.hour-line{width:100px;
  height:4px;
  top:198px;
  left:200px;
  background-color:#000;
  border-radius:2px;
  transform-origin:0 50%;
  box-shadow:1px -3px 8px 3px #aaa;
}
.minute-line{
  width:130px;
  height:2px;
  top:199px;
  left:190px;
  background-color:#000;
  transform-origin:7.692% 50%;
  box-shadow:1px -3px 8px 1px #aaa;
}
.second-line{
  width:170px;
  height:1px;
  top:199.5px;
  left:180px;
  background-color:#f60;
  transform-origin:11.765% 50%;
  box-shadow:1px -3px 7px 1px #bbb;
}
/* 原点 */
.origin{
  width:20px;
  height:20px;
  border-radius:10px;
  background-color:#000;
  position:absolute;
  top:190px;
  left:190px;
  z-index:14;
}

/* 日期 时间 */
.date-info{
  width:160px;
  height:28px;
  line-height:28px;
  text-align:center;
  position:absolute;
  top:230px;
  left:120px;
  z-index:11;
  color:#555;
  font-weight:bold;
  font-family:'微软雅黑';
}
.time-info{
  width:92px;
  height:30px;
  line-height:30px;
  text-align:center;
  position:absolute;
  top:270px;
  left:154px;
  z-index:11;
  background-color:#555;
  padding:0;
  box-shadow:0px 0px 9px 2px #222 inset;
}
.time{
  width:30px;
  height:30px;
  text-align:center;
  float:left;
  color:#fff;
  font-weight:bold;
}
#minute-time{
  border-left:1px solid #fff;
  border-right:1px solid #fff;
}

/* 刻度 */
.clock-scale{
  width:195px;
  height:2px;
  transform-origin:0% 50%;
  z-index:7;
  position:absolute;
  top:199px;
  left:200px;
}
.scale-show{
  width:12px;
  height:2px;
  background-color:#555;
  float:left;
}
.scale-hidden{
  width:183px;
  height:2px;
  float:left;
}

javascript部分

js部分没什么好说的，简单的dom操作，setInterval函数每隔一秒执行一次，修改指针的角度和显示的时间即可。代码如下

(function(){
    window.onload=initNumXY(200, 160, 40,40);
    var hour_line = document.getElementById("hour-line");
    var minute_line = document.getElementById("minute-line");
    var second_line = document.getElementById("second-line");
    var date_info = document.getElementById("date-info");
    var week_day = [
      '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'
    ];
    var hour_time = document.getElementById("hour-time");
    var minute_time = document.getElementById("minute-time");
    var second_time = document.getElementById("second-time");
    function setTime(){
      var this_day = new Date();
      var hour = (this_day.getHours() >= 12) ?
          (this_day.getHours() - 12) : this_day.getHours();
      var minute = this_day.getMinutes();
      var second = this_day.getSeconds();
      var hour_rotate = (hour*30-90) + (Math.floor(minute / 12) * 6);
      var year = this_day.getFullYear();
      var month = ((this_day.getMonth() + 1) < 10 ) ?
          "0"+(this_day.getMonth() + 1) : (this_day.getMonth() + 1);
      var date = (this_day.getDate() < 10 ) ?
          "0"+this_day.getDate() : this_day.getDate();
      var day = this_day.getDay();
      hour_line.style.transform = 'rotate(' + hour_rotate + 'deg)';
      minute_line.style.transform = 'rotate(' + (minute*6 - 90) + 'deg)';
      second_line.style.transform = 'rotate(' + (second*6 - 90)+'deg)';
      date_info.innerHTML =
        year + "-" + month + "-" + date + " " + week_day[day];
      hour_time.innerHTML = (this_day.getHours() < 10) ?
          "0" + this_day.getHours() : this_day.getHours();
      minute_time.innerHTML = (this_day.getMinutes() < 10) ?
          "0" + this_day.getMinutes() : this_day.getMinutes();
      second_time.innerHTML = (this_day.getSeconds() < 10) ?
          "0" + this_day.getSeconds():this_day.getSeconds();
    }
    setInterval(setTime, 1000);

    function initNumXY(R, r, w, h){
      var numXY = [
        {
          "left" : R + 0.5 * r - 0.5 * w,
          "top" : R - 0.5 * r * 1.73205 - 0.5 * h
        },
        {
          "left" : R + 0.5 * r * 1.73205 - 0.5 * w,
          "top" : R - 0.5 * r - 0.5 * h
        },
        {
          "left" : R + r - 0.5 * w,
          "top" : R - 0.5 * h
        },
        {
          "left" : R + 0.5 * r * 1.73205 - 0.5 * w,
          "top" : R + 0.5 * r - 0.5 * h
        },
        {
          "left" : R + 0.5 * r - 0.5 * w,
          "top" : R + 0.5 * r * 1.732 - 0.5 * h
        },
        {
          "left" : R - 0.5 * w,
          "top" : R + r - 0.5 * h
        },
        {
          "left" : R - 0.5 * r - 0.5 * w,
          "top" : R + 0.5 * r * 1.732 - 0.5 * h
        },
        {
          "left" : R - 0.5 * r * 1.73205 - 0.5 * w,
          "top" : R + 0.5 * r - 0.5 * h
        },
        {
          "left" : R - r - 0.5 * w,
          "top" : R - 0.5 * h
        },
        {
          "left" : R - 0.5 * r * 1.73205 - 0.5 * w,
          "top" : R - 0.5 * r - 0.5 * h
        },
        {
          "left" : R - 0.5 * r - 0.5 * w,
          "top": R - 0.5 * r * 1.73205 - 0.5 * h
        },
        {
          "left" : R - 0.5 * w,
          "top" : R - r - 0.5 * h
        }
      ];
      var clock = document.getElementById("clock");
      for(var i = 1; i <= 12; i++){
        if(i%3 == 0) {
          clock.innerHTML += "<div class='clock-num em_num'>"+i+"</div>";
        } else {
          clock.innerHTML += "<div class='clock-num'>" + i + "</div>";
        }
      }
      var clock_num = document.getElementsByClassName("clock-num");
      for(var i = 0; i < clock_num.length; i++) {
        clock_num[i].style.left = numXY[i].left + 'px';
        clock_num[i].style.top = numXY[i].top + 'px';
      }
      for(var i = 0; i < 60; i++) {
        clock.innerHTML += "<div class='clock-scale'> " +
                   "<div class='scale-hidden'></div>" +
                   "<div class='scale-show'></div>" +
                  "</div>";
      }
      var scale = document.getElementsByClassName("clock-scale");
      for(var i = 0; i < scale.length; i++) {
        scale[i].style.transform="rotate(" + (i * 6 - 90) + "deg)";
      }
    }
})();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

详解JavaScript的Date对象（制作简易钟表）

JS提供了Date类型来处理时间和日期.Date类型内置一系列获取和设置日期时间信息的方法.下面我们简单的概述一下这个Date类型. 大概看了一下Date类型的方法,下面给出: 上面的方法自己尝试即可,我只简单的演示一下JS正确输出的格式: var today=new Date();//创建一个时间日期对象 document.write("<h4>下面的是世界标准的时间输出:</h4>"); document.write(today+"
C++实现图形界面时钟表盘代码

本文实例讲述了C++实现图形界面时钟表盘代码,分享给大家供大家参考. 具体实现代码如下: 复制代码代码如下: //POINT的数组可以这么用 POINT pt[]={ 0, 450, 225,390, 390,225, 450,0, 390,-225, 225,-390, 0,-450, -225,-390, -390,-2
jquery+html5制作超酷的圆盘时钟表

自己封装的一个用HTML5+jQuery写的时钟表代码: <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <
Android打造属于自己的时间钟表

1.概述本文主要讲解的是如何自定义一个时间钟表,通过简单的练习可以简单学习Android当中自定义view的一些常用绘图技巧,优化android绘图操作.言归正传,首先看下我们需要实现的效果: 当我们看到这个效果的时候脑子里应该有一定的思路了,我们应该把它分解成以下几个步骤: 1.仪表盘(圆) 2.刻度线(长中短) 3.刻度值(1-12) 4.指针(时分秒) 5.移动指针,计算指针位置现在我们已经很清楚自己的思路了,那么我们一个一个来. 第一步:1.自定义View的属性,首先在r
利用css+原生js制作简单的钟表

利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分 html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet'
原生js制作简单的数字键盘

一.起因最近支付的同事说,数字键盘有些问题:在移动设备上有时候比较难出现点(.) 和数字在一起的格局:因此,考虑到这种情况,就建议手写个模拟键盘了.花了一晚上的时间,写了个简单的键盘,基本能用.考虑到有的开发者没有使用juqery,就使用原生的js了. Github地址:https://github.com/vczero/keyboard 二.截图如下三.体验地址(需要点击input才能弹出数字键盘的哦) URL: http://vczero.github.io/num_key/index.
利用pixi.js制作简单的跑酷小游戏

目录前言项目地址 demo地址初始化项目主要逻辑 useParkour useScene useHurdle Player 前言此项目使用pixi.js和vue实现,部分素材来自爱给网,本项目仅作用于 pixi.js 学习用途,侵权立删. 项目地址 shellingfordly/pixi-games demo地址 pixi-games 初始化项目使用vite初始化项目 pnpm create vite my-vue-app 安装pixi.js和pixi-tweener pixi-tw
原生js实现简单的模态框示例

html部分: <img src="images/8.jpg" alt=""> <button class="btn" id="showMax">显示大图</button> <div id="modalBox" class="modalBox"> <div class="modalBox-matter"> &
Js制作简单弹出层DIV在页面居中中间显示遮罩的具体方法

这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮解决了: 1.可以遮挡ie6下的select元素但是在ie6下div没有透明度 2.弹出的div可以一直在浏览器屏幕中间显示问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置css 3.在ie6下需要设置css 例如div {_position: absolute;_top
原生js实现简单的Ripple按钮实例代码

整理文档,搜刮出一个原生js实现简单的Ripple按钮的代码,稍微整理精简一下做下分享. 效果如图准备食材(html部分) <ul id="nav"> <li> <a href='#'> <span>首页</span> <span class="circle"></span> </a> </li> <li> <a href='#'>
原生JS实现简单的倒计时功能示例

本文实例讲述了原生JS实现简单的倒计时功能.分享给大家供大家参考,具体如下: 1.第一种 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS倒计时</title> </head> <body> <div id="div"></div> <scr
原生JS实现简单的无缝自动轮播效果

最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了学什么都快,而且我觉得用原生的代码写完好像自己有点小成就感的.现在记录一下今天复习的原生js无缝轮播吧. 先上一张自拍镇楼,哈哈哈首先先说一下思路吧,首先任意张图片以ul的形式保存显示,上代码吧 <div id="wrap"> <ul id="ul"
原生js实现简单的焦点图效果实例

用到一些封装好的运动函数,主要是定时器效果为图片和图片的描述定时自动更换. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul, li, p, h3 { padding: 0; margin: 0; list-style: none; } im
原生JS实现简单屏幕截图

目录了解 HTML5 中的 Canvas 获取屏幕截图结论在 Web 开发中,截图是一项非常有用的技术.可以使用截图来记录当前屏幕状态,生成缩略图或进行屏幕分享等操作.在本文中,我将介绍如何使用原生 JavaScript 来实现截图功能. 了解 HTML5 中的 Canvas HTML5 中的 Canvas 是一个绘图 API,可以用来创建图形,绘制文本,渲染图像等等.使用 Canvas,我们可以将其转换为图像数据并保存到文件中.在本文中,我们将使用 Canvas 来实现截图功能. 获取屏

利用css+原生js制作简单的钟表

相关推荐

随机推荐