js 分享一个 时钟效果
*{
margin: 0;
padding: 0;
}
#outLine{
width: 300px;
height: 300px;
border-radius: 300px;
background-color: beige;
position: relative;
}
#inLine
{
width: 280px;
height: 280px;
position: absolute;
border-radius: 280px;
background-color: white;
left:10px;
top: 10px;
}
#inLine div:not([id])
{
width: 280px;
height: 30px;
top:125px;
transform-origin: 140px 15px;
}
.begin
{
width: 30px;
float: right;
line-height: 30px;
text-align: center;
}
.end
{
text-align: center;
width: 30px;
float: left;
line-height: 30px;
}
#inLine div:nth-child(1)
{
transform: rotate(-90deg);
}
#inLine div:nth-child(2)
{
transform: rotate(-60deg);
}
#inLine div:nth-child(3)
{
transform: rotate(-30deg);
}
{
transform: rotate(30deg);
}
#inLine div:nth-child(6)
{
transform: rotate(60deg);
}
#inLine div:first-child span
{
transform: rotate(90deg);
}
#hour{
width: 80px;
height: 10px;
transform-origin: 0px 5px;
background-color: chartreuse;
transform: rotate(-90deg);
position: absolute;
left: 140px;
top:135px;
}
#minute,#second
{
width: 100px;
height: 10px;
transform-origin: 0px 5px;
background-color: chartreuse;
transform: rotate(-90deg);
position: absolute;
left: 140px;
top:135px;
}
</style>
<body>
<div id="outLine">
<div id="inLine">
<div><span class="begin">12</span><span class="end">6</span></div>
<div><span class="begin">1</span><span class="end">7</span></div>
<div><span class="begin">2</span><span class="end">8</span></div>
<div><span class="begin">3</span><span class="end">9</span></div>
<div><span class="begin">4</span><span class="end">10</span></div>
<div><span class="begin">5</span><span class="end">11</span></div>
<div id="hour"></div> <!-- 时针的div-->
<div id="minute"></div> <!--分针的div-->
<div id="second"></div> <!--秒针的div-->
</div>
</div>
</body>
var seconds=0;
var minutes=0;
var hours=0;
var second=document.querySelector("#second");
var minute=document.querySelector("#minute");
var hour=document.querySelector("#hour");
animation();
function animation() {
requestAnimationFrame(animation); //浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。
var date=new Date();
seconds=date.getSeconds()*6-90+date.getMilliseconds()*(6/1000); //度数
second.style.transform="rotate("+seconds+"deg)"; //秒针转过的度数
minutes=date.getMinutes()*6-90+date.getSeconds()*(6/60);
minute.style.transform="rotate("+minutes+"deg)"; //分针转过的度数
hours=date.getHours()*30-90+date.getMinutes()*(30/60)+date.getSeconds()*(30/3600);
hour.style.transform="rotate("+hours+"deg)"
}
js 分享一个 时钟效果的更多相关文章
- 史上最简单的js+css3实现时钟效果
今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...
- JS实现简单时钟效果
老师上课需要我们做一个时钟的小作业 ,我把它放在上面记录一下啦 表盘和时针我都是用的背景图的形式,然后绝对定位,通过调整left和top确定时针.分针.秒针的位置,transform-origin设置 ...
- 用JS实现一个时钟的效果
(效果图) 分两步进行的. 第一步: 要得到现在的 时 分 秒 但是这里面有一个小玄机 . 比如现在是 9点整 时针指向 9 是没错的 但是如果现在是 9点半 时针应该指向的是 9到1 ...
- layer.js,,,分享一个好用的弹出层
基本属性: <!DOCTYPE html> <html> <head> <head> <meta content="text/html; ...
- transform实现的时钟效果
又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform ...
- 原生javascript实现网页显示日期时钟效果
刚接触javascript中Date内置对象时,以为这些方法都太简单了,结果要自己实际操作写一个时钟效果还真一时把我难住了,主要有几点大家要注意的.先看实际效果 要实现这样的效果 某年某月某日星期几几 ...
- 福利到~分享一个基于jquery的智能提示控件intellSeach.js
一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...
- 基于canvas的原生JS时钟效果
概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...
- JS制作一个创意数字时钟
通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...
随机推荐
- 关于java爬虫以及一些实例
首先是工具介绍 Jsoup jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法 ...
- 个人永久性免费-Excel催化剂功能第90波-xml与json数据结构转换表格结构
在网络时代,大量的数据交互以xml和json格式提供,特别是系统间的数据交互和网络WebAPI.WebService接口的数据提供,都是通过结构化的xml或json提供给其他应用调用返回数据.若能提供 ...
- 给自己的网站加上HTTPS
前言 现在谷歌等厂商大力推行https协议,如果你的网站不支持https,在使用谷歌浏览器时,会被警告网站不安全.w(ﾟДﾟ)w,不安全?哪里不安全了?OK,那我改成支持https好吧.关于http怎 ...
- [ PyQt入门教程 ] Qt Designer工具的布局管理
这节课很重要..界面整洁美观与否就看布局了..这里讲布局方法,至于设计的天赋与最终界面的美感那就看造化了.. 本文主要讲述Qt Designer工具实现界面控件布局管理,就是排列组合控件.包括水平布局 ...
- Floyd—Warshall算法
我们用DP来求解任意两点间的最短路问题 首先定义状态:d[k][i][k]表示使用顶点1~k,i,j的情况下,i到j的最短路径 (d[0][i][j]表示只使用i和j,因此d[0][i][j] = c ...
- 应用性能测试神器 Gatling，你用过吗？
在应用程序上线之前,有多少人做过性能测试? 估计大部分开发者更多地关注功能测试,并且会提供一些单元测试和集成测试的用例.然而,有时候性能漏洞导致的影响比未发现的业务漏洞更严重,因为性能漏洞影响的是整个 ...
- ERROR 临时
ERROR ITMS-4238: "Redundant Binary Upload. There already exists a binary upload with build vers ...
- Linux Qt使用POSIX多线程条件变量、互斥锁(量)
今天团建,但是文章也要写.酒要喝好,文要写美,方为我辈程序员的全才之路.嘎嘎 之前一直在看POSIX的多线程编程,上个周末结合自己的理解,写了一个基于Qt的用条件变量同步线程的例子.故此来和大家一起分 ...
- codeforces 371A K-Periodic Array
很简单,就是找第i位.i+k位.i+2*k位...........i+m*k位有多少个数字,计算出每个数出现的次数,找到出现最多的数,那么K-Periodic的第K位数肯定是这个了.这样的话需要替换的 ...
- SmartSql使用教程（4）——多库配置与使用
一.引言 已经几个月没更新了.本来上一章的预告是准备写TypeHandler的相关特性的.但是在准备的时候.SmartSql的作者重构了一下TypeHandler,使得我一下子没搞懂TypeHandl ...