又一款js时钟!transform实现时钟效果
又来一个时钟效果了，这个的实现不需要canvas，都是div、ul、li画出的，好玩有真实。
哈哈~
需要的js才能实现到走动这个效果，但js的内容不多，也不难。
主要是一个css里transform的使用的思路，transform里有很多变幻属性，而普通的时钟
在我心中就是个圆圆的东西，那么是不是可以旋转这个属性（rotate）实现了，它的刻度
使用旋转且把旋转点设置在圆心，那不就可以绕着圆心转了吗，而时针它们的底部不是和
圆心接触的吗，那么设置时针的底部为旋转点不就OK了，大概的说了说思路。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style id="css">
#clock{
width: 200px;
height: 200px;
border: 2px solid #000;
border-radius: 50%;
margin: 100px auto 0;
position: relative;
}
#clock ul{
width: 200px;
height: 200px;
position: relative;
list-style: none;
padding:0;
margin: 0;
}
#clock ul li{
width: 2px;
height: 10px;
background: #000;
transform-origin: center 100px;
position: absolute;
top: 0;
left: 50%;
}
#clock ul li:nth-of-type(5n+1){
height: 20px;
}
#hour{
height: 40px;
width: 4px;
background: #00fefe;
position: absolute;
top: 60px;
left: 99px;
transform-origin:center bottom;
}
#min{
height: 60px;
width: 3px;
background: #001afe;
position: absolute;
top: 40px;
left: 99px;
transform-origin: center bottom;
transform: rotate(15deg);
}
#sec{
height: 70px;
width: 2px;
background: #000;
position: absolute;
top: 30px;
left: 99px;
transform-origin:center bottom;
}
#dot{
width: 10px;
height: 10px;
position: absolute;
left: 95px;
top: 95px;
background: #aaa;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="clock">
<ul></ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div id="dot"></div>
</div>
<script>
var oCss=document.getElementById("css");
var oClock=document.getElementById("clock");
var oUl=oClock.getElementsByTagName("ul")[0];
var oHour=document.getElementById("hour");
var oMin=document.getElementById("min");
var oSec=document.getElementById("sec");
var strLi="";
var strCss="";
for(var i=0;i<60;i++){
strLi+="<li></li>";
}
oUl.innerHTML=strLi;
for(var i=0;i<60;i++){
strCss+='#clock ul li:nth-of-type('+(i+1)+'){transform:rotate('+i*6+'deg);}';
}
oCss.innerHTML+=strCss;
time();
setInterval(time,1000);
function time(){
var date=new Date();
var h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
oHour.style.transform="rotate("+(h+m/60)*30+"deg)";
oMin.style.transform="rotate("+(m+s/60)*6+"deg)";
oSec.style.transform="rotate("+s*6+"deg)";
}
</script>
</body>
</html>
使用标签画图最主要的是定位，因为这样我们就可以把弄到形状的盒子放到你所想要的位置，内部css样式表是可以使用获取元素的方式获取的，这样就可以 使用innerHTML为其添加样式，且可以循环添加，还有因为刻度太多所以使用循环添加，这样省时省力，至于剩下的就是定时器了，给定好1秒的时间，每1 秒执行一次函数，这样它就是动起来了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
实现动画效果核心方式的js代码
下边我就简单说一下过程和原理.第一步:实现一个匿名函数并能自己执行. 复制代码 代码如下: (function(){ })() 这个函数在一样编的好的JS代码中经常会见到,起到闭包,自动执行的效果,在函数后加一对()表示自动执行,前边的匿名函数需要用()包起来,这样才能为宿主(我们的BOM环境)理解,里面的function(){}这就是个匿名函数.第二步:实现动画,以改变一个box的秀明度来说明.id为animation的div 复制代码 代码如下: <div id="animation&
-
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
复制代码 代码如下: function initialize() { addcloud(); //为页面添加遮罩 document.onreadystatechange = subSomething; //监听加载状态改变 } function addcloud() { var bodyWidth = document.documentElement.clientWidth; var bodyHeight = Math.max(document.documentElement.clientHei
-
javascript与css3动画结合使用小结
当Html5,css3已渐渐成为主流的时候,我还非常习惯的用js去做一些简单的动画.因为在桌面浏览器上, 并非所有的都支持css3.用户也倒是很奇怪,用户习惯并不是每个用户都可以被培养.总有不少人会觉得win7.win8没xp好用.但手机方面就大不一样了,手机浏览器对html5和css3的支持还是很不错的.但手机硬件处理能力却又十分有限.在四核.八核手机横行的今天,依然有像我这样使用双核或单核手机的.js虽好,单奈何接触不多,调不好那种感觉.一个简单的页面滑动,在i7的pc上运行十分流畅,可是,
-
js动画(animate)简单引擎代码示例
用惯了jquery的同学,相信都很欣赏其动画引擎.确实相对比较完善!如果,如果想像力足够丰富的话,相信可以做出超出想像的效果.当然,跟2d库比起来,还是相差相当一段距离.jquery压根也不是专门为动画而设计的.模拟真实世界方面,还是不足的.但在web世界里还是游刃有余的.动画其实一直是flash的专属领地(web区哉).只是它常常沦为黑客攻击的漏洞所在,而且要装插件,有时候文件实在太大,而且性耗实在是高啊.html5出现后,其实adobe自己都转移阵地到html5了.当然,我觉得很长一段时间内
-
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示. 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性 从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" class="open" value=&quo
-
js动画效果打开层 关闭层
DOM_text01 body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} #bodyL{ float:left; width:84px; margin-right:2px; } a.od{ width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border: 2px solid #849BCA; display:
-
JS实现超炫网页烟花动画效果的方法
本文实例讲述了JS实现超炫网页烟花动画效果的方法.分享给大家供大家参考.具体分析如下: 非常炫的使用JS实现的一个网页烟花燃放动画效果,能适应JS做出这样的动画来 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns
-
javascript判断css3动画结束 css3动画结束的回调函数
css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件: transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器里你仍然需要使用webkit前缀,所以,我们不得不根据各种浏览器分别检测事件 复制代码 代码如下: var transitions = { 'transition':'transitionend',
-
浅谈javascript获取元素transform参数
之前写页面的时候有试过想用js获取某些元素的translate的数值什么的,但是translate又是transform的子样式(勉强说说),理所当然就是先获取transform样式,再读里面的值. 复制代码 代码如下: body{-webkit-transform: translateX(20px);} 但当我尝试这样做的时候,奇迹出现了: 当时我的内心几乎是崩溃的,我只想安安静静的获取translate的值而已啊,谁知给我弹出这货,虽然上高数课的时候也有讲到所有变化(二维.三维)效果都可以浓
-
图片的左右移动，js动画效果实现代码
图片的左右移动,动画效果的实现 =(xk+xp)/2) { if (smer == 1) step--; else step++; } else { if (smer == 1) step++; else step--; } if (x >= xk) { x = xk; smer = -1; } if (x [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
用js实现的模拟jquery的animate自定义动画(2.5K)
后来发现还不错.不如继续写下去. 这个版本基本上跟jquery的animate一样了. 我是说效果基本上一样了.(效率还没测试过.): 如果有专业测试人员 帮我测试下. 1:功能说明 兼容主流浏览器. 1:支持回调函数: 2:支持级联动画调用: 3:支持delay动画队列延迟: 4:支持stop停止动画: 5:支持opacity透明度变化: 6:支持+= -= *= /=操作: 7:支持单位操作(px, %); 2:使用说明 jelle(A).animate(B, C, D); A:需要执行动画
-
九种原生js动画效果
在做页面中,多数情况下都会遇到页面上做动画效果,我们大部分做动画的时候都是使用框架来做(比如jquery),这里我介绍下如何让通过原生的js来实现像框架一样的动画效果! 1.匀速动画效果 说明:匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit
-
JS实现动画兼容性的transition和transform实例分析
本文实例讲述了JS实现动画兼容性的transition和transform方法.分享给大家供大家参考,具体如下: 今天在开发纯手工js打造图片滚动效果的时候,遇到一件不愉快的兼容事件. 之前js设置图片滚动动画效果如下: var addSlideStyle = function(time, leftWidth) { time = time || 0; leftWidth = leftWidth || 0; return 'transition: all ' + time + 's ease-in