<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:200px;
height:200px;
border-radius: %;
border:1px solid #;
position: relative;
margin:5px auto;
text-align: center;
box-shadow: 0px 0px 20px 5px #;
}
div span{
transform-origin: bottom center;
}
.sec{
position: absolute;
top:%;
left:%;
margin-left:-2px;
margin-top:-80px;
height:80px;
width:4px;
background: red;
border-radius: % % ;
}
.min{
position: absolute;
top:%;
left:%;
margin-left:-3px;
margin-top:-60px;
height:60px;
width:6px;
background: #;
border-radius: % % ;
}
.hou{
position: absolute;
top:%;
left:%;
margin-left:-4px;
margin-top:-40px;
height:40px;
width:8px;
background: #;
border-radius: % % ;
}
.cap{
position: absolute;
top:%;
left:%;
margin-left:-6px;
margin-top:-6px;
height:12px;
width:12px;
background: radial-gradient(#ccc,#);
border-radius: %;
}
i b{
position: absolute;
top:12px;
left:-4px;
}
</style>
<script>
window.onload=function(){
var aSpan=document.querySelectorAll('span');
var oBox=document.getElementById('box');
clock();
setInterval(clock,); for (var i = ; i <; i++) {
var oI=document.createElement('i');
oI.style.width='6px';
if(i%){
oI.style.height='8px';
}else{
oI.innerHTML='<b>'+i/+'</b>';
oI.children[].style.transform='rotate(-'+i*+'deg)';
oI.style.height='16px';
} oI.style.position='absolute';
oI.style.top='0px';
oI.style.left='100px';
oI.style.background='#000';
oI.style.transform='rotate('+i*+'deg)';
oI.style.transformOrigin='0px 100px'; oBox.appendChild(oI);
}
function clock(){
var oDate=new Date();
var h=oDate.getHours();
var m=oDate.getMinutes();
var s=oDate.getSeconds();
var ms=oDate.getMilliseconds(); aSpan[].style.transform='rotate('+(*(h%)/+m*/)+'deg)';
aSpan[].style.transform='rotate('+(*m/+s*/)+'deg)';
aSpan[].style.transform='rotate('+(*s/+ms*/)+'deg)';
}
};
</script>
</head>
<body>
<div id="box">
<span class="sec"></span>
<span class="min"></span>
<span class="hou"></span>
<p class="cap"></p>
</div>
</body>
</html>

css3++js钟表的更多相关文章

  1. 用css3+js写了一个钟表

    有一天看到css3旋转这个属性,突发奇想的写了一个钟表(没做浏览器兼容),来一起看看是怎么写的吧! 先给个成品图,最终结果是个样子的(动态的). 首先,思考了一下页面的布局,大致需要4层div,最底层 ...

  2. js css3实现钟表效果

    原理: 利用transform-origin改变旋转的圆心,实现秒数和分钟数的刻度线,利用transfrom translate实现钟表小时刻度的显示 html: <div class=&quo ...

  3. 用CSS3实现钟表效果

    背景:最近在学习CSS3,看到了一个小案例,通过自己的学习,动手实现了它,现在把它分享出来. 效果图 实现过程 1.首先我们需要在页面中写出一个静态的钟表效果.首先我们需要一个表盘div wrap 对 ...

  4. css3+js打造炫酷图片展示

    <!DOCTYPE html> <html onselectstart="return false"> <!-- onselectstart=&quo ...

  5. CSS3+Js制作的一款响应式导航条

    今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大 ...

  6. css3+js 实现砸金蛋效果

    最近闲来无事,在网上看到有人写了个砸金蛋的效果,他是没有用到css3的,当时我就感觉没什么动态效果 感觉体验不是很好,所有我就想用css3来改下,于是也来试着写写. 本来想弄个视频给你们看看效果的,但 ...

  7. CSS3+JS 实现的便签应用

    概述 利用HTML5新增的 locationStorage 实现的便签应用,没有使用 JQuery,主要是为了练习原生JS的使用,采用响应式开发,在手机端和桌面端都有良好的体验,而且使用CSS3添加了 ...

  8. 用CSS3/JS绘制自己想要的按钮

    我认为按钮的绘制分以下三个步骤 第一步,绘制按钮的轮廓 选择合适的html标签,设置轮廓的CSS /* html代码 */ <a href="#" class="b ...

  9. 简单的JS钟表计时

    思路:先写出简单的数字计时,根据时分秒的数值转换成度数,使用CSS3的transform进行div倾斜. 知识点:transform可以对div进行倾斜或旋转等效果.但是根据浏览器不同代码也不同,本代 ...

随机推荐

  1. 解决NGUI自动被设置LYAER

    解决NGUI自动被设置LYAER uiwidget.cs1011行public void checklayer()这里修改 可以让LAYER不跟随父物体变动 但是这里有个问题 摄像机的CULL 不会被 ...

  2. iOS 指定圆角个数

    需要实现的效果很明确,只要左上和右上两个地方圆角,以前都是通过layer 直接设置四个角都变成圆角,然后我就开始了强大的搜索功能 然后我就获得了我想要的东西 技术链接:http://www.xuebu ...

  3. Ext JS 4 新特性2:配置项属性(config)之一

    Ext JS 4 新特征2:配置项属性config 最新版本的Ext JS 4.2的另外一个伟大的新特征就是增加了configuration配置项属性,当我们在创建一个新类的时候,经常性的要设置某某属 ...

  4. 向tiny6410移植tslib(tslib-1.4)

    环境:RedHat 已安装交叉编译器 tslib版本:1.4 首先在redhat文件系统的/usr/local/tslib 创建目录 拷贝源代码tslib-1.4.tar.gz到/usr/local/ ...

  5. SubLime3 Emmet插件终极教程

    当我们在手写HTML.CSS等 页面的时候,这款神级插件是不可多得的神器 1.官方示例:http://docs.emmet.io/cheat-sheet/ 2.第三方示例:http://www.w3c ...

  6. 转:在虚拟机中用NAT方式连接网络

    1.安装VMware Workstation .在安装过VMware Workstation软件后,会在本地连接中,多了两个虚拟网卡,一个是 VMware Network Adapter for VM ...

  7. B/S 类项目改善

    B/S 类项目改善的一些建议   要分享的议题 性能提升:在访问量逐渐增大的同时,如何增大单台服务器的 PV2 上限,增加 TPS3 ? RESTful:相较于传统的 SOAP1,RESTful 风格 ...

  8. Left Jion等价SQL猜想验证

    猜想:以下两条SQL等价 select * from A left join B on A.ID=B.BID and B.BName=N'小明' select * from A left join ( ...

  9. docker整理

    Docker的简单介绍 docker是什么 Docker 最初是 dotCloud 公司创始人 Solomon Hykes 在法国期间发起的一个公司内部项目,于 2013 年 3 月以 Apache ...

  10. Uncaught DOMException: Failed to construct &#39;WebSocket&#39;: The URL &#39;/qibao/websocket/service1000&#39; is invalid.

    出现这个问题是构造 WebSocket失败了. js代码改成 //实现化WebSocket对象,指定要连接的服务器地址与端口 建立连接//等同于socket = new WebSocket(path+ ...