Html5第十三天练习

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

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 元素

上一篇：再不学HTML5就真的跟不上时代啦
下一篇：LEADTOOLS HTML5图像教程

Html5第十三天练习

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」