Html5第十三天练习

zhezhongyun 2025-01-07 17:19 53 浏览

Html:

<!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:

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);

HTML5 新元素

上一篇：前端高效开发必备的 JS 库梳理
下一篇：如何用HTML5制作网页?HTML5和html有什么区别?

Html5第十三天练习

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）