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>

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

Javascript 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 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
You might like
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
jQuery DOM操作实例
2014/03/05 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
解决Python一行输出不显示的问题
2018/12/03 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
python turtle 绘制太极图的实例
2019/12/18 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
python爬虫---requests库的用法详解
2020/09/28 Python
WSDL的操作类型主要有几种
2013/07/19 面试题
会议开场欢迎词
2014/01/15 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
给校长的一封检讨书
2014/09/20 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
婚礼答谢词
2015/01/04 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript