前端js实现时钟效果

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>时钟效果</title><link rel="stylesheet" type="text/css" href="css/时钟.css"/></head><body><!--底部的div--><div class="wrap"><!--  ul>(li>span{$})*12 --><ul class="number center"><li><span>9</span></li><li><span>10</span></li><li><span>11</span></li><li><span>12</span></li><li><span>1</span></li><li><span>2</span></li><li><span>3</span></li><li><span>4</span></li><li><span>5</span></li><li><span>6</span></li><li><span>7</span></li><li><span>8</span></li></ul><!--时针区域--><ul id="pointer" class="center"><li id="hour"></li><li id="minute"></li><li id="second"></li><!--按扣--><div id="kou" class="center"></div></ul></div><script src="js/时钟.js" type="text/javascript" charset="utf-8"></script></body>
</html>

css文件代码:

*{margin: 0;padding: 0;
}
ul{list-style: none;
}
.wrap{position: relative;width: 500px;height: 500px;margin: 30px auto;border-radius: 50%;box-shadow: 0 0 25px 2px black;background-image: linear-gradient(to bottom, #fff 2%, lightgray 15%, lightgray 86%, #fff);
}.number{width: 460px;height: 460px;background-color: white;border-radius: 50%;/*阴影默认向外  inset可以设置隐藏向内*/box-shadow: 0 0 15px inset;
}.center{position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}/*----数字调整----*/
.number li{width: 100%;height: 50px;position: absolute;top: 0;bottom: 0;margin: auto 0;/*background-color: salmon;*//*--*/line-height: 50px;font-size: 40px;
}
.number li span{margin-left: 15px;/*行元素 的transform属性效果失效*/display: inline-block;
}
/*-------------------------*/
/*时针区域*/
#pointer{width: 30px;height: 30px;border-radius: 50%;background-color: #333;
}#pointer li{position: absolute;top: 0;bottom: 0;left: 50%;margin: auto 0;border-radius:0 50%  50% 0;/*修改旋转中心点!*/transform-origin: left center; }
#hour{width: 120px;height: 10px;background-color: firebrick;
}
#minute{width: 160px;height: 6px;background-color: darkgreen;
}
#second{width: 210px;height: 4px;background-color: gold;
}
#kou{width: 16px;height: 16px;border-radius: 50%;background-color: #fff;
}

js文件代码:

//1.获取标签
var numberEL = document.getElementsByClassName("number")[0];
var numberArray = numberEL.getElementsByTagName("li");
var spanArray = numberEL.getElementsByTagName("span");//功能区域
//1.让数字所在的li 旋转
for(var i = 0; i < numberArray.length; i++){numberArray[i].style.transform = "rotateZ(" + i * 30 + "deg)";spanArray[i].style.transform = "rotateZ(" + (-i * 30) + "deg)";
}//2.通过当前时间  来控制指针的旋转角度
function showTime(){//获取当前时间var now = new Date();//小时var h = now.getHours();//分钟var m = now.getMinutes();//秒var s = now.getSeconds();//设置秒针的旋转角度  1圈是360度 = 秒针动60下转一圈 //那么1秒 就是 6度second.style.transform = "rotateZ(" + (s * 6 - 90)+ "deg)";//设置分针的旋转角度  1圈是360度 = 分针动60下 一圈   一分钟=6度//例如： 3分30秒   分针应该是3*6 +  30 / 60 * 6minute.style.transform = "rotateZ(" + (m * 6 + s / 60 * 6  - 90) + "deg)";//时针  3时40分   60分钟=1小时=30度   3*30 + 40 / 60 * 30hour.style.transform = "rotateZ(" + (h * 30 + m / 60 * 30 - 90) + "deg)";
}showTime();
setInterval(showTime, 1000);

运行结果:

前端js实现时钟效果相关推荐

前端页面实现时钟效果
各位友友们大家好,最近在家闲着无聊,为了锻炼自己的前端基础,我用前端三大件写了一个时钟.(发篇时本人计算机大二在读,按教学计划学校还未教前端知识.目前全靠自学,故有不足之处,还望同行多多指出) 话不多 ...
使用js实现时钟效果
首先在单元格中输入下面的代码,然后使用html显示内容. <canvas id="view" height="300px" width="300 ...
基于canvas的原生JS时钟效果
概述运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...
js选中html的数字设置倒计时,JS实现的网页倒计时数字时钟效果
本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: 代码如下: javascript实现的倒计时时钟 body,div{margin:0;padding:0;} ...
圆盘时钟效果原生JS
圆盘时钟旋转时钟数字时钟写在前面仿荣耀手机时钟,设计的同款时钟效果实现效果实现原理数字时钟利用Date内置对象获取当下的时间,通过处理呈现在页面上这一步获取时间是非常简单的,通过Da ...
html时钟自动刷新抖音,JS+CSS3实现时钟效果（抖音）
JS+CSS3实现时钟效果(抖音) 本文讲述了抖音上很火的时钟效果是怎么实现的,主要用到原生态的 JS+CSS3,希望大家可以交流学习一下. 具体不解释了,看注释: Title html{ backg ...
帮助你生成超酷计时器和时钟效果的jQuery插件 - FlipClock.js
为什么80%的码农都做不了架构师?>>> 日期:2013-6-6 来源:GBin1.com 在线演示 FlipClock.js 是一款功能强大并且支持自定义的时钟和计时器的j ...
前端Js框架 UI框架汇总特性适用范围选择
身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指 ...
如何去调试前端JS代码？以Chrome谷歌浏览器为例
前端调试是所有前端开发者绕不过去的一个环节,很多初学者却不知道该如何去做,今天小千就来以Chrome谷歌浏览器为例,教大家如何去调试前端JS代码. 为什么要调试? 程序就是函数堆砌起来的,程序的运行就 ...

前端js实现时钟效果

前端js实现时钟效果相关推荐

最新文章

热门文章