首页
所有分类
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 相关文章推荐
javascript两种function的定义介绍及区别说明
May 02 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
Vue实现点击显示不同图片的效果
Aug 10 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
SRF-22W(1) 德生G88(1) 德生1994(1) SRF-40W(1) ICF-SW100(1) ICF-F10(1) AE3805(1) 华普R-96(1) 纸巾盒(1) PR-D3L(1)
You might like
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
js对数字的格式化使用说明
2011/01/12 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
[04:42]5分钟带你了解什么是DOTA2（第一期）
2017/02/07 DOTA
浅谈Python中数据解析
2015/05/05 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
python3.7 sys模块的具体使用
2019/07/22 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
文员个人的求职信范文
2013/09/26 职场文书
西式婚礼证婚词
2014/01/12 职场文书
民主生活会主持词
2015/07/01 职场文书
三八妇女节主持词
2015/07/04 职场文书
新年寄语2016
2015/08/17 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript
利用Python+OpenCV三步去除水印
2021/05/28 Python
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
vue+echarts实现多条折线图
2022/03/21 Vue.js