用JavaScript实现简单网页时钟

利用JavaScript实现网页时钟，效果如下图所示：

首先在body中完成表盘、指针的资源载入：

<div><img src="../../image/clockface.jpg" alt=""></div>
<hr id="hour" >
<hr id="min">
<hr id="second">

设置CSS样式：

<style>
        body{
            margin: 0;
        }
        div{
            margin: 0 auto;
            width: 600px;
            height: 600px;
        }
        #hour{
            background-color: black;
            width: 130px;
            height: 10px;
            position: fixed;
            top: 295px;
            left: 50%;
            margin-left: -65px;
        }
        #min{
            background-color: red;
            width: 200px;
            height: 8px;
            position: fixed;
            top: 296px;
            left: 50%;
            margin-left: -100px;
        }
        #second{
            background-color: yellow;
            width: 270px;
            height: 5px;
            position: fixed;
            top: 297.5px;
            left: 50%;
            margin-left: -135px;
        }
</style>

最后是JS代码部分，使用循环定时器setInterval()每秒调用一次主函数，主函数内使用new Date()创建时间对象，分别使用 .getHours()；.getMinutes()；.getSeconds()获得当前的时分秒，然后利用CSS自带动画-旋转改变指针的角度：

setInterval(watch,1000);
var anjleSeconds=0,anjleMin=0,anjleHours=0;
function watch() {
        var Time= new Date();
        anjleSeconds=Time.getSeconds()/60*360+90;
        anjleMin=Time.getMinutes()/60*360+90;
        anjleHours=nowHours/12*360+90;
        document.getElementById("second").style.transform="rotate("+anjleSeconds+"deg)";
        document.getElementById("min").style.transform="rotate("+anjleMin+"deg)";
        document.getElementById("hour").style.transform="rotate("+anjleHours+"deg)";
    }

目前存在的问题是，时分秒指针由于使用的是hr标签表示，所以存在两端一样长的问题。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        div{
            margin: 0 auto;
            width: 600px;
            height: 600px;
        }
        #hour{
            background-color: black;
            width: 130px;
            height: 10px;
            position: fixed;
            top: 295px;
            left: 50%;
            margin-left: -65px;
        }
        #min{
            background-color: red;
            width: 200px;
            height: 8px;
            position: fixed;
            top: 296px;
            left: 50%;
            margin-left: -100px;
        }
        #second{
            background-color: yellow;
            width: 270px;
            height: 5px;
            position: fixed;
            top: 297.5px;
            left: 50%;
            margin-left: -135px;
        }
    </style>
</head>
<body>
<div><img src="../../image/clockface.jpg" alt=""></div>
<hr id="hour" >
<hr id="min">
<hr id="second">
<script>
    setInterval(watch,1000);
    var anjleSeconds=0,anjleMin=0,anjleHours=0;
    function watch() {
        var Time= new Date();
        anjleSeconds=Time.getSeconds()/60*360+90;
        anjleMin=Time.getMinutes()/60*360+90;
        anjleHours=Time.getHours()/12*360+90;
        document.getElementById("second").style.transform="rotate("+anjleSeconds+"deg)";
        document.getElementById("min").style.transform="rotate("+anjleMin+"deg)";
        document.getElementById("hour").style.transform="rotate("+anjleHours+"deg)";
    }
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现一个简单的数字时钟效果

    js实现一个简单的数字时钟效果

    效果图: 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>一个简单的数字时钟</title> <script type="text/javascript" charset="utf-8

  • javascript入门·动态的时钟,显示完整的一些方法,新年倒计时

    时间对象作为非常重要的一个对象,对我们学.net的人来说,并不是很重要,但这并不意味着我们可以忽略,事实上,用得着的时候还是很多的,如果完全依赖JS处理时间,那是会出问题的,因为JS总是假设本地机器上的时间是正确的.还有个原因,他总按照GTM市区来计量.我们只是返回当前date对象的副本,我们即便是修改,那也不会对对象本身有任何影响. 演示一:动态的时钟(来个复杂的) 11:55:13 演示二:显示完整的一些方法(事实上我很讨厌有些格式了) Mon Oct 1 22:35:25 UTC+0800

  • 基于javascript实现动态时钟效果

    基于javascript实现动态时钟效果

    本文实例讲解了javascript动态时钟效果的实现方法,分享给大家供大家参考,具体内容如下 实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <

  • html5 canvas js(数字时钟)实例代码

    html5 canvas js(数字时钟)实例代码

    复制代码 代码如下: <!doctype html><html>    <head>        <title>canvas dClock</title>    </head>    <body>        <canvas id = "clock" width = "500px" height = "200px">            您的浏览

  • 一个简易时钟效果js实现代码

    一个简易时钟效果js实现代码

    本文实例为大家分享了js时钟特效 的具体代码,供大家参考,具体内容如下 js代码 var canvas = document.getElementById("clock"); var clock = canvas.getContext("2d"); function zhong() { clock.save(); //开始画外层圆 clock.translate(200, 200); clock.strokeStyle = 'black'; clock.lineWi

  • JS实现的网页倒计时数字时钟效果

    本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q

  • JavaScript实现简单的时钟实例代码

    JavaScript实现简单的时钟实例代码

    复制代码 代码如下: <html> <head> <title>JS实现简单的时钟</title><script> function displayTime() {        document.getElementById("time").innerHTML = new Date().toTimeString();    } setInterval(displayTime,1000);      // 每隔1秒钟调用dis

  • Javascript实现动态时钟效果

    Javascript实现动态时钟效果

    本文实例为大家分享了js实现动态时钟效果的具体代码,供大家参考,具体内容如下 1.css代码 <style type="text/css"> #box{ width:200px; height:200px; background:pink; margin:100px auto; line-height:200px; text-align:center; border-radius:50%; box-shadow:0 0 100px pink; color:black; }

  • 五步轻松实现JavaScript HTML时钟效果

    五步轻松实现JavaScript HTML时钟效果

    学了一段时间的HTML.CSS和JS后,给大家做一款漂亮的不像实力派的HTML时钟,先看图: 涉及到的知识点有: CSS3动画.DOM操作.定时器.圆点坐标的计算(好多人是不是已经还给自己的老师了~)  接下来,我们用5步来制作它 step1.准备HTML 首先,我们需要准备HTML结构,背景.表盘.指针(时针.分针.秒针).数字. <div id="clock"> <div class="bg"> <div class="p

  • JavaScript实现抖音罗盘时钟

    本文实例为大家分享了JavaScript实现抖音罗盘时钟的具体代码,供大家参考,具体内容如下 其实很早以前就想发了,很多东西其实并不难,只要多动手动脑就行了,下面直接上代码,其他的自己下去慢慢研究吧! HTML部分代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co

随机推荐