Css3+Js制作漂亮时钟(附源码)


Posted in HTML / CSS onApril 24, 2013

Css3+Js 漂亮时钟
浏览器支持 IE9/GoogleChrome/FireFox/Safari
效果图:
Css3+Js制作漂亮时钟(附源码) 
代码下载
HTML代码

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta >
<title>css3+js打造漂亮时钟</title>
<style>
body{background: -webkit-radial-gradient(center center,circle,#666,#000); margin: 0;}
div{margin: 0; padding: 0;}
.box{padding-top: 50px; width:410px; margin: 0 auto;}
.clock{position: relative; width:400px; height: 400px; border: 5px solid #fff; border-radius: 200px; background:-webkit-radial-gradient(center center,circle,#fff,#bbb); box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.8); }
.clock .clock-xin{position: absolute; top: 50%; left: 50%; width:30px; height: 30px; border-radius: 15px; background: #eee;margin:-15px 0 0 -15px;}
.clock .clock-xin2{position: absolute; top: 50%; left: 50%; width:12px; height: 12px; border-radius: 6px; background: #f00; z-index: 100; margin:-6px 0 0 -6px;}
.clock .date{position: absolute; z-index: 3; top: 245px; left: 130px; font-size: 20px; color: #000; text-shadow: 1px 1px white; }
.clock .hour{position: absolute; z-index: 3; top: 50%; left: 50%; width:160px; height: 6px; border-radius:5px; background: #000; -webkit-transform-origin: 10px 50%; margin:-3px 0 0 -10px;}
.clock .min{position: absolute; z-index: 4;top: 50%; left: 50%; width:180px; height: 4px; border-radius:5px; background: #333; -webkit-transform-origin: 10px 50%; margin:-2px 0 0 -10px;}
.clock .sec{position: absolute; z-index: 5; top: 50%; left: 50%; width:210px; height: 2px; background: #f00; -webkit-transform-origin: 30px 50%; margin:-1px 0 0 -30px;}
.clock em{display: block; width: 2px; height: 5px; background: #000; position: absolute; top: 0; left: 0; -webkit-transform-origin: 50% 0; margin-left: -1px;}
.clock em.ishour{width: 6px; height: 10px; margin-left: -3px;}
.clock em.ishour i{font-size: 25px; color: #000; position: absolute; top: 12px; left: -7px;text-shadow: 1px 1px white; }
</style>
</head>
<body>
<div style="color:white;">浏览器支持:GoogleChrome</div>
<div class="box">
<div class="clock" id="clock">
<div class="clock-xin"></div>
<div class="clock-xin2"></div>
<div id="date" class="date"></div>
<div id="hour" class="hour"></div>
<div id="min" class="min"></div>
<div id="sec" class="sec"></div>
</div>
</div>
<script>
window.onload = function() {
var winHeight = document.documentElement.clientHeight;
document.getElementsByTagName('body')[0].style.height = winHeight+'px';
var $clock = document.getElementById('clock'),
$date = document.getElementById('date'),
$hour = document.getElementById('hour'),
$min = document.getElementById('min'),
$sec = document.getElementById('sec'),
oSecs = document.createElement('em');
for (var i = 1; i < 61; i++) {
var tempSecs = oSecs.cloneNode(),
pos = getSecPos(i);
if(i%5==0){
tempSecs.className = 'ishour';
tempSecs.innerHTML = '<i style="-webkit-transform:rotate('+(-i*6)+'deg);">'+(i/5)+'</i>';
}
tempSecs.style.cssText='left:'+pos.x+'px; top:'+pos.y+'px; -webkit-transform:rotate('+i*6+'deg);';
$clock.appendChild(tempSecs);
}
// 圆弧上的坐标换算
function getSecPos(dep) {
var hudu = (2*Math.PI/360)*6*dep,
r = 200; //半径大小
return {
x: Math.floor(r + Math.sin(hudu)*r),
y: Math.floor(r - Math.cos(hudu)*r),
}
}
;(function() {
// 当前时间
var _now = new Date(),
_h = _now.getHours(),
_m = _now.getMinutes(),
_s = _now.getSeconds();
var _day = _now.getDay();
_day = (_day==0)?7:_day;
if(_day==1){
_day = "一";
}else if(_day==2){
_day = "二";
}else if(_day==3){
_day = "三";
}else if(_day==4){
_day = "四";
}else if(_day==5){
_day = "五";
}else if(_day==6){
_day = "六";
}else if(_day==7){
_day = "日";
}
$date.innerHTML = _now.getFullYear()+'-'+(_now.getMonth()+1)+'-'+_now.getDate()+' 星期'+_day;
//绘制时钟
var gotime = function(){
var _h_dep = 0;
_s++;
if(_s>59){
_s=0;
_m++;
}
if(_m>59){
_m=0;
_h++;
}
if(_h>12){
_h = _h-12;
}
//时针偏移距离
_h_dep = Math.floor(_m/12)*6;
$hour.style.cssText = '-webkit-transform:rotate('+(_h*30-90+_h_dep)+'deg);';
$min.style.cssText = '-webkit-transform:rotate('+(_m*6-90)+'deg);';
$sec.style.cssText = '-webkit-transform:rotate('+(_s*6-90)+'deg);';
};
gotime();
setInterval(gotime, 1000);
})();
};
</script>
</body>
</html>
HTML / CSS 相关文章推荐
css3一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 HTML / CSS
CSS3盒子模型详解
Apr 24 #HTML / CSS
CSS3盒子模型详解
Apr 24 #HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 #HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 #HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 #HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 #HTML / CSS
用纯css3和html制作泡沫对话框实现代码
Mar 21 #HTML / CSS
You might like
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
Python中字符串对齐方法介绍
2015/05/21 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
毕业生自荐信范文
2015/03/05 职场文书
学校工会工作总结2015
2015/05/19 职场文书
楚门的世界观后感
2015/06/03 职场文书
跑吧孩子观后感
2015/06/10 职场文书
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
关于mysql中string和number的转换问题
2022/06/14 MySQL