js+css3实现简单时钟特效

贱客

本文实例为大家分享了js+css3实现简单时钟的具体代码，供大家参考，具体内容如下
1.实现了时钟的特效，可以转动，时间准确，画面美观大气；
2.用到了css3的transform: rotate，transform-origin:,伪元素，border-radius，定位，z-index等等

效果如图：

代码如下：

1.    CSS3时钟特效    /*表盘边框*/  .clock {  /* 设置大小 */  width: 400px;  height: 400px;  position: relative;  margin: 40px auto;  /*上边距*/  border-radius: 50%;  /*圆形*/  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);  /*表盘阴影*/  background: #F5DEB3;  border: 10px solid #FFFF00;  }  /*画刻度的面板*/  .box {  width: 100%;  height: 100%;  position: absolute;  top: 0;  left: 0;  }  /*用来装刻度和数字的div*/  .box div {  width: 0px;  height: 200px;  position: absolute;  left: 200px;  /*旋转*/  transform: rotate(0deg);  /*设置基点为右下角*/  transform-origin: bottom right;  background: rgba(255, 0, 0, 0.5);  }  /*数字*/  .box div i {  float: left;  margin-top: 20px;  margin-left: -10px;  font-style: normal;  width: 20px;  text-align: center;  font-style: 18px;  }  /*小刻度*/  .box div::after {  content: "";  position: absolute;  background: #484848;  width: 2px;  height: 10px;  left: -1px;  }  /*大刻度*/  .box div.five::after {  position: absolute;  content: "";  width: 4px;  height: 20px;  left: -2px;  top: 0;  background: #484848;  border-radius: 0 0 2px 2px;  }  /*秒针样式*/  .second {  width: 1px;  height: 200px;  background: red;  position: absolute;  left: 200px;  /*距离表盘宽度一半*/  margin-top: 30px;  z-index: 10;  transform: rotate(0deg);  transform-origin: center 170px;  /*定位旋转位置*/  }  /*圆心样式*/  .second::after {  content: "";  position: absolute;  width: 20px;  height: 20px;  background: red;  border-radius: 50%;  bottom: 20px;  left: -10px;  }  /*分针样式*/  .minute {  width: 2px;  height: 140px;  background: #8b8b8d;  position: absolute;  left: 199px;  margin-top: 60px;  z-index: 9;  transform-origin: center bottom;  transform: rotate(12deg);  animation: minute 60s linear infinite;  }  /*时针样式*/  .hour {  width: 6px;  height: 100px;  background: #333;  position: absolute;  left: 197px;  margin-top: 100px;  z-index: 8;  border-radius: 3px;  transform: rotate(2deg);  transform-origin: center bottom;  animation: minute 60s linear infinite;  }                var box = document.getElementsByClassName("box")[0];  var ssObj = document.getElementsByClassName("second")[0];  var mmObj = document.getElementsByClassName("minute")[0];  var hhObj = document.getElementsByClassName("hour")[0];  /*获取当前时间*/  var date = new Date();  var hh = date.getHours();  var mm = date.getMinutes();  var ss = date.getSeconds();  /*计算页面指针加载时的角度*/  hhDeg = 360 * (hh % 12) / 12;  mmDeg = 360 * mm / 60;  ssDeg = 360 * ss / 60;  hhObj.style.transform = "rotate(" + hhDeg + "deg)";  mmObj.style.transform = "rotate(" + mmDeg + "deg)";  ssObj.style.transform = "rotate(" + ssDeg + "deg)";      // 定义初始刻度的度数  var Deg = 0;  /*画刻度*/  for (var i = 0; i < 60; i++) {  var div1 = document.createElement("div"); //创建一个div  var hourNum = i / 5;  //当为5时  if (hourNum == 0) hourNum = 12;  if (i % 5 == 0) { //大刻度   div1.className = "five";   div1.innerHTML = "" + hourNum + ""  }  div1.style.transform = "rotate(" + Deg + "deg)";  box.appendChild(div1);  Deg += 6;// 每两个刻度之间是6度  }  /*指针转动的函数*/  function drawSS() {  // 秒针的度数  ssDeg = 360 * ss / 60;  // 分针的度数  mmDeg1 = 360 * mm / 60;  // 时针的度数  hhDeg1 = 360 * (hh % 12) / 12;  // 分针每秒走的位置  mmDeg = mmDeg1 + (6 * ss / 60);  // 时针每分钟走的位置  hhDeg = hhDeg1 + (30 * mm / 60);  hhObj.style.transform = "rotate(" + hhDeg + "deg)";  mmObj.style.transform = "rotate(" + mmDeg + "deg)";  ssObj.style.transform = "rotate(" + ssDeg + "deg)";  ss += 1;  if (ss > 60) {   ss = 1;   mm += 1;  }  if (mm == 60) {   mm = 0;   hh += 1;  }  setTimeout(function() {   drawSS();  }, 1000);  }  drawSS();  

