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动态修改元素的样式

    一文详解如何通过JavaScript动态修改元素的样式

    这篇文章主要介绍了如何通过JavaScript动态修改元素的样式,三种方式分别是直接操作元素的style属性、通过classList属性添加或移除类名、以及使用CSSStyleDeclaration对象的setProperty方法,每种方法都有其适用场景,需要的朋友可以参考下
    2024-12-12
  • JavaScript Ajax实现异步通信

    JavaScript Ajax实现异步通信

    这篇文章主要为大家详细介绍了JavaScript Ajax实现异步通信的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • js实现获取焦点后光标在字符串后

    js实现获取焦点后光标在字符串后

    这篇文章主要介绍了js实现获取焦点后光标在字符串后,原理就是获得焦点后重新把自己复制粘帖一下,喜欢的朋友可以看看
    2014-09-09
  • 使用微信小程序开发弹出框应用实例详解

    使用微信小程序开发弹出框应用实例详解

    本文通过实例代码给大家介绍了使用微信小程序开发弹出框功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10
  • js制作简易计算器

    js制作简易计算器

    这篇文章主要为大家详细介绍了js制作简易计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • glsl_buffer实现渐变三角形方法详解

    glsl_buffer实现渐变三角形方法详解

    这篇文章主要为大家介绍了glsl_buffer实现渐变三角形方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 防止文件缓存的js代码

    防止文件缓存的js代码

    原理其实就是通过在固定地址后面,加上一个不同值的日期数值,以达到地址不重复的目的,让浏览器每次都实时加载,不从缓存中读取文件
    2013-01-01
  • 微信小程序实现吸顶特效

    微信小程序实现吸顶特效

    这篇文章主要为大家详细介绍了微信小程序实现吸顶特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JS实现网页烟花动画效果

    JS实现网页烟花动画效果

    这篇文章主要为大家详细介绍了JS实现网页烟花动画效果,点击鼠标烟花向四周扩散,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • JavaScript数据类型转换实例(其他类型转字符串、数值型、布尔类型)

    JavaScript数据类型转换实例(其他类型转字符串、数值型、布尔类型)

    这篇文章主要给大家介绍了关于JavaScript数据类型转换的相关资料,本文分别介绍了其他类型转为字符串、其他类型转为数值型以及其他类型转为布尔类型的方法,需要的朋友可以参考下
    2021-07-07

最新评论