css模拟时钟
思路:
画时钟数字(x,y)坐标
x = x0 + r*cos(deg)
y = y0 + r*sin(deg)
知识点:
- 创建元素: createElement
- 添加元素: appendChild
- css3旋转: transform:rotate(30deg);
- css3改变旋转中心点: transform-origin:0 0;
- 获取当前时间, 把时间数字转换为度数
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- * { margin: 0; padding: 0; }
- #bg {
- width: 400px;
- height: 400px;
- background: #ddd;
- border-radius: 10px;
- /* div上下左右垂直居中 */
- position: absolute;
- left: 50%;
- top: 50%;
- margin-top: -200px;
- margin-left: -200px;
- }
- #bg #clock {
- width: 360px;
- height: 360px;
- background: #fff;
- border-radius: 50%;
- display: inline-block;
- margin: 20px;
- position: relative;
- }
- #hour {
- width: 70px;
- height: 16px;
- background: #000;
- position: absolute;
- left: 180px;
- top: 172px;
- border-radius: 16px;
- transform-origin:0 8px;
- }
- #minute {
- width: 120px;
- height: 12px;
- background: #000;
- position: absolute;
- left: 180px;
- top: 174px;
- border-radius: 12px;
- transform-origin:0 6px;
- }
- #second {
- width: 140px;
- height: 6px;
- background: #f00;
- position: absolute;
- left: 180px;
- top: 177px;
- border-radius: 6px;
- transform-origin:0 1px;
- /*transform:rotate(30deg);*/
- /*animation: clockRotate 3s linear infinite;*/
- }
- @keyframes clockRotate {
- from {transform:rotate(0deg);}
- to {transform:rotate(360deg);}
- }
- #point{
- width: 30px;
- height: 30px;
- border-radius: 50%;
- background: #000;
- position: absolute;
- left: 50%;
- top: 50%;
- margin: -15px 0 0 -15px;
- }
- #clock .number{
- position: absolute;
- font-size: 28px;
- width: 50px;
- height: 50px;
- line-height: 50px;
- text-align: center;
- }
- </style>
- </head>
- <body>
- <div id="bg">
- <div id="clock">
- <div id="hour"></div>
- <div id="minute"></div>
- <div id="second"></div>
- <div id="point"></div>
- </div>
- </div>
- <script>
- var clock = document.getElementById('clock');
- var r = 150;
- var angle = Math.PI * 2; // 2PI = 360°
- for (var i = 1; i <=12; i++) {
- var deg = angle/12 * i - Math.PI/2;
- var x = r + r*Math.cos(deg);
- var y = r + r*Math.sin(deg);
- //console.log(x,y);
- var num = document.createElement('div');//创建div
- num.className = 'number';//设置class样式
- num.innerText = i;
- //设置坐标
- num.style.top = y + 'px';
- num.style.left = x + 'px';
- //添加
- clock.appendChild(num);
- }
- //TODO 1. 数字转换度数
- function run() {
- var date = new Date();
- //时(0-23) 分(0-59)秒(0-59)
- var hour = date.getHours();
- var minute = date.getMinutes();
- var second = date.getSeconds();
- var hourDeg = 360/12 * hour - 90;
- var minuteDeg = 360/60 * minute - 90;
- var secondDeg = 360/60 * second - 90;
- var hourDiv = document.getElementById('hour');
- var minuteDiv = document.getElementById('minute');
- var secondDiv = document.getElementById('second');
- hourDiv.style.transform = 'rotate('+hourDeg+'deg)';
- minuteDiv.style.transform = 'rotate('+minuteDeg+'deg)';
- secondDiv.style.transform = 'rotate('+secondDeg+'deg)';
- }
- //TODO 2. 设置定时器
- run();
- setInterval(function () {
- run();
- },1000);
- </script>
- </body>
- </html>
css模拟时钟的更多相关文章
- 【CSS3】纯CSS代码实现模拟时钟,+js对时功能。
使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 ...
- 纯js+html+css实现模拟时钟
前几天没事写的个模拟时钟,代码仅供小白参考,大神请自动绕过. <!DOCTYPE html> <html lang="en"> <head> & ...
- 一个模拟时钟的时间选择器 ClockPicker
最近开发的一个模拟时钟的时间选择器 ClockPicker,用于 Bootstrap,或者单独作为一个 jQuery 插件. 源代码托管在 GitHub 上: ClockPicker 最近项目中需要用 ...
- 模拟时钟(AnalogClock)和数字时钟(DigitalClock)
Demo2\clock_demo\src\main\res\layout\activity_main.xml <LinearLayout xmlns:android="http://s ...
- android脚步---数字时钟和模拟时钟
时钟UI组件是两个非常简单的组件,分为Digitalclock 和Analogclock, main.xml文件,书中程序有问题,加了两个组件,一个Button和一个<Chronometer ...
- css模拟Bootstrap响应式布局——栅格
做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...
- Java多线程之sleep方法阻塞线程-模拟时钟
package org.study2.javabase.ThreadsDemo.status; import java.text.SimpleDateFormat; import java.util. ...
- 模拟时钟(AnalogClock)
模拟时钟(AnalogClock) 显示一个带时钟和分针的表面 会随着时间的推移变化 常用属性: android:dial 可以为表面提供一个自定义的图片 下面我们直接看代码: 1.Activity ...
- 巧妙使用div+css模拟表格对角线
首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...
随机推荐
- matlab : Nelder mead simplex 单纯形直接搜索算法;
function [ param ] = NeldSearch( param ) %NERDSEARCH 此处显示有关此函数的摘要 % nelder mead simplex 单纯形直接搜索算法: % ...
- CodeChef - BLACKCOM 可行性dp转最优化树dp
https://www.codechef.com/problems/BLACKCOM 题意:一颗5000个黑白结点的树,10W个查询寻找是否存在大小s并且有t和黑节点的子图 一开始就觉得应当是一个树d ...
- 流畅的python--2 序列构成的数组
我们把文本.列表和表格叫做数据火车...FOR命令通常能作用于数据火车上. ---ABC Programmer's Handbook 不管是哪种数据结构,字符串.列表.字节序列.数组.XML ...
- JDBC-Transaction
/** * 数据库中事务,指一组逻辑操作单元,使数据从一种状态变换到另一种状态 * 操作全部完成时,数据被保留,一致性可以保持,一部分操作失败时,整个操作全部视为错误,所有被操作数据回退到开始状态,放 ...
- JAVA-8大基本类型与包装类的例子(基础必备)
package com.net.xinfang.reflect; /*** * 8种基本类型(byte,int,short,long,float,double,char,boolean) * 布尔型只 ...
- Dev-Tips
186 Chrome DevTools: How to use Logpoints for quicker JavaScript debugging You can use the new Logpo ...
- LeetCode(193. Valid Phone Numbers)(sed用法)
193. Valid Phone Numbers Given a text file file.txt that contains list of phone numbers (one per lin ...
- Golang入门教程(十七)Linux/Windows下快速搭建和配置NSQ
前言 NSQ是一个基于Go语言的分布式实时消息平台,它基于MIT开源协议发布,代码托管在GitHub,其当前最新版本是0.3.1版.NSQ可用于大规模系统中的实时消息服务,并且每天能够处理数亿级别的消 ...
- java中的日志打印
java中的日志打印: 日志工具类: #获取日志 INFO:表示获取日志的等级 A1:表示日志存器,可以自定义名称 #===DEBUG INFO log4j.rootLogger=DEBUG,A1,A ...
- Spark常见问题汇总
原文地址:https://my.oschina.net/tearsky/blog/629201 摘要: 1.Operation category READ is not supported in st ...