JavaScript实现动态数字时钟

本文实例为大家分享了JavaScript实现动态数字时钟的具体代码,供大家参考,具体内容如下

实现效果

代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;

        }

        #box {
            width: 1000px;
            height: 300px;
            background-image:url(1.jpg);
            line-height: 300px;
            text-align: center;
            font-size: 50px;
            font-weight: 500;
            margin: 100px auto;

        }
    </style>

</head>

<body>
    <div id="box"></div>
    <script>
        let box = document.getElementById('box')

        //不足十位补零
        let addZero = val => val < 10 ? '0' + val : val

        //把阿拉伯数字的星期转化为中国汉字的星期 // 星期映射表
        let trans = val => {
            let obj = {
                0: '日',
                1: '一',
                2: '二',
                3: '三',
                4: '四',
                5: '五',
                6: '六'
            }
            return obj[val]
        }
        setTime ()
        //获取时间的方法
        function setTime() {
            let time = new Date();
            let year = time.getFullYear(); // 获取年
            let month = time.getMonth() + 1; // 获取月(是从0到11,所以我们要给他加1)
            let date = time.getDate(); // 获取日
            let day = time.getDay(); // 获取星期几(0是星期日)
            let hour = time.getHours(); // 获取小时
            let min = time.getMinutes(); // 获取分钟
            let sec = time.getSeconds(); // 获取秒

            let value = year + '年' + addZero(month) + '月' + addZero(date) + '日 星期' + trans(day) + ' '+addZero(hour) +
                '时' + addZero(min) + '分' + addZero(sec) + '秒'
            // 把所有的时间拼接到一起
            box.innerText = value
            // console.log(value)
            // 把拼接好的时间插入到页面

        }
        // 让定时器每间隔一秒就执行一次setTime这个方法(这是实现时钟的核心)
        setInterval(setTime, 1000)
    </script>
</body>

</html>

素材

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

(0)

相关推荐

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

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

  • JS+CSS实现滚动数字时钟效果

    本篇内容我们用js配合css样式表来实现一个滚动时钟的动画效果,这个效果一般都是用在网页开场动画以及区域的时间显示中,非常好看,动画效果也很个性,我们先来看下运行后的效果: 下面就是这个滚动时钟动画的全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

  • vue.js实现带日期星期的数字时钟功能示例

    本文实例讲述了vue.js实现带日期星期的数字时钟功能.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net vue.js带日期星期数字时钟</title> <style type="text/css"> html, body { height: 100%;

  • JS 实现倒计时数字时钟效果【附实例代码】

    这篇文章主要介绍了JS实现的网页倒计时数字时钟效果,是一款非常实用的javascript倒计时特效,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&

  • javascript数字时钟示例分享

    代码很简单,直接上代码了,大家可以复制下面的代码保存成HTML文件运行看效果 复制代码 代码如下: <!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">

  • 使用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"> &l

  • javascript实现滚动效果的数字时钟实例

    网上关于javascript实现数字时钟效果的实例很多,但是本文给大家介绍的是滚动效果的数字时钟.小编觉得效果很炫,下面分享给大家. 先来看看很炫的效果 下面是代码实例 javascript代码部分: window.onload=function(){ function toDou(n){ return n<10?"0"+n:""+n; } var oImg=document.getElementsByTagName("img"); set

  • 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

  • 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实现数字时钟效果

    本文实例为大家分享了javascript实现数字时钟效果的具体代码,供大家参考,具体内容如下 效果图 需求分析 1.通过date获取时间 2.通过间隔定时器setInterval动态获取时间 3.间隔定时器setInterval间隔设置为1000毫秒(1秒)获取一次时间 4.为了样式好看,我们这是用数字图片来代替数字的 源代码 HTML部分 <div id="div"> <img src="img/0.png" /> <img src=

随机推荐