html如何添加时钟效果,基于HTML5+CSS3实现简单的时钟效果
目的:
利用html5,css实现钟摆效果
知识点:
1) 利用position/left/top和calc()实现元素的水平和垂直居中;
2) 利用CSS3的animation/transform/transform-origin属性定义动画;
3) 利用transform-origin实现旋转原点的圆心调整
废话不多说了,直接看代码吧,具体代码如下所示:
li{
list-style:none;
}
#box{
width: 400px;
height: 400px;
position: absolute;
top:calc(50% - 200px);
left:calc(50% - 200px);
border: 2px solid palegoldenrod;
}
#dial{
width: 200px;
height: 200px;
position: absolute;
top:calc(50% - 100px);
left:calc(50% - 100px);
border: 2px solid cyan;
border-radius: 50%;
}
.scaleIndex{
width: 4px;
height: 12px;
position: absolute;
top: 0;
left: calc(50% - 2px);
background-color: gray;
transform-origin: 2px 100px;
}
.angle30{transform : rotate(30deg);}
.angle60{transform : rotate(60deg);}
.angle90{transform : rotate(90deg);}
.angle120{transform : rotate(120deg);}
.angle150{transform : rotate(150deg);}
.angle180{transform : rotate(180deg);}
.angle210{transform : rotate(210deg);}
.angle240{transform : rotate(240deg);}
.angle270{transform : rotate(270deg);}
.angle300{transform : rotate(300deg);}
.angle330{transform : rotate(330deg);}
#fixPoint{
width: 10px;
height: 10px;
position: absolute;
top:calc(50% - 5px);
left:calc(50% - 5px);
background-color: cadetblue;
border-radius: 50%;
}
#hourHand{
width: 6px;
height: 70px;
position:absolute;
top: 40px;
left: calc(50% - 3px);
background-color: darkblue;
transform-origin: 50% 60px;
}
#minuteHand{
width: 4px;
height: 75px;
position:absolute;
top: 35px;
left: calc(50% - 2px);
background-color: yellow;
transform-origin: 50% 65px;
}
#secondHand{
width: 2px;
height: 90px;
position:absolute;
top: 20px;
left: calc(50% - 1px);
background-color: red;
transform-origin: 50% 80px;
}
window.onload = function(){
var hourHand = document.getElementById('hourHand');
var minuteHand = document.getElementById('minuteHand');
var secondHand = document.getElementById('secondHand');
setInterval(function(){
var currentTime = new Date();
var hourValue = currentTime.getHours();
var hourAngle = hourValue / 24 * 360 + 'deg';
var minuteValue = currentTime.getMinutes();
var minuteAngle = minuteValue / 60 * 360 + 'deg';
var secondValue = currentTime.getSeconds();
var secondAngle = secondValue / 60 * 360 + 'deg';
console.log(hourAngle);
// 方法一:利用jquery的css()增加属性
var cmdHour = 'rotate('+ hourAngle +')';
$('#hourHand').css({transform:'rotate('+ hourAngle +')'});
var cmdMinute = 'rotate('+ minuteAngle +')';
$('#minuteHand').css({transform:cmdMinute});
var cmdSecond = 'rotate('+ secondAngle +')';
$('#secondHand').css({transform:cmdSecond});
// 方法二:利用DOM元素的style属性设置
// hourHand.style.transform = 'rotate('+ hourAngle + ')';
// minuteHand.style.transform = 'rotate('+ minuteAngle + ')';
// secondHand.style.transform = 'rotate('+ secondAngle + ')';
},1000);
}
总结
以上所述是小编给大家介绍的基于HTML5+CSS3实现简单的时钟效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
html如何添加时钟效果,基于HTML5+CSS3实现简单的时钟效果相关推荐
- 基于HTML5+CSS3的IGX Web SCADA在楼宇自控系统的应用
基于HTML5+CSS3的IGX Web SCADA在楼宇自控系统的应用 楼宇自动化控制采用的是计算机集散控制,所谓计算机集散控制就是分散控制集中管理.它的分散控制器通常采用直接数字控制器( DDC) ...
- 基于HTML5+CSS3的网页设计与实现
摘要:随着互联网技术的不断发展,电子设备的广泛应用和高普及度,网页作为互联网信息的重要载体,其网页设计技术将面临新的挑战.HTML和CSS作为网页前端开发所运用的主要核心技术,如何灵活运用,使得web ...
- 基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
- html移动端语音波纹,html5 +css3 点击后水波纹扩散效果 兼容移动端
html5+ js +css3 点击后水波纹扩散效果 兼容移动端-幸凡学习网 }.center{text-align:center}.btn{position:relative;width:13em; ...
- CSS3餐厅酒店网站模板是一款基于HTML5+CSS3实现的酒店预订模板下载。
不仅仅是首页,二级页面,三级页面,登陆,购物车等,页面齐全 功能齐全 js+css+html (img,字体均有),前端html纯静态页面!无后台!可用dreamweaver,sublime ,We ...
- 基于html5 源码,10款基于HTML5+CSS3实现的超酷源码动画
1.基于Bootstrap的jQuery登录表单 这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图 ...
- html 图片墙效果,基于html5实现的图片墙效果
温馨提示:本信息由[金聪采编]搜集整理发布,版权归原作者及发布者所有,您如有异议请 举报 或者 版权申诉. 本文实例讲述了基于html5实现的图片墙效果,分享给大家供大家参考.具体实现方法如下: 这里 ...
- html5陀螺仪效果,基于HTML5陀螺仪实现移动动画效果
这次给大家带来基于HTML5陀螺仪实现移动动画效果,基于HTML5陀螺仪实现移动动画效果的注意事项有哪些,下面就是实战案例,一起来看一下. 最近用ofo小黄车App的时候,发现以前下方扫一扫变成了一个 ...
- html5 css3 slider,使用html5+css3来实现slider切换效果告别javascript+css_html5教程技巧
好吧,上次说要赶紧的补上几篇文章,结果淡定的失约了.又是近一个月才发一篇,真是让人郁闷.发现最近总是抽不出时间了,基本都是一个项目接一个项目的安排,自己不是在空闲的时候找不到合适的话题,就是在有纠结话 ...
最新文章
- 洛谷——P1098 字符串的展开
- Leetcode 876. 链表的中间结点 (每日一题 20210918)
- 手机python利器能做什么_推荐一款开发利器!既能写Python,又能写Java
- 《金色梦乡》金句摘抄(一)
- IIS 7.0探索用于 Windows Vista 的 Web 服务器和更多内容
- 数组元素的地址计算问题(一维到高维)
- 大数据就业前景:大数据分析师是青春饭吗?
- 差分管电路图_DIY一款差分输入的晶体管功放电路图
- python发短信sim800_sim800a发短信流程
- 疟疾识别图像数据集(27000张图像,2类图像)
- NiFi+Kylo安装部署
- deepin mysql教程_deepin V20 安装 mysql 5.7 教程
- 【Flink】Flink中的窗口函数、时间语义及watermark
- photoshop 技巧
- 如何查看win10系统的激活情况
- 个人网络信息安全管理方法
- xorDecode 解密
- 【离散数学】群、环和域的关系
- 解决网络丢包问题及故障判断方法
- 360搜索“触链”聚焦版权领域,“图刻”是噱头还是不忘安全初心?
热门文章
- tensorflow 实验过程可重复
- BZOJ 1013 球形空间产生器(高斯消元)
- 面向对象银角大王补充2-self就是调用当前方法的对象-静态字段,公有属性-封装的理解-继承的理解,普通方法,静态方法...
- 区块链项目开发区块链应用场景需满足3个
- Visual Studio Code如何编写运行C、C++
- mySql 查询当天、本周、最近7天、本月、最近30天的语句
- Tomcat 8 中的startup.bat
- 定义和使用结构体变量
- [求助]谁能给我讲解一下,iOS编程要如何实时显示采集到的图像???
- Bsie(鄙视IE)