html+css3实现网页时钟
在网页上实现时钟功能,效果如右图所示:
运用到的关键技术有:css3中的旋转、旋转基点设置
旋转:transform:rotate(*deg)
旋转基点:transform-origin: x轴偏移 y轴偏移
样式代码:
<style type="text/css" id="style">
#clock{
width:200px;
height: 200px;
border: 1px solid #000000;
margin: 100px auto;
border-radius: 50%;
position: relative;
}
#ul{
margin:;
padding:;
list-style: none;
position: relative;
}
#ul li{
width:2px;
height: 6px;
background:#000;
position: absolute;
top:;
left:98px;
-webkit-transform-origin:center 100px; /*表盘上刻度的旋转中心点位于表盘中央,x轴中间,y轴距离顶部100的位置*/
} #ul li:nth-of-type(5n+1){height:10px; } #clock div{
position: absolute;
-webkit-transform-origin:center bottom;
} #hour{
width:8px;
height:45px;
background: #0c0c0c;
left: 96px;
top:55px;
}
#min{
width:6px;
height:60px;
background:#c0c0c0;
left: 97px;
top:40px;
}
#sec{
width:4px;
height:80px;
background: red;
left: 98px;
top:20px;
}
#ico{
width:20px;
height: 20px;
background: #000000;
border-radius: 50%;
left: 90px;
top: 90px;
}
#time{
text-align: center;
}
</style>
javascript代码:
<script type="text/javascript">
window.onload = function(){ var oUl = document.getElementById('ul');
var oHour = document.getElementById('hour');
var oMin = document.getElementById('min');
var oSec = document.getElementById('sec');
var oStyle = document.getElementById('style');
var oTime = document.getElementById('time');
var iLi = '';
var iStyle ='';
for(var i=0;i<60;i++)
{
iStyle+='#ul li:nth-of-type('+(i+1)+'){-webkit-transform:rotate('+(i*6)+'deg)}';
iLi+='<li></li>';
}
oUl.innerHTML = iLi ;
oStyle.innerHTML+=iStyle; function toMove(){
var iHour = '';
var iMin = '';
var iSec = '';
var oDate = new Date();
iSec = oDate.getSeconds();
iMin = oDate.getMinutes()+iSec/60;
iHour = oDate.getHours()+iMin/60; oSec.style.webkitTransform='rotate('+(iSec*6)+'deg)';
oMin.style.webkitTransform='rotate('+(iMin*6)+'deg)';/**/
oHour.style.webkitTransform='rotate('+(iHour*30)+'deg)';/*表盘12小时,共360度,每小时走30度*/ oTime.innerHTML='当前的时间是:'+ Math.floor(iHour)+'时'+Math.floor(iMin)+'分'+iSec+'秒';
} setInterval(toMove,1000); };
</script>
网页布局代码:
<div id="clock">
<ul id="ul">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div id="ico"></div>
</div>
<div id="time"></div>
html+css3实现网页时钟的更多相关文章
- 【学】CSS3基础实例1 - 用CSS3做网页中的小三角,以及transition的用法
自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...
- 《CSS3专业网页开发指南》笔记
书本:<CSS3专业网页开发指南>(the book of css3) Peter Gasston 著 李景媛 吴晓嘉 译 第1章: 1.box-sizing : IE8及以上版本 ...
- 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载
HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" ...
- 网页计算器 && 简易网页时钟 && 倒计时时钟
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 学习笔记 第十二章 CSS3+HTML5网页排版
第12章 CSS3+HTML5网页排版 [学习重点] 正确使用HTML5结构标签 正确使用HTML5语义元素 能够设计符合标准的网页结构 12.1 使用结构标签 在制作网页时,不仅需要使用< ...
- CSS3简易表盘时钟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 利用CSS3制作网页动画
如何在网页中实现动画效果动态图片 flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形(transfrom) 它们可以分别操控元素发生平移.旋转 ...
- 简单的js实现网页时钟
js实现时钟. <div id="clock"></div> <script type="text/javascript"> ...
- css3制作网页中常见的小箭头
/* css3三角形(向上 ▲) */ div.arrow-up { width:0px; height:0px; border-left:5px solid transparent; /* 右透明 ...
随机推荐
- iOS:NAV+TABLE结合
功能:点击列表项,用列表字符串作为参数创建一个新视图,新视图默认可以有一个BACK按钮回到上一个视图 // // main.m // Hello // // Created by lishujun o ...
- C#反射(一) 【转】
在还不太熟悉反射的昨天,以为反射很神秘,在网上到处找答案.今天找了段代码敲了一下,茅塞顿开!其实反射也就那么简单的一回事! 反射是一种机制,通过这种机制我们可以知道一个未知类型的类型信息.比如, ...
- Java反射的理解
反射的作用: 1.运行时检查类的结构 2.运行时更改类的字段值 3.调用类的方法 准备知识: Class类:虚拟机为每一个对象保存的一份对象所属类的清单: static Class for ...
- 关于mysql授权账号权限时的空密码问题
-root ~]$ mysql -uroot -p Enter password:ERROR 1045 (28000): Access denied for user ‘root’@'localhos ...
- bzoj 1486: [HNOI2009]最小圈 dfs求负环
1486: [HNOI2009]最小圈 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 1022 Solved: 487[Submit][Status] ...
- iPhone开发 - 常用库
iPhone开发 - 常用库 这里总结了iPhone开发者开发过程中可能需要的一些资源 如何用Facebook graphic api上传视频: http://developers.facebook. ...
- c++ 名字粉碎(name mangling)
转自Ibm: Name mangling is the encoding of function and variable names into unique names so that linker ...
- CSS3 :nth-of-type() 选择器
可以设定第几个元素的样式 案例 css .qrcode img { margin-top: 30px; } .qrcode p:nth-of-type(1) { /*第一个p*/ font-size: ...
- codeforces #268 div2 D
对于这道题第一感觉是图论相关然后我们先分析,假设a[i]在A集合需要的元素是a[x],在B集合是a[y]那么假设a[i]在A集合,那必然a[x]也必须在A集合,由于a[y]如果在B集合就没有对应元素, ...
- WordPress ‘get_allowed_mime_types’函数安全漏洞
漏洞名称: WordPress ‘get_allowed_mime_types’函数安全漏洞 CNNVD编号: CNNVD-201309-170 发布时间: 2013-09-13 更新时间: 2013 ...