首页 / JAVASCRIPT / 利用css+原生js制作简单的钟表

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了利用css+原生js制作简单的钟表，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7189字，纯文字阅读大概需要11分钟。

内容图文

利用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制作简单的钟表全部内容，希望文章能够帮你解决利用css+原生js制作简单的钟表所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/351244.html

来源：【匿名】

【上一篇】js 判断一组日期是否是连续的简单实例【下一篇】javascript 怎么调用php方法

更多 ►

【利用css+原生js制作简单的钟表】教程文章相关的互联网学习教程文章

原生JS的地区二级联动，很好理解的逻辑【代码】

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="area.js"></script></head><body><select name="province" id="province" onchange="getCity()"><option value="">省份</option></select><select name="city" id="city"><option value="">城市</...

网站前端_Jquery-基础入门.0001.原生Js到后期封装库Jquery的过渡?【代码】

原生缺点:1. JS的出现使得网页与用户之间实现了一种实时/动态/交互的关系,网页可以包含更多活跃的元素和精彩的内容2. JS的弊端在于复杂的DOM对象,而JQuery封装了很多预定义的对象和使用函数简化了DOM操作,使得我们可以快速创建有高难度交互的富客户端页面,且兼容各大浏览器简单介绍:1. JQuery是一个优秀的JavaScript库,拥有强大的选择器,出色的DOM操作,可靠的事件处理,完善的兼容性和链式操作等功能,目前团队主要推核心库(JQuery)/...

无限循环轮播图之运动框架（原生JS）【代码】

封装运动框架 1function getStyle(obj,name){2if(obj.currentStyle){3return obj.currentStyle[name];4 }else{5return getComputedStyle(obj,false)[name];6 }7}8function move(obj,json,options){9var options=options || {}; 10var duration=options.duration || 800; 11var easing=options.easing || ‘linear‘; 12var n=0; 13var start={}; 14var dis={}; 15var count=Math.ceil(duration/30); 16//{top:0,left:0}17fo...

原生js给同一对象绑定多个事件

事件监听var son = document.querySelector(".son");son.addEventListener(‘click‘, once1);function once1() {alert(1)}son.addEventListener(‘click‘, once2);function once2() {alert(2)}原文：https://www.cnblogs.com/EternalZH/p/10395051.html

几个原生js知识【代码】

1、document.documentElement返回根节点 html。2、原生方法获取一个对象的某个样式的值。function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } } alert(getStyle(document.documentElement,‘fontSize‘)) ; 原文：http://www.cnblogs.com/gaidalou/p/7685007.html

原生js拖拽效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title><style> *{ margin:0; padding:0; } #box{ width:100px; height:100px; background: red; position: absolute; left:0; top:0; cursor: move; }</style><body> <div id="box"></div></body></html><script> var oBox=document.getElementById(‘box‘); oBox.onmousedown=function(e){ ...

用jQuery基于原生js封装的轮播【代码】

我发现轮播在很多网站里面都用到过，一个绚丽的轮播可以为网页增色不少，最近闲来无事，也用原生js封装了一个轮播，可能不像网上的插件那么炫，但是也有用心去做。主要用了闭包的思想。需要传递的参数有：图片地址的数组，图片宽度，上一页，下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间。功能：实现了轮播的自动轮播，可以点击上一页，下一页进行切换。下面是html中的代码,只需要把存放的容器写好...

原生js实现点击复制功能【代码】【图】

代码： <input type="text"> <button>复制</button> <script> var input = document.getElementsByTagName(‘input‘)[0] var button = document.getElementsByTagName(‘button‘)[0] button.onclick = function(){input.value = "hello world"input.select()document.execCommand("copy") } </script>效果：execCommand常用方法： cut delete copy原文：http://blog.51cto.com/12173069/2106070

原生js仿jquery一些常用方法【代码】

原生js仿jquery一些常用方法下面小编就为大家带来一篇原生js仿jquery一些常用方法(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧最近迷上了原生js，能不用jquery等框架的情况都会手写一些js方法，记得刚接触前端的时候为了选择器而使用jquery。。。现在利用扩展原型的方法实现一些jquery函数：1.显示/隐藏//hide() Object.prototype.hide = function(){ this.style.display="none"; r...

原生js面试题

1、线程与进程的区别一个程序至少有一个进程，一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。从逻辑角度来看...

原生JS实现圆周运动

<body> <div id="ball" style="width:20px; height:20px; background:red; border-radius:50%; position:absolute; left:0; top:80px;"></div> <script> var ball = document.getElementById("ball"); var radian = 0.1; var x = 0; var y = 0; document.onmousemove = function(e){ e = e || event; x = e.clientX; y = e.clientY; } var timer1 = setInterval(function(){ ball.style.left = x + Math.cos(radian...

原生js实现增加（addclass）,删除（removeclass）,判断是否存在（hasclass）,如果存在删除，如果不存在添加（toggleclass）和获取类名（getbyclass）的方法【代码】

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>addclass,removeclass,hasclass,toggleclass,getbyclass</title> </head> <body> <div class="div1" id="box1"></div> <input type="button" value="按钮" id="btn1"/> <script>function addClass(obj,cls) {//obj:要添加classname的元素，cls:要添加的classname;//如果原来没有class：if(obj.className == ‘‘){obj.className = cls;} else {//本来已经有c...

原生js实现返回顶部特效【代码】

index.html<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><link herf="index.css"></head><body><span id="icon"></span><p>我是程序员，平凡有一点理想，渴望让世界不一样！</p><p>我是程序员，平凡有一点理想，渴望让世界不一样！</p><p>我是程序员，平凡有一点理想，渴望让世界不一样！</p><p>我是程序员，平凡有一点理想，渴望让世界不一样！</p><p>我是程序员，平凡有一点理想，渴望让世界不一样...

普通选项卡+自动播放功能+向前/向后按钮原生js

今天做了幻灯片，主要功能包括：普通选项卡，向前/向后播放按钮，向前？向后播放功能,自动播放功能要实现简单选项卡功能是没有问题的，但是添加功能就出现各种各样的问题了遇到的问题：1 下标问题 2普通选项卡与向前/向后功能结合的时候冲突，可以向前/向后播放，但是再想实现普通选项卡就出问题了3 添加向前/向后按钮后，html布局下移4 添加向前/向后按钮的时候，我用img标签，显然这个不适用，不能很好的调节垂直居中5 当鼠标放在...

原生js实现放大镜效果【代码】【图】

放大镜效果主要涉及3个鼠标事件：1.onmouseover，鼠标移入浮动小方块和显示放大的区域显示；2.onmousemove，鼠标移动，小方块和放大区域一起移动；3.onmouseout，鼠标移除小方块和放大区域消失。其实放大镜效果最主要的是小方块与放大区域的比例及位置： <div id="small_box"><div class="small_Pic"><div id="float_box"></div><img src="1.png" /></div></div><div id="big_box"><div class="big_Pic"><img src="1.png" /></di...

首页 / JAVASCRIPT / 利用css+原生js制作简单的钟表

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【利用css+原生js制作简单的钟表】教程文章相关的互联网学习教程文章

CSS - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程