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

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

Javascript 相关文章推荐
javascript编程起步(第二课)
Feb 27 Javascript
用js实现计算加载页面所用的时间
Apr 02 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
小程序实现日历左右滑动效果
Oct 21 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
You might like
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
php实现文件编码批量转换
2014/03/10 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
使用python实现rsa算法代码
2016/02/17 Python
python:socket传输大文件示例
2017/01/18 Python
Django日志模块logging的配置详解
2017/02/14 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
Python global全局变量函数详解
2018/09/18 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
电子商务专业个人的自我评价分享
2013/10/29 职场文书
环境科学毕业生自荐信
2013/11/21 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
六一儿童节标语
2014/10/08 职场文书
员工福利申请报告
2015/05/15 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers