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 ...
随机推荐
- mysql数据统计技巧备忘录
mysql 作为常用数据库,操作贼六是必须的,对于数字操作相关的东西,那是相当方便,本节就来拎几个统计案例出来供参考! order订单表,样例如下: CREATE TABLE `t_order` ( ...
- JSP内置对象的使用(一)
JSP九大内置对象是:request.response.session.application.out.pagecontext.config.page.exception. JSP常用的内置对象是:o ...
- Python shuffle() 函数
描述 shuffle() 方法将序列的所有元素随机排序. 语法 以下是 shuffle() 方法的语法: import random random.shuffle (lst ) 注意:shuffle( ...
- 参考信息 - 云计算与Kubernetes
基本概念 基础设施即服务(Infrastructure as a service) 通常指的是在云端为用户提供基础设施,如:虚拟机.服务器.存储.负载均衡.网络等等.亚马逊的AWS就是这个领域的佼佼者 ...
- new 操作符 做了什么
new 操作符 做了什么 new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例. 假设Test是一个构造函数,通常在创建对象的实例时,要使用new,eg:test = new ...
- io模块及其API
模块: io io.StringIO io.BytesIO 所包含API列表: io.StringIO.write: 写入字符 io.StringIO.getvalue: 获取写入的字符 io.Str ...
- 多线程 start 和 run 方法到底有什么区别？
昨天栈长介绍了<Java多线程可以分组,还能这样玩!>线程分组的妙用.今天,栈长会详细介绍 Java 中的多线程 start() 和 run() 两个方法,Java 老司机请跳过,新手或者 ...
- 知识扩展——Git和GitHub的区别
一直以为Git和GitHub是一个东西,直到我看到这个解释.... 转载自:git与github区别与简介 一开始接触git或是github的程序员可能搞不太清楚这些名词到底指代的是什么,所以在这里稍 ...
- 面试题：两种方法计算n！
直接上代码package com.face.test; public class Test { /** * 面试题:递归方法计算n! */ @org.junit.Test public void di ...
- Elastic Job学习
从执行的结果来看,随着服务器的增加,分片的结果也不一样 当只有一台服务器的时候,所有分片都到这一台服务器上 当服务器增加到两台的时候,分片的结果是0 1 2 3 4和5 6 7 8 9 当服务器增加到 ...