WEB开发---使用HTML CSS开发网页实时显示当前日期和时间

news2024/11/13 9:29:43

自己刚开始学习html css知识,临时做个网页,实时显示当前日期和时间功能。

代码如下:
test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示当前日期和时间</title>

    <style>
        html, body {
            /* 设置高度为100% */
            height: 100%;
            /* 设置外边距为0 */
            margin: 0;
            /* 设置为弹性布局 */
            display: flex;
            /* 水平居中 */
            justify-content: center;
            /* 垂直居中 */
            align-items: center;
        }

        .content {
            text-align: center;/* 文本居中对齐 */
            font-size: 60px;/* 字体大小为60px*/
            color: #0099ff;/* 字体颜色为蓝色 */
        }

        .time-font{
            font-size: 90px; /* 设置字体大小为90px */
            font-weight: bold; /* 设置字体加粗 */
        }
      </style>


    <script>
        /* 更新日期和时间函数 */
        function updateDateTime() {
            // 定义星期数组
            var weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            // 获取当前时间
            var now = new Date();

            // 获取当前年份
            var year = now.getFullYear();
            // 获取当前月份,月份是从0开始的,所以需要加1
            var month = now.getMonth() + 1; 
            // 获取当前日期
            var day = now.getDate();
            // 获取当前星期
            var weekday = weekdays[now.getDay()];

            // 如果月份小于10,则在前面补0
            if (month < 10) month = '0' + month;
            // 如果日期小于10,则在前面补0
            if (day < 10) day = '0' + day;

            // 组合日期字符串
            var date = year + '年' + month + '月' + day + '日 ' + weekday;
            //console.log(date);
            // 将日期字符串显示在页面上
            document.getElementById('date').innerHTML = date;

            // 获取当前小时
            var hours = now.getHours();
            // 获取当前分钟
            var minutes = now.getMinutes()
            // 获取当前秒
            var seconds = now.getSeconds();

            // 如果小时小于10,则在前面补0
            if (hours < 10) hours = '0' + hours;
            // 如果分钟小于10,则在前面补0
            if (minutes < 10) minutes = '0' + minutes;
            // 如果秒小于10,则在前面补0
            if (seconds < 10) seconds = '0' + seconds;

            // 组合时间字符串
            var time = hours + ':' + minutes + ':' + seconds;
            //console.log(time);
            // 将时间字符串显示在页面上
            document.getElementById('time').innerHTML = time;
        }

        // 每秒更新一次日期和时间
        setInterval(updateDateTime, 1000); 
    </script>

</head>
<body onload="updateDateTime()">
    <div class="content">
        <!-- 将日期和时间分别放在两个不同的段落中 -->
        <p id="date"></p>    
        <!-- 将时间放在一个带有特定类名的段落中 -->
        <p id="time" class="time-font"></p> 
    </div>
</body>
</html>

在浏览器中运行,效果如下:
在这里插入图片描述


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2083167.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C#利用ffmpeg借助NVIDIA GPU实现实时RTSP硬解码+硬编码录制MP4

目录 说明 效果 项目 代码 下载 说明 利用周杰的开源项目 Sdcb.FFmpeg 项目地址&#xff1a;https://github.com/sdcb/Sdcb.FFmpeg/ 代码实现参考&#xff1a;https://github.com/sdcb/ffmpeg-muxing-video-demo 效果 C#利用ffmpeg借助NVIDIA GPU实现实时RTSP硬解码硬…

004-OpenFeign服务接口调用

文章目录 1 简介2 OpenFeign 通用步骤2.1 建module2.2 改POM2.3 写YML2.3 主启动类2.4 cloud-api-commons模块修改2.4.1 按照架构说明进行编码准备2.4.2 引入openfeign依赖2.4.3 新建服务接口PayFeignApi 2.5 编写controller2.6 测试2.7 总结 3 OpenFeign高级特性3.1 注意3.2 O…

QGC 修改为双路视频介绍

文章目录 一、效果图二、简要流程关于QGC地面站其它文章请点击这里: QGC地面站 一、效果图 右下角切换视频通道; 左下角切换地图与当前的视频 二、简要流程 ● C++ 后端 C++ 中利用 QGC 原有的红外热成像视频流,修改几处即可 // src\VideoManager\VideoManager.cc Vi…

快排找基准值之挖坑法

思路&#xff1a;把数组里第一个数据拿出来记为标准值&#xff0c;然后两边交替&#xff0c;从右往左找比基准值小的数据放到前面缺数据的坑里。放完后该位置也缺数据成为了新的坑&#xff0c;再把坑的下标移到新的位置。 从左到右找比基准值大的数据&#xff0c;后面同理。 …

装饰器(Decorators)的实现

1、Python 中的函数可以像普通变量一样当做参数传递给另外一个函数&#xff1b; 2、装饰器&#xff1a;不修改函数源码但是要实现给函数添加额外功能。python使用语法糖即来实现装饰器。 3、装饰器的作用&#xff1a; &#xff08;1&#xff09;抽离出大量函数中与函数功能本…

Spring框架 基础介绍

目录 Spring框架 IOC: AOP: 一站式&#xff1a; spring搭建 Maven 导入 spring 核心基础 jar 编写 spring 配置文件 编写一个 User 实体类 测试 spring IOC(控制反转) 依赖注入&#xff1a; 1、通过属性注入 2、通过构造方法注入 spring中bean管理 1、基于xml配置方…

AI模型:追求全能还是专精?