复制代码

精简版：

1.    CSS3时钟特效    /*表盘边框*/  .clock {  /* 设置大小 */  width: 400px;  height: 400px;  position: relative;  margin: 40px auto;  /*上边距*/  border-radius: 50%;  /*圆形*/  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);  /*表盘阴影*/  background: #F5DEB3;  border: 10px solid #FFFF00;  }  /*画刻度的面板*/  .box {  width: 100%;  height: 100%;  position: absolute;  top: 0;  left: 0;  }  /*用来装刻度的div*/  .box div {  width: 0px;  height: 200px;  position: absolute;  left: 200px;  /*旋转*/  transform: rotate(0deg);  /*设置基点为右下角*/  transform-origin: bottom right;  background: rgba(255, 0, 0, 0.5);  }  /*小刻度*/  .box div:after {  content: "";  position: absolute;  background: #484848;  width: 2px;  height: 10px;  left: -1px;  }  /*大刻度*/  .box div.five:after {  position: absolute;  content: "";  width: 4px;  height: 20px;  left: -2px;  top: 0;  background: #484848;  border-radius: 0 0 2px 2px;  }  /*秒针样式*/  .second {  width: 1px;  height: 200px;  background: red;  position: absolute;  left: 200px;  /*距离表盘宽度一半*/  margin-top: 30px;  z-index: 10;  transform: rotate(0deg);  transform-origin: center 170px;  /*定位旋转位置*/  }  /*圆心样式*/  .second:after {  content: "";  position: absolute;  width: 20px;  height: 20px;  background: red;  border-radius: 50%;  bottom: 20px;  left: -10px;  }  /*分针样式*/  .minute {  width: 2px;  height: 140px;  background: #8b8b8d;  position: absolute;  left: 199px;  margin-top: 60px;  z-index: 9;  transform-origin: center bottom;  transform: rotate(12deg);  }  /*时针样式*/  .hour {  width: 6px;  height: 100px;  background: #333;  position: absolute;  left: 197px;  margin-top: 100px;  z-index: 8;  border-radius: 3px;  transform: rotate(2deg);  transform-origin: center bottom;  }                var box = document.getElementsByClassName("box")[0];  var ssObj = document.getElementsByClassName("second")[0];  var mmObj = document.getElementsByClassName("minute")[0];  var hhObj = document.getElementsByClassName("hour")[0];  /*获取当前时间*/  var date = new Date();  var hh = date.getHours();  var mm = date.getMinutes();  var ss = date.getSeconds();  /*计算页面指针加载时的角度*/  drawSS();      // 定义初始刻度的度数  var Deg = 0;  /*画刻度*/  for (var i = 0; i < 60; i++) {  var div1 = document.createElement("div"); //创建一个div  //当为5时  if (i % 5 == 0) { //大刻度   div1.className = "five";  }  div1.style.transform = "rotate(" + Deg + "deg)";  box.appendChild(div1);  Deg += 6;// 每两个刻度之间是6度  }  /*指针转动的函数*/  function drawSS() {  // 秒针的度数  ssDeg = 360 * ss / 60;  // 分针的度数  mmDeg = 360 * mm / 60 + (6 * ss / 60);  // 时针的度数  hhDeg = 360 * (hh % 12) / 12 + (30 * mm / 60);  // 旋转  hhObj.style.transform = "rotate(" + hhDeg + "deg)";  mmObj.style.transform = "rotate(" + mmDeg + "deg)";  ssObj.style.transform = "rotate(" + ssDeg + "deg)";  ss += 1;  // 每秒钟调用一次  setTimeout(function() {   drawSS();  }, 1000);  }  

复制代码

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

原文地址：https://www.jb51.net/article/195510.htm