在网页上实现时钟功能,效果如右图所示:

运用到的关键技术有: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实现网页时钟的更多相关文章

  1. 【学】CSS3基础实例1 - 用CSS3做网页中的小三角,以及transition的用法

    自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...

  2. 《CSS3专业网页开发指南》笔记

    书本:<CSS3专业网页开发指南>(the book of css3) Peter Gasston 著    李景媛 吴晓嘉 译 第1章: 1.box-sizing : IE8及以上版本 ...

  3. 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载

    HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" ...

  4. 网页计算器 && 简易网页时钟 && 倒计时时钟

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 学习笔记 第十二章 CSS3+HTML5网页排版

    第12章   CSS3+HTML5网页排版 [学习重点] 正确使用HTML5结构标签 正确使用HTML5语义元素 能够设计符合标准的网页结构 12.1  使用结构标签 在制作网页时,不仅需要使用< ...

  6. CSS3简易表盘时钟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 利用CSS3制作网页动画

    如何在网页中实现动画效果动态图片 flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形(transfrom) 它们可以分别操控元素发生平移.旋转 ...

  8. 简单的js实现网页时钟

    js实现时钟. <div id="clock"></div> <script type="text/javascript"> ...

  9. css3制作网页中常见的小箭头

    /* css3三角形(向上 ▲) */ div.arrow-up { width:0px; height:0px; border-left:5px solid transparent;  /* 右透明 ...

随机推荐

  1. 数据结构练习 00-自测5. Shuffling Machine (20)

    Shuffling is a procedure used to randomize a deck of playing cards. Because standard shuffling techn ...

  2. VC下Debug和Release区别

    整理日: 2015年3月23日 最近写代码过程中,发现 Debug 下运行正常,Release 下就会出现问题,百思不得其解,而Release 下又无法进行调试,于是只能采用printf方式逐步定位到 ...

  3. Hadoop 学习笔记 (十) hadoop2.2.0 生产环境部署 HDFS HA Federation 含Yarn部署

    其他的配置跟HDFS-HA部署方式完全一样.但JournalNOde的配置不一样>hadoop-cluster1中的nn1和nn2和hadoop-cluster2中的nn3和nn4可以公用同样的 ...

  4. Codeforces 712E Memory and Casinos

    Description There are n casinos lined in a row. If Memory plays at casino \(i\), he has probability ...

  5. Ubuntu 桌面歌词

    Ubuntu 有个用来显示歌词软件叫 osd-lyrics. 这个软件的强大之处在于他可以和各种播放器配合, 并且可以自动下载歌词. 自从升级到14.04后不能用了,便以为该软件被废弃了. 无意中发现 ...

  6. Microsoft Internet Explorer 远程代码执行漏洞(CVE-2013-3186)(MS13-059)

    漏洞版本: Microsoft Internet Explorer 6 - 10 漏洞描述: BUGTRAQ ID: 61663 CVE(CAN) ID: CVE-2013-3186 Windows ...

  7. 【转】android: 长按删除listview的item

    原文网址:http://www.cnblogs.com/nuistlr/archive/2012/09/07/2675649.html 首先要继承OnItemLongClickListener pub ...

  8. [cocos2d-x3.0]Android+NDK+Eclipse环境搭建及编译步骤~

    1: 必要准备 1): jdk&jre 2): adt-bundle 3): android ndk r9 4): python2.7 5): cocos2d-x 3.0 alpha0 2: ...

  9. java IO复习(三)

    package com.zyw.io; import java.io.File; import java.io.FilenameFilter; import java.util.ArrayList; ...

  10. 全国各城市Uber客服联系方式(电话、邮箱、微博)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...