html+css+js的小时钟

来源：互联网发布：移动网络切换编辑：程序博客网时间：2024/05/21 10:15

在body中用SVG格式实现时钟的绘制，在script标签中定义更新事件的方法，并通过setInternal函数实现重复绘制。通过将时间的变化转换为在钟面上的旋转角度，把相应的SVG元素进行旋转，实现时分秒中的转动。

<body>    <!-- viewBox是坐标系，width和height是屏幕大小 -->    <div id="time" style="margin-left: 625px">        <script src="change.js"></script>    </div>    <svg id="clock" viewBox="0 0 100 100" width="500" height="500">        <defs>            <!--定义下拉阴影的滤镜-->            <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">                <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur" />                <feOffset in="blur" dx="1" dy="1" result="shadow" />                <feMerge>                    <feMergeNode in="SourceGraphic" />                    <feMergeNode in="shadow" />                </feMerge>            </filter>        </defs>        <circle id="face" cx="50" cy="50" r="45" />        <!-- 钟面 -->        <!-- 初始绘制成竖直的指针，之后通过JavaScript代码来做旋转 -->        <g id="hands" filter="url(#shadow)">            <!-- 给指针添加阴影 -->            <line id="secondhand" x1="50" y1="50" x2="50" y2="10" />            <line id="hourhand" x1="50" y1="50" x2="50" y2="18" />            <line id="minutehand" x1="50" y1="50" x2="50" y2="11" />        </g>        <g id="ticks">            <!-- 12小时的刻度 -->            <line x1='50' y1='5.000' x2='50.00' y2='10.00' />            <line x1='72.50' y1='11.03' x2='70.00' y2='15.36' />            <line x1='88.97' y1='27.50' x2='84.64' y2='30.00' />            <line x1='95.00' y1='50.00' x2='90.00' y2='50.00' />            <line x1='88.97' y1='72.50' x2='84.84' y2='70.00' />            <line x1='72.50' y1='88.97' x2='70.00' y2='84.64' />            <line x1='50.00' y1='95.00' x2='50.00' y2='90.00' />            <line x1='27.50' y1='88.97' x2='30.00' y2='84.64' />            <line x1='11.03' y1='72.50' x2='15.36' y2='70.00' />            <line x1='5.000' y1='50.00' x2='10.00' y2='50.00' />            <line x1='11.03' y1='27.50' x2='15.36' y2='30.00' />            <line x1='27.50' y1='11.03' x2='30.00' y2='15.36' />        </g>        <g id="numbers">            <!-- 标记重要的几个刻度 -->            <text x="50" y="18">12</text>            <text x="85" y="53">3</text>            <text x="50" y="88">6</text>            <text x="15" y="53">9</text>        </g>    </svg>    <script>        setInterval(function updateTime() { //更新SVG时钟来显示当前时间            var now = new Date(); //当前时间            var sec = now.getSeconds(); //秒            var min = now.getMinutes(); //分钟            var hour = (now.getHours() % 12) + min / 60 + sec / 3600;            //转换成可以在时钟上表示的时间            var secangle = sec * 6; //每6°表示一秒钟            var minangle = min * 6; //每6°表示一分钟            var hourangle = hour * 30; //每30°表示一个小时            //获取表示时钟时针和分针的SVG元素            var sechand = document.getElementById("secondhand");            var minhand = document.getElementById("minutehand");            var hourhand = document.getElementById("hourhand");            //设置这些元素的SVG属性，将他们移动到钟面上            sechand.setAttribute("transform", "rotate(" + secangle + ",50,50)");            minhand.setAttribute("transform", "rotate(" + minangle + ",50,50)");            hourhand.setAttribute("transform", "rotate(" + hourangle + ",50,50)");        }, 1000);    </script></body>

没有将css样式渲染写在单独的文件中，而是定义在head标签部分，style里定义的样式都会根据id作用于相应的元素上。

<head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>时钟</title>    <style>        /*以下定义的所有CSS样式都会作用在SVG元素上*/        #face {            stroke-width: 3px; /*时钟的外边框*/            stroke: #C4C4C4;        }        #hourhand { /*相对较粗的时针*/            stroke-width: 1.5px;            stroke: #EDEDED;        }        #minutehand {            stroke-width: 1px; /*相对较细的分针*/            stroke: #EDEDED;        }        #secondhand {            stroke-width: 0.5px; /*最细的秒针*/            stroke: #F7F7F7;        }        #numbers { /*如何绘制数字*/            font-family: sans-serif;            font-size: 7px;            font-weight: bold;            text-anchor: middle;            stroke: none;            fill: black;        }        #clock { /*用于时钟的全局样式*/            stroke: #EEE9E9;            stroke-linecap: round; /*圆角*/            stroke: ButtonHighlight;            fill: #EEE9E9; /*以前灰色为背景*/            margin-left: 400px;        }        #ticks {            stroke-width: 2px; /*标记每个小时的线段*/            stroke: #C4C4C4;        }    </style></head>

在新建的.js文件中实现文本事件的显示，addLoadEvent这个函数是参考的《DOM编程艺术》这本书，处理多线程编程。showTime函数用于显示时间。

function addLoadEvent(func) {    //把现有的window.onload事件处理函数的值存入变量onload    var oldonload = window.onload;    //如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它    if (typeof window.onload != 'function') {        window.onload = func;    } else {    //如果在这个处理函数上已经绑定了一些函数，就把心函数追加到现有指令的末尾        window.onload = function () {            oldonload();            func();        }    }}function showTime() {    var now = new Date();    var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];    var date = weekday[now.getDay()] + "<br>" + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();    document.getElementById("time").innerHTML = date;    setTimeout(showTime, 1000);}//将showTime()函数添加到处理事件队列addLoadEvent(showTime());

最终效果图如下：

0 0