用JavaScript实现简单网页时钟

2024-04-02 19:04:59 380人浏览薄情痞子

摘要

利用javascript实现网页时钟，效果如下图所示：首先在body中完成表盘、指针的资源载入： <div><img src="../../image/cl

利用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>

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 用JavaScript实现简单网页时钟

本文链接: https://www.lsjlt.com/news/132679.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

用JavaScript实现简单网页时钟

利用JavaScript实现网页时钟，效果如下图所示：首先在body中完成表盘、指针的资源载入： <div><img src="../../image/cl...

99+

2022-11-12
利用JavaScript实现简单的网页时钟

目录一、效果展示二、使用的技术三、日期对象1.指定时间2.获取目前时间三、源代码前言：今天带大家使用JavaScript定制一款网页时钟一、效果展示二、使用的技术主要使用了...

99+

2022-11-13
JavaScript实现简单钟表时钟

本文实例为大家分享了JavaScript实现简单钟表时钟的具体代码，供大家参考，具体内容如下效果图：主要思想： 1.先画一个圆表盘。 2.再用js循环画刻度（每一个刻度都是li...

99+

2022-11-12
JavaScript实现网页电子时钟

本文实例为大家分享了JavaScript实现网页电子时钟的具体代码，供大家参考，具体内容如下如图就是一个简易的网页电子时钟，利用Javascript和 html和 css就可以制...

99+

2022-11-13
JavaScript实现动态网页时钟

本文实例为大家分享了JavaScript实现动态网页时钟的具体代码，供大家参考，具体内容如下设计思路： 1先建立一个数组保存带有0〜9数字的10张图片; 2.通过GETDATE（）...

99+

2022-11-13
JavaScript如何实现动态网页时钟

这篇文章主要讲解了“JavaScript如何实现动态网页时钟”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript如何实现动态网页时钟”吧！设计思路：1先建立一个数组保存带有0〜...

99+

2023-07-02
怎么使用JavaScript实现网页电子时钟

这篇文章主要讲解了“怎么使用JavaScript实现网页电子时钟”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么使用JavaScript实现网页电子时钟”吧！如图就是一个简易的网页电子时钟...

99+

2023-07-02
js实现简单圆盘时钟

本文实例为大家分享了js实现简单圆盘时钟的具体代码，供大家参考，具体内容如下预览图：代码： css： <style> .disc { ...

99+

2022-11-12
javascript如何实现网页在线时钟功能

本篇内容介绍了“javascript如何实现网页在线时钟功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！...

99+

2022-10-19
JavaScript实现页面电子时钟

本文实例为大家分享了JavaScript实现页面电子时钟的具体代码，供大家参考，具体内容如下题目：页面上有一个电子时钟，显示当前的年月日，时分秒，要求自动变化，双位显示，例如：九点...

99+

2022-11-13
JS实现简单网页倒计时器

制作一个简单的网页倒计时器（js原生代码），供大家参考，具体内容如下实现一个简单的网页倒计时（距离xx年x月x日还剩多少时间），效果是这样的首先HTML代码部分，我们需要简单编...

99+

2022-11-13

JS网页倒计时器 JS倒计时器 JS网页倒计时
js+html+css实现简单电子时钟

本文实例为大家分享了js+html+css实现简单电子时钟的具体代码，供大家参考，具体内容如下最终结果： HTML部分 <!DOCTYPE html> <htm...

99+

2022-11-13
JavaScript实现简单网页版计算器

背景由于我又被分进了一个新的项目组，该项目需要用js，因为我没接触过，所以领导准备给我一周时间学习，没错，实现一个简单的支持四则混合运算的计算器就是作业，所以有了这篇文章故，这篇...

99+

2022-11-12
javascript怎么实现简单页面倒计时

小编给大家分享一下javascript怎么实现简单页面倒计时，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！具体如下：<!DOCTYPE html><html><head>&nb...

99+

2023-06-06
JavaScript如何实现页面电子时钟

这篇文章主要介绍了JavaScript如何实现页面电子时钟的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript如何实现页面电子时钟文章都会有所收获，下面我们一起来看看吧。题目：页面上有一个电子时钟...

99+

2023-07-02
CSS3+js如何实现简单的时钟特效

小编给大家分享一下CSS3+js如何实现简单的时钟特效，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一...

99+

2023-06-09
Android怎么实现简单时钟View的方法

这篇文章给大家分享的是有关Android怎么实现简单时钟View的方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。通过Canvas的平移与旋转简化绘图逻辑是一个非常有用的技巧，下面的时钟view就是利用这个方法...

99+

2023-05-30

android view
Asp.Net 5分钟实现网页实时监控

一、为什么会用到网页实时监控 LZ最近在无锡买房了，虽然在上海工作，但是上海房价实在太高无法承受，所以选择还可以接受的无锡作为安身之地。买过房的小伙伴可能知道买房的...

99+

2022-06-07

实时监控 ASP.NET net 监控 ASP
JavaScript实现简单计时器

本文实例为大家分享了JavaScript实现简单计时器的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"&g...

99+

2022-11-12
如何使用CSS3+js实现简单的时钟特效

小编给大家分享一下如何使用CSS3+js实现简单的时钟特效，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！html代码如下：<...

99+

2022-10-19