广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript实现网页电子时钟
  • 378
分享到

JavaScript实现网页电子时钟

2024-04-02 19:04:59 378人浏览 薄情痞子
摘要

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

本文实例为大家分享了javascript实现网页电子时钟的具体代码,供大家参考,具体内容如下

如图就是一个简易的网页电子时钟,利用Javascript和 htmlCSS就可以制作

<div class="wrapper">
        <div class="time-box">
            <div class="hour"></div>
            <div class="sec"></div>
        </div>
 
        <div class="date">
            <div class="week"></div>
            <div class="date-box"></div>
        </div>
</div>

这是html的简单结构,结构相对简单,css样式的话可以根据自己的喜好去设置,我这里就不把代码发出来了

var hour = document.querySelector('.hour');
        var sec = document.querySelector('.sec');
        var week = document.querySelector('.week');
        var dateBox = document.querySelector('.date-box');
 
        //因为定时器第一次会延时一秒,所以第一次会有一秒延迟,提前调用一次
        time();
 
        //设置定时器,每秒一次
        setInterval(time, 1000)
 
        //获取当地时间,封装成函数
        function time() {
            var date = new Date();
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();
            var h = date.getHours();
            var min = date.getMinutes();
            var s = date.getSeconds();
            var w = date.getDay();
 
            //补0
            m = m < 10 ? '0' + m : m;
            d = d < 10 ? '0' + d : d;
            h = h < 10 ? '0' + h : h;
            min = min < 10 ? '0' + min : min;
            s = s < 10 ? '0' + s : s;
 
            hour.innerHTML = h + ':' + m;
            sec.innerHTML = s;
            week.innerHTML = '星期' + ['一', '二', '三', '四', '五', '六', '日'][w - 1];
            dateBox.innerHTML = y + '年' + m + '月' + d + '日';
 
        }

这是主要的Javascript代码块,主要是获取当前日期,年月日和时间,然后再把获取的时间日期通过innerHTML这个方法修改到html中,因为需要每秒显示,所以还需要创建一个定时器,时间为一秒,因为需要每秒显示不一样的内容,所以需要把显示的代码以及获取时间日期的部分也一起放到定时器当中。因为定时器第一次是有时间延迟的,所以需要在定时器之前调用一次这个封装的函数。还有一个点就是星期的这一部分,因为获取到的星期是数字,要把数字转为大写的星期,所以可以创建一个数组,用获得的星期当索引去获取数组中的星期。这就是几个主要的点,其他相对比较容易想到。

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

--结束END--

本文标题: JavaScript实现网页电子时钟

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

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

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript实现网页电子时钟
    本文实例为大家分享了JavaScript实现网页电子时钟的具体代码,供大家参考,具体内容如下 如图就是一个简易的网页电子时钟,利用Javascript和 html和 css就可以制...
    99+
    2022-11-13
  • JavaScript实现页面电子时钟
    本文实例为大家分享了JavaScript实现页面电子时钟的具体代码,供大家参考,具体内容如下 题目:页面上有一个电子时钟,显示当前的年月日,时分秒,要求自动变化,双位显示,例如:九点...
    99+
    2022-11-13
  • 怎么使用JavaScript实现网页电子时钟
    这篇文章主要讲解了“怎么使用JavaScript实现网页电子时钟”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么使用JavaScript实现网页电子时钟”吧!如图就是一个简易的网页电子时钟...
    99+
    2023-07-02
  • JavaScript如何实现页面电子时钟
    这篇文章主要介绍了JavaScript如何实现页面电子时钟的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript如何实现页面电子时钟文章都会有所收获,下面我们一起来看看吧。题目:页面上有一个电子时钟...
    99+
    2023-07-02
  • QT5实现电子时钟
    本文实例为大家分享了QT5实现电子时钟的具体代码,供大家参考,具体内容如下 一、电子时钟的显示 效果如下: 电子时钟显示 二、新建工程 Widgets Application项目名...
    99+
    2022-11-13
  • Qt实现电子时钟
    本文实例为大家分享了Qt实现电子时钟的具体代码,供大家参考,具体内容如下 进一步认识Qt中的属性,我们现在再做一个小练习,去实现一个简易版电子时钟的效果。 效果展示: 新建项目: ...
    99+
    2022-11-13
  • JavaScript实现动态网页时钟
    本文实例为大家分享了JavaScript实现动态网页时钟的具体代码,供大家参考,具体内容如下 设计思路: 1先建立一个数组保存带有0〜9数字的10张图片; 2.通过GETDATE()...
    99+
    2022-11-13
  • 用JavaScript实现简单网页时钟
    利用JavaScript实现网页时钟,效果如下图所示: 首先在body中完成表盘、指针的资源载入: <div><img src="../../image/cl...
    99+
    2022-11-12
  • js实现电子时钟效果
    本文实例为大家分享了js实现电子时钟效果的具体代码,供大家参考,具体内容如下 代码区域 代码如下(示例): <!DOCTYPE html> <html lang="...
    99+
    2022-11-13
  • 原生js实现电子时钟
    本文实例为大家分享了js实现电子时钟的具体代码,供大家参考,具体内容如下 index.html <!DOCTYPE html> <html lang="en"&g...
    99+
    2022-11-13
  • js实现电子时钟功能
    电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择。学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascrip...
    99+
    2022-11-13
  • C++实现电子时钟效果
    本文实例为大家分享了C++实现电子时钟的具体代码,供大家参考,具体内容如下 此精确到秒,因为有精度误差加上从计算机获取初始时间时处理比较简单,因此运行一段时间会出现较大的误差。 代码...
    99+
    2022-11-13
  • vue实现电子时钟效果
    本文实例为大家分享了vue实现电子时钟的具体代码,供大家参考,具体内容如下 html <div class="dateBox">       <div class...
    99+
    2022-11-13
  • Qt怎么实现电子时钟
    今天小编给大家分享一下Qt怎么实现电子时钟的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、项目介绍利用Qt实现显示与桌面上...
    99+
    2023-07-02
  • JavaScript如何实现动态网页时钟
    这篇文章主要讲解了“JavaScript如何实现动态网页时钟”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript如何实现动态网页时钟”吧!设计思路:1先建立一个数组保存带有0〜...
    99+
    2023-07-02
  • 利用JavaScript实现简单的网页时钟
    目录一、效果展示二、使用的技术三、日期对象1.指定时间2.获取目前时间三、源代码前言: 今天带大家使用JavaScript定制一款网页时钟 一、效果展示 二、使用的技术 主要使用了...
    99+
    2022-11-13
  • C++怎么实现电子时钟效果
    今天小编给大家分享一下C++怎么实现电子时钟效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。此精确到秒,因为有精度误差加上...
    99+
    2023-06-30
  • JS实现电子时钟入门操作
    本文实例为大家分享了JS实现电子时钟入门操作的具体代码,供大家参考,具体内容如下 代码呈上: <!DOCTYPE html> <html lang="en">...
    99+
    2022-11-13
  • js+html+css实现简单电子时钟
    本文实例为大家分享了js+html+css实现简单电子时钟的具体代码,供大家参考,具体内容如下 最终结果: HTML部分 <!DOCTYPE html> <htm...
    99+
    2022-11-13
  • js如何实现电子时钟效果
    本篇内容主要讲解“js如何实现电子时钟效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“js如何实现电子时钟效果”吧!代码如下(示例):<!DOCTYPE html><...
    99+
    2023-07-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作