js+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: #ccc;
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%;
top: 50%;
margin: -90px 0 0 -90px;
border-radius: 90px;
}
.dotted{
position: absolute;
width: 20px;
height: 20px;
background-color: #000;
border-radius: 10px;
left: 50%;
top: 50%;
z-index: 2;
margin: -10px 0 0 -10px;
}
.hour{
position: absolute;
width: 10px;
height: 60px;
background-color: #ccc;
left: 50%;
top: 50%;
margin: -60px 0 0 -5px;
}
.minute{
position: absolute;
width: 8px;
height: 70px;
background-color: #ddd;
left: 50%;
top: 50%;
margin: -70px 0 0 -4px;
}
.seconds{
position: absolute;
width: 6px;
height: 80px;
background-color: red;
left: 50%;
top: 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("+s*6+"deg)";
minute.style.WebkitTransform = "rotate("+m*6+"deg)";
hour.style.WebkitTransform = "rotate("+h*30+"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://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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%;top: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%;top: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-top:-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;top:-6px}
.big-mark,.small-mark{width:4px;height:12px;background:#333;position:absolute;left:50%;top: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%;top:12px}
.c60 i{font:700 20px/1.5 Arial;position:absolute;left:-200%;top:12px}
#clock-date{width:170px;height:24px;line-height:24px;background:#fff;color:#666;border:1px solid #ccc;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(i*6*2*Math.PI/360))+"px";
/*注意正弦的角度制算法和弧度制算法，Math.sin的参数是弧度制算法，所以先把角度转换成弧度，再计算*/
ci.style.top=r-r*(Math.sin((90-i*6)*2*Math.PI/360))+"px";
//计算转动的角度
/*other*/
ci.style.transform="rotate("+i*6+"deg)";
/*FF*/
ci.style.MozTransform="rotate("+i*6+"deg)";
/*webkit*/
ci.style.WebkitTransform="rotate("+i*6+"deg)";
/*opera*/
ci.style.OTransform="rotate("+i*6+"deg)";
/*ms*/
ci.style.msTransform="rotate("+i*6+"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=-i*6;
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/60*s;
var mRadius=360/60*m;
//如果需要分针匀速移动，就赋值var mRadius=360/60*m+360/60/60*s
var hRadius=360/12*h+30/60*m;
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> 基础教程
- HTML基础教程
- HTML5基础教程
- HTML参考手册
- SVG 教程
- CSS 教程
- CSS 参考手册
- CSS3教程
- Bootstrap3 教程
- Bootstrap4 教程
- Font Awesome图标
- JavaScript 教程
- JavaScript 参考手册
- jQuery 教程
- AJAX 教程
- JSON 教程
- AngularJS 教程
- ReactJS 教程
- NodeJS 教程
- Python 教程
- C++ 教程
- Golang 教程
- C 语言教程
- PHP 教程
- C# 教程
- LINQ 教程
- Lua 教程
- Ruby 教程
- Rust 教程
- Linux 教程
- R 语言教程
- Docker 教程
- Scala 教程
- MatLab 教程
- Erlang 教程
- Pandas教程
- Numpy教程
- Matplotlib教程
- Flask教程
- Java 教程
- SpringBoot 教程
- JDBC 教程
- JSP 教程
- Servlet 教程
- Maven 教程
- Spring 教程
- Django 教程
- Swift 教程
- Kotlin 教程
- SQL 教程
- MongoDB 教程
- SQLite 教程
- PostgreSQL 教程
- MySql 教程
- Redis 教程
- Elasticsearch 教程
猜你喜欢
- mysql alter table 修改表命令详细介绍
- Kerberos安装教程及使用详解
- thinkPHP自动验证、自动添加及表单错误问题分析
- JQuery中解决重复动画的方法
- bootstrap读书笔记之CSS组件（上）
- Ubuntu下安装Docker教程
- Android仿支付宝上芝麻信用分雷达图
- Python版Mssql爆破小脚本
- Python版Mysql爆破小脚本
- PHP版Mysql爆破小脚本
- win8.1安装mysql5.6时遇到问题解决方案
- 原生JavaScript制作计算器
- JavaScript 实现的checkbox经典实例分享
- JavaScript正则表达式实例详解
- js实现碰撞检测特效代码分享
- js+css3制作时钟特效
- js实现可旋转的立方体模型
- input submit、button和回车键提交数据详解
- PHP CURL post数据报错 failed creating formpost data
- 移动端滑动插件Swipe教程
- PHPStrom 新建FTP项目以及在线操作教程
- 类似于QQ的右滑删除效果的实现方法
- js实现点击图片自动提交action的简单方法
- jQuery监听文件上传实现进度条效果的方法
- 浅谈js对象的创建和对6种继承模式的理解和遐想