js+css3制作时钟特效
网络编程 2021-07-04 20:01www.168986.cn编程入门
本文给大家汇总了2个JavaScript+css3实现的时钟特效的代码，非常的漂亮，有需要的小伙伴可以来参考下
我们先来看看效果图吧
再来奉上源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 钟表</title>
<style>
.clock{
position: relative;
width: 200px;
height: 200px;
border-radius: 110px;
border: 10px solid #000;
margin: 200px auto;
}
.line1,.line4{
position: absolute;
background-color: #aaa;
width: 10px;
height: 200px;
left: 50%;
margin-left: -5px;
}
.line2,.line3,.line5,.line6{
position: absolute;
background-color: #c;
width: 8px;
height: 200px;
left: 50%;
margin-left: -4px;
}
.line2{
transform: rotate(30deg);
}
.line3{
transform: rotate(60deg);
}
.line4{
transform: rotate(90deg);
}
.line5{
transform: rotate(120deg);
}
.line6{
transform: rotate(150deg);
}
.cover{
position: absolute;
width: 180px;
height: 180px;
background-color: #fff;
left: 50%;
: 50%;
margin: -90px 0 0 -90px;
border-radius: 90px;
}
.dotted{
position: absolute;
width: 20px;
height: 20px;
background-color: #000;
border-radius: 10px;
left: 50%;
: 50%;
z-index: 2;
margin: -10px 0 0 -10px;
}
.hour{
position: absolute;
width: 10px;
height: 60px;
background-color: #c;
left: 50%;
: 50%;
margin: -60px 0 0 -5px;
}
.minute{
position: absolute;
width: 8px;
height: 70px;
background-color: #ddd;
left: 50%;
: 50%;
margin: -70px 0 0 -4px;
}
.seconds{
position: absolute;
width: 6px;
height: 80px;
background-color: red;
left: 50%;
: 50%;
margin: -80px 0 0 -3px;
}
.minute,.hour,.seconds{
transform-origin: center bottom;
}
</style>
<script>
window.onload = function () {
var hour = document.querySelector(".hour");
var minute = document.querySelector(".minute");
var second = document.querySelector(".seconds");
var h = 0,m = 0,s = 0,ms =0;
setInterval(fn,10);
function fn () {
var date = new Date();
ms = date.getMilliseconds();
s = date.getSeconds()+ms/1000;
m = date.getMinutes()+s/60;
h = date.getHours()%12+m/60;
second.style.WebkitTransform = "rotate("+s6+"deg)";
minute.style.WebkitTransform = "rotate("+m6+"deg)";
hour.style.WebkitTransform = "rotate("+h30+"deg)";
}
}
</script>
</head>
<body>
<div class="clock">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="line5"></div>
<div class="line6"></div>
<div class="cover"></div>
<div class="dotted"></div>
<div class="hour"></div>
<div class="minute"></div>
<div class="seconds"></div>
</div>
</body>
</html>
再给大家分享一个网友的作品
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://.w3./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8">
<title>利用JS和CSS3制作的时钟效果</title>
<style type="text/css">
#clock{width:300px;height:300px;border:15px solid #333;position:relative;
border-radius:300px;
-moz-border-radius:300px;
-webkit-border-radius:300px;
-o-border-radius:300px;
-ms-border-radius:300px;
background:#ddd;
background:radial-gradient(#fff,#ddd);
background:-moz-radial-gradient(#fff,#ddd);
background:-webkit-radial-gradient(#fff,#ddd);
background:-o-radial-gradient(#fff,#ddd);
background:-ms-radial-gradient(#fff,#ddd);
box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;
-moz-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;
-webkit-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;
-o-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;
-ms-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;
}
.clock-core{width:16px;height:16px;background:#f00;position:absolute;left:50%;:50%;margin:-8px 0 0 -8px;z-index:30;
border-radius:16px;
-moz-border-radius:16px;
-webkit-border-radius:16px;
-o-border-radius:16px;
-ms-border-radius:16px;
}
#clock-h,#clock-m,#clock-s{width:6px;height:70px;background:#333;position:absolute;left:50%;:50%;margin:-70px 0 0 -3px;z-index:10;
transform-origin:50% 100%;
-moz-transform-origin:50% 100%;
-webkit-transform-origin:50% 100%;
-o-transform-origin:50% 100%;
-ms-transform-origin:50% 100%;
}
#clock-m{height:100px;margin-:-100px}
#clock-s{width:2px;height:155px;margin:-135px 0 0 -1px;background:#f00;
transform-origin:50% 87.097%;
-moz-transform-origin:50% 87.097%;
-webkit-transform-origin:50% 87.097%;
-o-transform-origin:50% 87.097%;
-ms-transform-origin:50% 87.097%;
}
#clock-h b,#clock-m b{width:0;height:0;font-size:0;border:3px dashed transparent;border-bottom:3px solid #333;position:absolute;left:0;:-6px}
.big-mark,.small-mark{width:4px;height:12px;background:#333;position:absolute;left:50%;:0;margin-left:-2px;
transform-origin:50% 0%;
-moz-transform-origin:50% 0%;
-webkit-transform-origin:50% 0%;
-o-transform-origin:50% 0%;
-ms-transform-origin:50% 0%;
}
.small-mark{width:2px;height:5px;background:#999;margin-left:-1px}
.big-mark i{font:700 20px/1.5 Arial;position:absolute;left:-100%;:12px}
.c60 i{font:700 20px/1.5 Arial;position:absolute;left:-200%;:12px}
#clock-date{width:170px;height:24px;line-height:24px;background:#fff;color:#666;border:1px solid #c;text-align:center;position:absolute;left:50%;bottom:70px;margin:0 0 0 -85px;border-radius:6px}
</style>
<script type="text/javascript">
function clock(){
var $=function(id){return document.getElementById(id)};
//写入刻度DOM，以及刻度的定位
function mark(){
//圆的半径
var r=parseFloat(window.getComputedStyle?window.getComputedStyle($("clock"),null).width:$("clock").currentStyle["width"])/2;
//插入DOM
for(var i=1;i<61;i++){
$("clock-mark").innerHTML+="<b class='c"+i+"'><i></i></b>";
var ci=document.getElementsByClassName("c"+i)[0];
var cii=ci.getElementsByTagName("i")[0];
//利用正弦定理计算刻度的定位
ci.style.left=r+r(Math.sin(i62Math.PI/360))+"px";
/注意正弦的角度制算法和弧度制算法，Math.sin的参数是弧度制算法，所以先把角度转换成弧度，再计算/
ci.style.=r-r(Math.sin((90-i6)2Math.PI/360))+"px";
//计算转动的角度
/other/
ci.style.transform="rotate("+i6+"deg)";
/FF/
ci.style.MozTransform="rotate("+i6+"deg)";
/webkit/
ci.style.WebkitTransform="rotate("+i6+"deg)";
/opera/
ci.style.OTransform="rotate("+i6+"deg)";
/ms/
ci.style.msTransform="rotate("+i6+"deg)";
//大刻度
if(i%5==0){
ci.className="c"+i+" "+"big-mark";
cii.innerHTML=i/5;
}
//小刻度
else{
ci.className="c"+i+" "+"small-mark";
ci.removeChild(cii);
}
//把数字转正
var iRotate=-i6;
cii.style.transform="rotate("+iRotate+"deg)";
cii.style.MozTransform="rotate("+iRotate+"deg)";
cii.style.WebkitTransform="rotate("+iRotate+"deg)";
cii.style.OTransform="rotate("+iRotate+"deg)";
cii.style.msTransform="rotate("+iRotate+"deg)";
}
}
//指针的转动
function turnR(){
var d=new Date();
var h=d.getHours();
var m=d.getMinutes();
var s=d.getSeconds();
var sRadius=360/60s;
var mRadius=360/60m;
//如果需要分针匀速移动，就赋值var mRadius=360/60m+360/60/60s
var hRadius=360/12h+30/60m;
var ch=$("clock-h");
var cm=$("clock-m");
var cs=$("clock-s");
/other/
ch.style.transform="rotate("+hRadius+"deg)";
cm.style.transform="rotate("+mRadius+"deg)";
cs.style.transform="rotate("+sRadius+"deg)";
/FF/
ch.style.MozTransform="rotate("+hRadius+"deg)";
cm.style.MozTransform="rotate("+mRadius+"deg)";
cs.style.MozTransform="rotate("+sRadius+"deg)";
/webkit/
ch.style.WebkitTransform="rotate("+hRadius+"deg)";
cm.style.WebkitTransform="rotate("+mRadius+"deg)";
cs.style.WebkitTransform="rotate("+sRadius+"deg)";
/opera/
ch.style.OTransform="rotate("+hRadius+"deg)";
cm.style.OTransform="rotate("+mRadius+"deg)";
cs.style.OTransform="rotate("+sRadius+"deg)";
/ms/
ch.style.msTransform="rotate("+hRadius+"deg)";
cm.style.msTransform="rotate("+mRadius+"deg)";
cs.style.msTransform="rotate("+sRadius+"deg)";
setTimeout(turnR,1000);
}
/显示日期/
function clockDate(){
var d=new Date();
var week=["日","一","二","三","四","五","六"];
$("clock-date").innerHTML=d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+" 星期"+week[d.getDay()];
}
//调用函数
mark();
turnR();
clockDate();
}
window.onload=clock;
</script>
</head>
<body>
<div id="clock">
<b class="clock-core"></b>
<div id="clock-h">
<b></b>
</div>
<div id="clock-m">
<b></b>
</div>
<div id="clock-s"></div>
<div id="clock-mark"></div>
<div id="clock-date"></div>
</div>
</body>
</html>
上一篇：js实现碰撞检测特效代码分享
下一篇：js实现可旋转的立方体模型
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程