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 ...
随机推荐
- Tomcat 的 server.xml 文件详解
文件内容解读 <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apac ...
- 【vim】模式与模式切换
很多初学者启动vim后,不知道怎么输入字符:按了半天字母,结果屏幕还是空的. vim和记事本或WORD不一样,不是一打开后就可以输入文字,此时它处于正常模式. vim一共有4个模式: 正常模式 (No ...
- iTerm2 使用笔记
iTerm2 使用了1年多了,一些功能其实还没有主动去发现,这次接着项目忙完的空闲时间整理一下tips,提高工作效率,方便以后查阅. 一.几个术语 从小到大:session > pane > ...
- vue 关于数组和对象的更新
在日常开发中,我们用的最多的就是 绑定数据 <div v-for="item in data" :key="item.id"> <!-- 内容 ...
- IntelliJ IDEA中用Git插件操作
- mysql 开发基础系列15 索引的设计和使用
一.概述 所有mysql 列类型都可以被索引,是提高select查询性能的最佳方法. 根据存储引擎可以定义每个表的最大索引数和最大索引长度,每种引擎对每个表至少支持16个索引,总索引长度至少为256字 ...
- 可以落地的DDD到底长什么样？
领域驱动设计的概念 大家都知道软件开发不是一蹴而就的事情,我们不可能在不了解产品(或行业领域)的前提下进行软件开发,在开发前通常需要进行大量的业务知识梳理,然后才能到软件设计的层面,最后才是开发. ...
- Perl的比较操作符
比较操作符 perl的比较操作符和bash完全相反.数值比较采用符号,字符串比较采用字母. 数值 字符串 意义 ----------------------------- == eq 相等 != ne ...
- Perl中的执行上下文
perl中的上下文 在perl中,很多地方会切换上下文.所谓上下文,它的重点在于同一个表达式出现在不同地方,得到的结果不同.换句话说,同一个表达式,它表达的值不是固定的.这就像是同一个单词,在不同语境 ...
- python按引用赋值和深、浅拷贝
按引用赋值而不是拷贝副本 在python中,无论是直接的变量赋值,还是参数传递,都是按照引用进行赋值的. 在计算机语言中,有两种赋值方式:按引用赋值.按值赋值.其中按引用赋值也常称为按指针传值(当然, ...