首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onApril 07, 2020

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

 利用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不同时的效果：

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

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)";
   }
  }
})();

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

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

- Author -

申锦祥

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
动态调用CSS文件的JS代码
Jul 29 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
jquery选择器使用详解
Apr 08 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
js仿百度切换皮肤功能（html+css）
Jul 10 #Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 #Javascript
js重写方法的简单实现
Jul 10 #Javascript
JS实现控制文本框的内容
Jul 10 #Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 #Javascript
jquery实现跳到底部，回到顶部效果的简单实例(类似锚)
Jul 10 #Javascript
JS实现点击事件统计的简单实例
Jul 10 #Javascript
蓝屏(1) Sunmao(1) svg(1) 鸿蒙3.0(1) 滚动条(1) 声卡驱动(1) win7(2) 输入法(2) Sentry(1) 鸿蒙(2)
You might like
PHP多个文件上传到服务器实例
2014/10/29 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
Java遍历集合方法分析（实现原理、算法性能、适用场合）
2016/04/25 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
Python 占位符的使用方法详解
2019/07/10 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
什么是Python中的顺序表
2020/06/02 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
护士专业推荐信
2013/11/02 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
Python简易开发之制作计算器
2022/04/28 Python