JavaScript实现网页电子时钟

 更新时间:2022年06月19日 15:07:54   作者:人生本该如此  
这篇文章主要为大家详细介绍了JavaScript实现网页电子时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

<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中,因为需要每秒显示,所以还需要创建一个定时器,时间为一秒,因为需要每秒显示不一样的内容,所以需要把显示的代码以及获取时间日期的部分也一起放到定时器当中。因为定时器第一次是有时间延迟的,所以需要在定时器之前调用一次这个封装的函数。还有一个点就是星期的这一部分,因为获取到的星期是数字,要把数字转为大写的星期,所以可以创建一个数组,用获得的星期当索引去获取数组中的星期。这就是几个主要的点,其他相对比较容易想到。

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

相关文章

  • JavaScript Event学习第八章 事件的顺序

    JavaScript Event学习第八章 事件的顺序

    在第一章中我提到一个初次看起来可能不是那么好理解的是一个问题:“如果一个元素和他的父元素对于同样的事件都有事件处理程序,那么哪个会首先执行呢?”毫无疑问,看是什么浏览器。
    2010-02-02
  • JS简单实现无缝滚动效果实例

    JS简单实现无缝滚动效果实例

    这篇文章主要介绍了JS简单实现无缝滚动效果,结合完整实例形式分析了javascript实现图片无缝滚动效果的实现技巧,涉及javascript结合时间函数定时触发动态修改页面元素属性的相关操作方法,需要的朋友可以参考下
    2016-08-08
  • 常用的Javascript设计模式小结

    常用的Javascript设计模式小结

    javascript设计模式有很多种,本文给大家介绍常用的javascript设计模式,对javascript设计模式相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • 收藏,对比功能的JS部分实现代码

    收藏,对比功能的JS部分实现代码

    非常不错的,收藏效果代码,增加当前页的现实,实现对比
    2008-08-08
  • JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)

    JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)

    这篇文章主要介绍了JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)的相关资料,需要的朋友可以参考下
    2016-02-02
  • 用RadioButten或CheckBox实现div的显示与隐藏

    用RadioButten或CheckBox实现div的显示与隐藏

    用RadioButten(或CheckBox)实现div的显示与隐藏,当选择“女”时,显示“美女、才女”;当选择“男”时隐藏,具体实现如下,感兴趣的朋友可以参考下
    2013-09-09
  • 前端跨域问题解决及七大跨域原理详解

    前端跨域问题解决及七大跨域原理详解

    这篇文章主要为大家介绍了前端跨域问题的解决及七大跨域原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-02-02
  • TS中type和interface的区别解析

    TS中type和interface的区别解析

    对于type来说,更多的是对类型的一种复用,比如在项目中需要用到一些比较复杂的或者书写起来很长的类型,而对于 interface来说,它是正儿八经的用来定义接口类型(约束数类型和属性)的,且接口类型是支持继承和声明合并的,感兴趣的朋友跟随小编一起看看吧
    2023-07-07
  • Js利用Canvas实现图片压缩功能

    Js利用Canvas实现图片压缩功能

    下面小编就为大家带来一篇Js利用Canvas实现图片压缩功能。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • layui 地区三级联动 form select 渲染的实例

    layui 地区三级联动 form select 渲染的实例

    今天小编就为大家分享一篇layui 地区三级联动 form select 渲染的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论