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; /* 右透明 ...
随机推荐
- Prefixes and Suffixes
Codeforces Round #246 (Div. 2) D:http://codeforces.com/contest/432/problem/D 题意:给你一个长度不超过10^5的字符串.要你 ...
- Java OAuth开发包资料
原文地址:http://www.oschina.net/project/tag/307/oauth?lang=19&sort=time
- Android开源项目发现--- 工具类图片缓存篇(持续更新)
1. Android-Universal-Image-Loader 图片缓存 目前使用最广泛的图片缓存,支持主流图片缓存的绝大多数特性. 项目地址:https://github.com/nostra1 ...
- Eclipse没法自动补全代码解决
Eclipse没法自动补全代码解决 Eclipse无法自动补全代码解决 Window->Java->Editor->Content Assist->Advanced
- 挖坑#3-----DP优化+CDQ分治+期望DP
1492: [NOI2007]货币兑换Cash 1176: [Balkan2007]Mokia 1452: [JSOI2009]Count 1563: [NOI2009]诗人小G tyvj1309 ...
- Linux Shell编程(26)——代码块重定向
像 while, until, 和 for 循环代码块, 甚至 if/then 测试结构的代码块都能做到标准输入的重定向. 即使函数也可以使用这种重定向的格式 .所有的这些依靠代码块结尾的 < ...
- 万能的Volley
v1olley能干那些事?发送get请求 public void getJson() { String url = "http://"+host+":8080/web/j ...
- windows下安装python的C扩展编译环境(解决“Unable to find vcvarsall.bat”)
个人文章除注明转载外,均为个人原创或者翻译. 个人文章欢迎各种形式的转载,但请18岁以上的转载者注明文章出处,尊重我的劳动,也尊重你的智商: 本文链接:http://www.cnblogs.com/f ...
- [Java] HashMap 导致的高 CPU 使用率
今天在生产环境遇到一个问题,Java 应用程序的 cpu 使用比例很高,导致整台机器的 cpu 使用率高达 90% ,正常情况下是 20% 左右. 把 Thread dump 导出来,利用 IBM T ...
- Pick-up sticks - POJ 2653 (线段相交)
题目大意:有一个木棒,按照顺序摆放,求出去上面没有被别的木棍压着的木棍..... 分析:可以维护一个队列,如果木棍没有被压着就入队列,如果判断被压着,就让那个压着的出队列,最后把这个木棍放进队列, ...