css3 简易时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Josefin+Slab:400,700" type="text/css">
<title>CSS3时钟</title>
<style>
body {
/*background-color: #ccc;*/
}
ol,ul {
margin: 0;
padding: 0;
list-style: none;
}
h1{
text-align: center;
color: #333;
margin-top: 40px;
font-family: 'Microsoft Yahei';
}
.clock{
position: relative;
width: 200px;
height: 200px;
border-radius: 100%;
background-color: #292a38;
margin: 50px auto;
}
.pointer li.circle{
position: absolute;
top: 50%;
left: 50%;
transform-origin: left center;
background:#fff;
width: 10px;
height: 10px;
border-radius: 100%;
margin-top: -5px;
margin-left: -5px;
}
/*.line-demo{
position: absolute;
left: 50%;
top: 50%;
transform: rotate(-60deg) translate(75px,-50%);
transform-origin: left center;
width: 20px;
height: 10px;
background-color: red;
z-index: 1;
} */
/*刻度*/
.line-hour li,.line-min li{
position: absolute;
left: 50%;
top: 50%;
transform-origin:left center;
background-color: #fff;
}
.line-hour li{
width: 10px;
height: 2px;
}
.line-min li{
width: 5px;
height: 2px;
}
/*数字*/
.number {
position: absolute;
height: 150px;
width: 150px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: 'Microsoft Yahei';
font-size: 15px;
color: #fff;
}
.number li {
position: absolute;
transform: translate(-50%, -50%);
}
/*指针*/
.pointer li{
position: absolute;
top: 50%;
left: 50%;
transform-origin: left center;
background:#fff;
}
.pointer li.hour{
width: 45px;
height: 3px;
margin-top: -1px;
}
.pointer li.min{
width: 60px;
height: 2px;
margin-top: -1px;
}
.pointer li.sec{
width: 45px;
height: 3px;
margin-top: -1px;
}
</style>
</head>
<body>
<h1>css 始终效果演示</h1>
<div class="clock">
<ul class="line-min"></ul>
<ul class="line-hour">
<li class="line-demo"></li>
</ul>
<ol class="number"></ol>
<ul class="pointer">
<li class="hour"></li>
<li class="min"></li>
<li class="sec"></li>
<li class="circle"></li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
function init(){
drawLines($('.line-min'),60,85);
drawLines($('.line-hour'),12,80);
drawNumbers($('.number'));
move();
}
init();
// 绘制钟表刻度线
//@param wrap 刻度线的父容器
//@param total 刻度线的总个数
//@param translateX 刻度线在x轴方向的偏移量
function drawLines(wrap,total,translateX){
var gap = 360/total;
var strHtml = "";
for(var i=0;i<total;i++){
strHtml += '<li style="transform:rotate('+(i*gap)+'deg)translate('+translateX+'px,-50%)"></li>';
}
wrap.html(strHtml);
}
// 绘制时钟数字
//@param wrap 数字的父容器
function drawNumbers(wrap){
var radius = wrap.width() / 2;
var strHtml = '';
for(var i=1;i<=12;i++){
var myAngle = (i-3)/6 * Math.PI;
var myX = radius + radius*Math.cos(myAngle), //x= r+rcos(0)
myY = radius + radius*Math.sin(myAngle); //y= r+rsin(0)
strHtml += '<li style="left:' + myX + 'px; top:' +myY + 'px">' +i + '</li>';
}
wrap.html(strHtml);
}
//钟表走动，转动秒针、分针、时针
function move(){
//获取指针
var domHour = $('.hour'),
domMin = $('.min'),
domSec = $('.sec');
setInterval(function(){
var now = new Date(),
hour = now.getHours(),
min = now.getMinutes(),
sec = now.getSeconds();
var secAngle = sec*6 - 90,
minAngle = min*6 + sec*0.1 - 90,
hourAngle = hour*30 + min*0.5 - 90;
domSec.css('transform','rotate('+secAngle+'deg)');
domMin.css('transform','rotate('+minAngle+'deg)');
domHour.css('transform','rotate('+hourAngle+'deg)');
document.title = hour + ':' + min + ':' +sec;
},1000);
}
})
</script>
</body>
</html>
css3 简易时钟的更多相关文章
- 15个超强悍的CSS3圆盘时钟动画赏析
在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个超强悍的圆盘时钟动画,很多都是基于CSS3,也有 ...
- 用canvas绘制一个简易时钟
在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...
- CSS3简易表盘时钟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- canvas绘制简易时钟
时钟绘制的非常简易,但该有的都有了. 效果图如下, <!DOCTYPE html> <html> <head lang="en"> <me ...
- 通过Canvas + JS 实现简易时钟实战
最近通过各种渠道学习了下html5中的canvas元素,为了练练手就随手写了一个简易的时钟.时钟本身不复杂,没有使用图片进行美化,下面就与大家分享一下具体的代码: 这是最终实现的效果: 部分的启发点来 ...
- CSS3 圆形时钟式网页进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS3制作时钟
这个效果是一个CSS3制作的时钟,不过并不是我们传统的时钟风格,分别用三块显示 时.分.秒三个部分,而且这个DEMO中藤藤还为其加上了一个js的效果,能让这个效 果和现实时钟的时间同步.这个效果运用到 ...
- 史上最简单的js+css3实现时钟效果
今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...
- css3简易实现图标动画由小到大逐个显现
在制作网站时避免图片太平淡经常会用到动画效果:由小到大跳跃出现.这种效果很有视觉冲击力,显著提高关注度~ 原理:利用css3的动画属性@keyframes@-moz-keyframes@-webkit ...
随机推荐
- Docker学习笔记-CentOS7镜像
前言: 环境:centos7.5 64 位 正文: 第一步:下载centos7镜像 docker pull centos 第二步:建立centos7的容器 sudo docker run --priv ...
- MySQL结构
MySQL属于关系型数据库管理系统(RDBMS),使用RDBMS时,最常见的系统结构就是客户端/服务器类型(C/S类型)这种结构. 服务器指的是用来接收其他程序发出的请求,并对该请求进行相应处理的程序 ...
- python 按照一个字典的值来对这个字典进行排序
old_dic = {'a':6, 'b':3, 'c':2, 'd':4, 'e':5, 'f':1}new_dic = sorted(old_dic.items(), key=lambda d:d ...
- g++编译的makefile模板库和脚本
编译C++文件,特别是多文件的时候,经常要找模板,这里为了后面方便,就自己做了一个模板. makefile模板:Makefile # Object files to either reference ...
- Express中间件的意思 next()的方法
一.什么是express?Express是一个简洁.灵活的noode.jsWeb应用开发框架,它提供一系列强大的特性,帮助你创建各种Web和移动设备应用.Express项目的底层由许多的中间件在协同工 ...
- 如何用chrome注册版权登记系统
版权登记系统的网址: http://apply.ccopyright.com.cn/goadatadic/registergetList.do 打开网站,一股古朴的气息扑面而来,嗯,一看就是IE时代的 ...
- CentOS 7的安装详解
不多说,直接上干货! CentOS 6.5的安装详解 主流: 目前的Linux操作系统主要应用于生产环境, 主流企业级Linux系统仍旧是RedHat或者CentOS. 免费: RedHat 和Ce ...
- C++操作xls
http://pan.baidu.com/share/link?shareid=753113427&uk=3307409781
- MyBatis源码解析（十一）——Parsing解析模块之通用标记解析器（GenericTokenParser）与标记处理器（TokenHandler）
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6724223.html 1.回顾 上面的几篇解析了类型模块,在MyBatis中类型模块包含的 ...
- 第10章 统计和查看Linux的系统状态
写在前面的话:本文是假设你已经有了进程.内存.cpu的理论基础而写的,文中涉及的各种状态只给出了简单说明而没有解释它们的意义,如果不懂这些理论性的东西,本文可能让你看的直接想右上角叉叉.关于这些理论, ...