百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML 游戏HTML5 支持CSS 谷歌字体
当前位置：网站首页 > 技术文章 > 正文

Html5第十三天练习

myzbx 2024-12-31 13:11 20 浏览

Html:

Bash
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字时钟</title>
    <link rel="stylesheet" href="../css/20241121.css">
</head>
<body>
    <body>
        <div class="clock-container">
            <div id="clock" class="clock"></div>
        </div>
        <script src="../js/20241121.js"></script>
    </body>
</body>
</html>

Css:

Bash
body{
    /*将元素设置为弹性盒子容器*/
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: linear-gradient(135deg, #25721e, #56982a); 
    font-family: Arial, sans-serif; 
}   

.clock-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 100px;
    border: 5px solid #0f1c2b; 
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    animation: glowBorder 2s infinite alternate;
}

.clock {
    color: #ffffff;
    font-size: 2.5em;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    animation: fadeIn 1s ease-in-out, pulseText 1.5s infinite;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pulseText {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes glowBorder {
    from {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.2), 0 0 30px rgba(255, 255, 255, 0.1);
    }
    to {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.4), 0 0 40px rgba(255, 255, 255, 0.3);
    }
}

Js:

function updateClock() {
    const clock = document.getElementById('clock');
    const now = new Date();
    let hours = now.getHours();
    let minutes = now.getMinutes();
    let seconds = now.getSeconds();
    const ampm = hours >= 12 ? 'PM' : 'AM';

    // 转换24小时制为12小时制
    hours = hours % 12;
    hours = hours ? hours : 12; // the hour '0' should be '12'

    // 如果分钟或秒是一位数（即小于 10），则在其前面添加一个零，以确保时间始终显示为两位数格式。
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;

    // 构建时间字符串
    const timeString = `${hours}:${minutes}:${seconds} ${ampm}`;
    clock.innerHTML = timeString;
}

updateClock();
// 每秒钟更新一次时钟的显示
setInterval(updateClock, 1000);

相关推荐

使用 Siemens Teamcenter Digital Reality Viewer 打造逼真的数字孪生

现代产品通常由数百万个部件组成，需要复杂的设计和协作。工业世界在管理复杂性方面面临重大挑战，传统的可视化工具无法渲染这些大型的多CAD组件，从而无法充分利用数字孪生的优势。为了解决这些难题，西门子...

如何在JavaScript中实现数字输入框的范围限制?

在JavaScript语言中，实现数字输入框的范围限制可以通过多种方式实现，最常见的方式是利用JavaScript的事件监听机制，和通过JavaScript的条件判断语句来实现范围限制。以...

2.3.8.J速算24点终极挑战（速算24点题目及答案）

各位数学高手、脑力达人，今天给大家带来一道超烧脑的**24点挑战**！**数字：2、3、8、J（J=11规则很简单：**用加减乘除和括号，把四个数字组合成24！每个数字只能用一次！****看起...

分布式系统进阶二十一之短链接生成原理

前言短链接（ShortURL）是一种通过缩短网页链接长度来方便分享的技术。相比于传统的长链接，短链接更简洁明了，更易于在社交媒体等平台上分享和传播。在本文中，我们将会详细解释短链接的定义、作用及其构...

一、SpringBoo中Mybatis多数据源动态切换

我们以一个实例来详细说明一下如何在SpringBoot中动态切换MyBatis的数据源。一、需求1、用户可以界面新增数据源相关信息，提交后，保存到数据库2、保存后的数据源需要动态生效，并且可以由用户动...

「JS 逆向百例」层层嵌套!某加速商城 RSA 加密

声明本文章中所有内容仅供学习交流，敏感网址、数据接口均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关，若有侵权，请联系我立即删除！逆向目标目标：某加速商城登录接口主页：a...

Spring Data Jpa 介绍和详细入门案例搭建

1.SpringDataJPA的概念在介绍SpringDataJPA的时候，我们首先认识下Hibernate。Hibernate是数据访问解决技术的绝对霸主，使用O/R映射（Object-Re...

SpringBoot 开发 Web 系统，快速入门指南!

01、背景介绍在之前的文章中，我们简单的介绍了SpringBoot项目的创建过程，了解了SpringBoot开箱即用的特性，本篇文章接着上篇的内容继续介绍SpringBoot用于we...

Nacos3.0重磅来袭!全面拥抱AI，单机及集群模式安装详细教程!

之前和大家分享过JDK17的多版本管理及详细安装过程，然后在项目升级完jdk17后又发现之前的注册和配置中心nacos又用不了，原因是之前的nacos1.3版本的，版本太老了，已经无法适配当前新的JD...

golang语言的魅力精华之玩转通道channel 值得你反复阅读100遍

通道用例大全在阅读本文之前，请先阅读通道一文。那篇文章详细地解释了通道类型和通道值，以及各种通道操作的规则细节。一个Go新手程序员可能需要反复多次阅读那篇文章和当前这篇文章来精通Go通道编程。本文...

2小时快速搭建一个高可用的IM系统

“笔者2019年参加了一次Gopher大会，有幸听探探的架构师分享了他们2019年微服务化的过程。图片来自Pexels本文快速搭建的IM系统也是使用Go语言来快速实现的，这里先和...

分库分表以后，如何管理几万张分片表?

大家好，我是小富～ShardingSphere实现分库分表，如何管理分布在不同数据库实例中的成千上万张分片表？上边的问题是之前有个小伙伴看了我的分库分表的文章，私下咨询我的，看到他的提问我第一感觉就是...

Spring Boot JDBC 与 JdbcTemplate 全面指南(万字保姆级教程)

一、SpringBootJDBC基础1.1JDBC简介与演进JDBC(JavaDatabaseConnectivity)是Java语言中用来规范客户端程序如何访问数据库的应用程序...

Flink SQL 知其所以然(六)| 维表 join 的性能优化之路(上)

废话不多说，咱们先直接上本文的目录和结论，小伙伴可以先看结论快速了解博主期望本文能给小伙伴们带来什么帮助：背景及应用场景介绍：博主期望你能了解到，flinksql提供了轻松访问外部存储的loo...

大数据Hadoop之——Flink Table API 和 SQL(单机Kafka)

一、TableAPI和FlinkSQL是什么TableAPI和SQL集成在同一套API中。这套API的核心概念是Table，用作查询的输入和输出，这套API都是批处理和...

一周热门
最近发表
标签列表