Css3+Js制作漂亮时钟(附源码)
发布时间：2013-04-24 16:27:20 作者：佚名 
我要评论
我要评论Css3+Js实现漂亮时钟，浏览器支持IE9/GoogleChrome/FireFox/Safari等等，感兴趣的朋友可以下载测试，希望对你学习css3有所帮助
Css3+Js 漂亮时钟
浏览器支持 IE9/GoogleChrome/FireFox/Safari
效果图：
代码下载
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>
浏览器支持 IE9/GoogleChrome/FireFox/Safari
效果图：
代码下载
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>
相关文章
- CSS3和SVG的结合使用为网页设计带来了创新的动态视觉效果,本文通过一个圆形进度条的动画特效示例,展示了如何利用CSS3的动画功能和SVG的矢量图形能力来创建丰富的用户交互体2024-10-24
本文解析了CSS属性box-shadow的用法和应用,属性可以设置一个或多个下拉阴影的框,通过box-shadow属性,可以定义水平阴影的位置、垂直阴影的位置、模糊距离、阴影的大小和颜色2024-10-21- CSS3的@media查询功能允许我们根据不同的媒体类型和设备特性来应用不同的样式规则,,本文详细探讨了@media查询的定义、语法、使用场景及注意事项,旨在帮助开发者更好地理解2024-10-17
CSS3 新特性 box-shadow 阴影效果、圆角border-radius效果实现
CSS3的border-radius属性可以轻松制作圆角效果,支持一至四个值来分别定义四个角的圆角大小,一个值时所有角圆角相同,两个值时对角线上的角相同,本文给大家介绍CSS3 新特性 b2024-10-17- CSS3动画为网页设计带来了丰富的动态效果，使得页面更加生动和吸引人,然而，有时我们希望动画在结束时保持最终状态，而不是回到初始状态,本文将介绍几种方法来实现这一效果2024-10-15
伪元素和伪类都增强了CSS选择器的功能,但它们有明显的区别,伪元素通过::表示,如::before和::after,用于向元素添加或修改内容,伪类则通过:表示,如:hover和:first-child,用于2024-10-15- 本文介绍了使用CSS3实现各种样式效果的方法,包括文字渐变、圆角、阴影、多重背景等,通过实例代码,展示了如何简洁有效地增强网页视觉效果,无需额外图像或复杂脚本,适合前端2024-09-13
在Web开发中，动态滚动播放列表能够提升用户体验，使内容展示更加生动有趣,本文介绍了如何仅使用CSS3实现一个基础的循环播放列表，其中关键技术包括@keyframes规则和animat2024-09-11
之前有做过一个需求，安卓端嵌H5页面，实现语音输入并包含输入时动画，跳动的小球，多个小球同时跳动，相对定位需要left不相同，其次每个小球动画开始有时间差，其次就是小2024-08-29
详解CSS3 边框样式(包含border-radius、border-image与box-shadow)
这篇文章主要介绍了CSS3 边框样式(包含border-radius、border-image与box-shadow)的相关知识，本文给大家介绍的非常详细，,需要的朋友可以参考下2024-08-29
最新评论