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

js+css3实现简单时钟特效

Posted in Javascript onSeptember 13, 2020

本文实例为大家分享了js+css3实现简单时钟的具体代码，供大家参考，具体内容如下

1.实现了时钟的特效，可以转动，时间准确，画面美观大气；
2.用到了css3的transform: rotate，transform-origin:,伪元素，border-radius，定位，z-index等等

效果如图：

js+css3实现简单时钟特效

代码如下：

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title>CSS3时钟特效</title>
 <link rel="shortcut icon" type="image/x-icon" href="img/an.ico" />
 <style>
  /*表盘边框*/
  
  .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;
  }
 </style>
 </head>

 <body>
 <div class="clock">
  <div class="box"></div>
  <div class="second"></div>
  <div class="minute"></div>
  <div class="hour"></div>
 </div>

 <script>
  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 = "<i>" + hourNum + "</i>"
  }
  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();
 </script>
 </body>

</html>

精简版：

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title>CSS3时钟特效</title>
 <link rel="shortcut icon" type="image/x-icon" href="img/an.ico" />
 <style>
  /*表盘边框*/
  
  .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;
  }
 </style>
 </head>

 <body>
 <div class="clock">
  <div class="box"></div>
  <div class="second"></div>
  <div class="minute"></div>
  <div class="hour"></div>
 </div>

 <script>
  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);
  }
  
 </script>
 </body>

</html>

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

js+css3实现简单时钟特效

- Author -

暗锁读客

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

Javascript 相关文章推荐
jQuery 性能优化指南 （1）
May 21 Javascript
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
javascript 学习笔记（一）DOM基本操作
Apr 08 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
angularJS中router的使用指南
Feb 09 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
vue数字类型过滤器的示例代码
Sep 07 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
jquery实现简易验证插件封装
Sep 13 #jQuery
利用H5api实现时钟的绘制(javascript)
Sep 13 #Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 #Javascript
返回上一个url并刷新界面的js代码
Sep 12 #Javascript
Vue和React有哪些区别
Sep 12 #Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 #Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 #Javascript
create(1) Windows server 2012(17) nginx(76) TableField(1) 日志格式分析(1) 组策略(1) el-table(1) Mybatis-Plus(3) 子查询(1) mounted(1)
You might like
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
CI框架Session.php源码分析
2014/11/03 PHP
PHP模块化安装教程
2016/06/01 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
js弹出层之1：JQuery.Boxy (二)
2011/10/06 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
对比分析json及XML
2014/11/28 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
VUE前端cookie简单操作
2017/10/17 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
Pycharm学习教程（1） 定制外观
2017/05/02 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
numpy 声明空数组详解
2019/12/05 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
在线购买世界上最好的酒：BoozeBud
2018/06/07 全球购物
通信工程毕业生求职信
2013/11/16 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers