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 ...
随机推荐
- 3.CursorAdapter
会话页面 点击菜单时编辑的按钮显示,其余的时候gone ConversationUI public class ConversationUI extends Activity implements ...
- spring中的mybatis的sqlSession是如何做到线程隔离的？
项目中常常使用mybatis配合spring进行数据库操作,但是我们知道,数据的操作是要求做到线程安全的,而且按照原来的jdbc的使用方式,每次操作完成之后都要将连接关闭,但是实际使用中我们并没有这么 ...
- django(2.1) url
函数path() 1参数route:是一个匹配url的准则,这些准则不会匹配get或者post参数或者域名. 2参数view:当django找到了一个匹配准则,就会调用这个特定的视图函数,并传入一个h ...
- Spring详解（八）------事务管理
PS:本篇博客源码下载链接:http://pan.baidu.com/s/1mi3NhX2 密码:3io2 1.事务介绍 事务(Transaction),一般是指要做的或所做的事情.在计算机术语中是指 ...
- eclipse如何使用log4j详解，你get了吗？？？
1.下载log4j jar包 log4j下载地址 http://logging.apache.org/log4j/2.x/download.html 2.log4j jar包引入项目 接下来 ...
- psnr的定义和python实现
psnr是“Peak Signal to Noise Ratio”的缩写,即峰值信噪比,是一种评价图像的客观标准,它具有局限性,一般是用于最大值信号和背景噪音之间的一个工程项目. peak的中文意思是 ...
- Scala - 快速学习03 - 基础语法
1- 变量 变量 mutable variable 在程序运行过程中其值可能发生改变的量 关键词var定义变量,定义时直接进行求值 常量 immutable variable 在程序运行过程中其值不会 ...
- 使用SAX解析xml文档
1.首先,在main方法中解析xml文档,具体代码如下: import org.w3c.dom.*; import javax.xml.parsers.DocumentBuilder; import ...
- 整理一下pywinauto 的sendeys(py2.7)换成python3.6用PyUserInput
没办法入门学的是py3.6所以有些只支持2.7的库保好放弃了 senkeys (2.7)==>pyuserinput (3.6) ================================ ...
- 解决 VS2017 打断点无效
打断点无效 断点显示白色,鼠标移上去,提示:The breakpoint will not currently be hit. No Symbols have been loaded for this ...