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>

原文地址:https://www.cnblogs.com/Byme/p/8331323.html

时间: 2024-11-02 22:42:51

css3 简易时钟的相关文章

15个超强悍的CSS3圆盘时钟动画赏析

在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个超强悍的圆盘时钟动画,很多都是基于CSS3,也有一部分利用jQuery和SVG,让我们一起来看看吧. 1.纯CSS3/SVG实现的带秒针表盘圆盘复古时钟 现在的网页上圆盘时钟越来越少见了,更多的是数字时钟和数字日历.之前我们分享过一些基于jQuery和CSS3的圆盘时钟动画,比如纯CSS3 3D立体圆盘时钟动画和jQuery实现一个挂在墙上的圆盘

Android 开发第七弹:简易时钟(秒表)

本文承接,Android 开发第五弹:简易时钟(闹钟) 和 Android 开发第六弹:简易时钟(计时器),这一部分是关于秒表的. 布局 同样是新建一个类(StopWatchView)并扩展自LinearLayout,并将其用作布局. <myapplication.nomasp.com.clock.StopWatchView android : id = "@+id/tabStopWatch" android : layout_width = "match_parent

Android 开发第六弹:简易时钟(计时器)

接上篇Android 开发第五弹:简易时钟(闹钟) ,这次是一个时钟类应用,目前依旧是主要的功能,长得还是很挫.当然了,核心功能是有的-- 时钟 先把简单的时钟给列出来吧,这里都写的很简单,即便要用世界各个城市的话,也只是相应的加上或减去几个小时. 新建TimeView类,并扩展自LinearLayout,然后布局文件和上一篇中那么写就好了. <myapplication.nomasp.com.clock.TimeView android : id = "@+id/tabTime"

用Java画简易时钟

最近我一直在写老师布置的时钟日期工具,但是因为部分功能还未实现,所以还不能贴完整代码,不过后面会陆续更新电子表和日历的小程序.虽然这个时钟的效果图不是特别好看,但是基本的功能已经实现.读者可以试着把它做的跟美观漂亮一点. 简易时钟的代码如下: 1 import java.awt.*; 2 import java.awt.geom.AffineTransform; 3 import java.util.Calendar; 4 import javax.swing.JFrame; 5 import

用canvas绘制一个简易时钟

在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数字三部分. 2.表盘是个圆,这个简单. 3.绘制指针时,需要先获取到系统时间,然后找到时间和角度的关系. 4.然后利用画圆函数,把起始和终点设为同一角度,即可画出射线(指针).  二. 接下来,我们再分析一下,绘制时钟需要用到的函数. 1.arc(x, y, r, start, stop) x, y

CSS3简易表盘时钟

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3时钟</title> <style> .box{ width: 300px; height: 300px; border-radius: 50%; border: 5px solid #ccc; margin: 100px auto; p

通过Canvas + JS 实现简易时钟实战

最近通过各种渠道学习了下html5中的canvas元素,为了练练手就随手写了一个简易的时钟.时钟本身不复杂,没有使用图片进行美化,下面就与大家分享一下具体的代码: 这是最终实现的效果: 部分的启发点来自于 http://developer.51cto.com/art/201503/467645.htm html代码: <!DOCTYPE html>     <html>     <head>         <meta http-equiv="Conte

JS+CSS3实现时钟

使用js和css3实现的时钟效果,支持firefox,chrom等标准浏览器.下载 效果如图: javascript: <script type="text/javascript" src="jquery-1.8.2.min.js"></script><script type="text/javascript">$(function () {    function rotateHand() {       

简易时钟

<html> <head> <title>综合实例之制作简易钟表</title> <style type="text/css"> * {   margin:0px;   padding:0px;   outline:none; } body {     background-color:#0E0E0E;   overflow:hidden; } .date {   width:860px;   height:250px;