AI模型&#xff1a;追求全能还是专精&#xff1f; 近日&#xff0c;OpenAI预计在秋季推出代号为“草莓”的新AI。从专注于数学问题到处理主观营销策略&#xff0c;"草莓"模型展现出惊人的多样性。而这种全能型 AI 是否代表了未来趋势&#xff1f;相比专攻于某一领域…

I get HttpClient.Timeout Error in C# OpenAI library

题意&#xff1a;“我在 C# OpenAI 库中遇到 HttpClient.Timeout 错误。” 问题背景&#xff1a; I am using the OpenAI library in my c# project, but I get the following error if it does not receive a response for more than 100 seconds. I cannot add a custom htt…

宠物空气净化器应该怎么选择?希喂、IAM、有哈哪款性价比高

在当今社会&#xff0c;养宠已然渐渐成为现在年轻人生活中的一种标配。可爱的宠物们以它们的忠诚、活泼与温暖&#xff0c;给予像我们这类年轻人无尽的陪伴。这种陪伴在时光的消逝中渐渐升华&#xff0c;成为年轻人心灵的慰藉和生活中不可或缺的一部分。然而&#xff0c;在享受…

【软件测试】软件测试生命周期与Bug

目录 &#x1f4d5; 前言 &#x1f334;软件测试的生命周期 ​编辑&#x1f332;BUG &#x1f6a9; 概念 &#x1f6a9;描述bug的要素 &#x1f6a9;bug的级别 &#x1f6a9;bug的生命周期 &#x1f3c0;先检查自身&#xff0c;是否bug描述不清楚 &#x1f3c0;站在用…

JavaScript学习文档(9):事件流、事件委托、其他事件、元素尺寸与位置

目录 一、事件流 1、事件流的两个阶段 2、事件捕获 3、事件冒泡 4、阻止冒泡 5、解绑事件 &#xff08;1&#xff09;解绑事件 &#xff08;2&#xff09;鼠标经过事件区别 二、事件委托 1、优点 2、原理 3、实现 4、tab栏切换案例改造 三、其他事件 1、页面加载…

不可不知的HDMI之前世今生

1、HDMI的产生 2002年4月&#xff0c;来自电子电器行业的7家公司——日立、松下、飞利浦、SiliconImage、索尼、汤姆逊、东芝&#xff0c;共同组建了HDMI接口组织——HDMIFounders&#xff08;HDMI论坛&#xff09;&#xff0c;开始着手制定一种符合高清时代标准的全新数字化视…

nginx转发接口地址【非常实用】

使用场景 由于客户的需求是要访问一个外网接口 比如http://58.20.57.190:6652 实例 http://58.20.57.190:6652//uploadBasePatient?Barcode1000000073&customerCode1 比如外网才能访问&#xff0c;科室电脑是访问不了外网的 我们就需要中间在一个既有外网又有内网的前置…

数据结构(邓俊辉)学习笔记】串 09——BM_BC算法:以终为始

文章目录 1. 不对称性2. 善待教训3.前轻后重4.以终为始 1. 不对称性 上一节所介绍的 KMP 算法计算时间&#xff0c;在最坏情况下也可以保证不超过线性。这的确是一个好消息。然而&#xff0c;倘若我们因此就停下继续优化的脚步&#xff0c;那就大错特错了。 实际上&#xff0c…

如何在Java爬虫中设置代理IP:详解与技巧

在进行网络爬虫时&#xff0c;使用代理IP可以有效地避免被目标网站封禁&#xff0c;提升数据抓取的成功率。本文将详细介绍如何在Java爬虫中设置代理IP&#xff0c;并提供一些实用的技巧和示例代码。 为什么需要代理IP&#xff1f; 在进行爬虫操作时&#xff0c;频繁的请求可能…

深度学习基础—彩色图片的卷积运算

深度学习基础—卷积运算http://t.csdnimg.cn/2mRei 上篇文章卷积运算实际是灰度图像的运算&#xff08;2维空间&#xff09;&#xff0c;但是实际中我们彩色图片使用的更多&#xff0c;和灰度图像不同的是&#xff1a;彩色图片是由三原色&#xff08;红、绿、蓝&#xff09;组成…

C# 对桌面快捷方式的操作设置开机启动项

首先在项目中引入Windows Script Host Object Model&#xff0c;引入方式如下图。 对于桌面快捷方式的修改无非就是将现有的快捷方式修改和添加新的快捷方式。 1、遍历桌面快捷方式&#xff0c;代码如下。 string desktopPath Environment.GetFolderPath(Environment.Special…

机器学习:DBSCAN算法(内有精彩动图)

目录 前言 一、DBSCAN算法 1.动图展示&#xff08;图片转载自网络&#xff09; 2.步骤详解 3.参数配置 二、代码实现 1.完整代码 2.代码详解 1.导入数据 2.通过循环确定参数最佳值 总结 前言 DBSCAN&#xff08;Density-Based Spatial Clustering of Applications w…

World of Warcraft [CLASSIC][80][Grandel] Call to Arms: Strand of the Ancients

Call to Arms: Strand of the Ancients - Quest - 魔兽世界怀旧服CTM4.34《大地的裂变》数据库_大灾变85级魔兽数据库_ctm数据库 Call to Arms: Strand of the Ancients 战斗的召唤&#xff1a;远古海滩 打掉最后一个门【古代圣物之厅】&#xff0c;人跳进去就赢了

算法之二分查找法和双指针

用二分查找法刷leetcode算法题目的时候&#xff0c;经常遇到视频看着理解很透彻&#xff0c;当上手写时一看就会&#xff0c;一写就废。二分查找法涉及边界条件很多&#xff0c;逻辑很简单&#xff0c;就是写不好。何时写 while(left<right)&#xff0c;while(left<right…