一个简单的白桃粉色风格的立体字时钟页面-CSDN博客

本文链接：https://blog.csdn.net/cyf66666666/article/details/139293223

1.样式部分

2.JavaScript部分

3.时钟区域：

效果

1.样式部分

使用了外部样式表和@import引入了Kanit字体，设置了一些通用的样式，如margin:0;padding:0

body元素：

1.设置高度为100%窗口高度。

2.使用弹性布局使内容水平垂直居中。

3.设置背景颜色为白桃粉色(#eacccc)。

4.禁止文本被选取。

代码如下：

/* 引用网络字体（Kanit字体） */
@import url("http://fonts.googleapis.com/css?family=Kanit");

*{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 背景色：白桃粉 */
    background-color: #eacccc;
    /* 禁止文本被选取 */
    user-select: none;
}
.clock{
    display: flex;
}
.clock p{
    width: 95px;
    font-size: 150px;
    color: #fff;
    text-align: center;
    /* 设置字体 */
    font-family: "Kanit";
    font-weight: 900;
    /* 文字阴影 实现3D效果 */
    text-shadow: 0 1px 0 #deafaf,
    0 2px 0 #bda8a8,
    0 3px 0 #d8a1a1,
    0 4px 0 #d59999,
    0 5px 0 #d29292,
    0 6px 0 #cf8b8b,
    0 7px 0 #cc8484,
    0 8px 0 #c97d7d,
    0 0 5px rgba(231,156,156,0.05),
    0 -1px 3px rgba(231,156,156,0.2),
    0 9px 9px rgba(231,156,156,0.3),
    0 12px 12px rgba(231,156,156,0.3),
    0 15px 15px rgba(231,156,156,0.3);
}

2.JavaScript部分

1.定义了一个名为myTime()的函数，通过获取当前时间并将其显示在时钟中来更新页面上的数字。

2.通过setInterval()每秒调用一次myTime()函数以实现时钟实时更新。

代码如下：

function myTime(){
            let time=new Date();
            let hh=time.getHours();  //时
            let mm=time.getMinutes();  //分
            let ss=time.getSeconds();  //秒
            // Math.floor() 向下取整
            document.getElementById("1").innerText=Math.floor(hh/10);
            document.getElementById("2").innerText=hh%10;
            document.getElementById("4").innerText=Math.floor(mm/10);
            document.getElementById("5").innerText=mm%10;
            document.getElementById("7").innerText=Math.floor(ss/10);
            document.getElementById("8").innerText=ss%10;
        }
        // 一秒执行一次
        setInterval(myTime,1000);

3.时钟区域：

1.通过一个父元素div.clock和多个子元素p构成数字时钟显示区域。

2.使用ID编号（1-8）来区分每个数字，并在JavaScript中动态修改显示内容。

4.总结：

完整代码如下：

<!DOCTYPE html>
<html>
<style>
/* 引用网络字体（Kanit字体） */
@import url("http://fonts.googleapis.com/css?family=Kanit");

*{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 背景色：白桃粉 */
    background-color: #eacccc;
    /* 禁止文本被选取 */
    user-select: none;
}
.clock{
    display: flex;
}
.clock p{
    width: 95px;
    font-size: 150px;
    color: #fff;
    text-align: center;
    /* 设置字体 */
    font-family: "Kanit";
    font-weight: 900;
    /* 文字阴影 实现3D效果 */
    text-shadow: 0 1px 0 #deafaf,
    0 2px 0 #bda8a8,
    0 3px 0 #d8a1a1,
    0 4px 0 #d59999,
    0 5px 0 #d29292,
    0 6px 0 #cf8b8b,
    0 7px 0 #cc8484,
    0 8px 0 #c97d7d,
    0 0 5px rgba(231,156,156,0.05),
    0 -1px 3px rgba(231,156,156,0.2),
    0 9px 9px rgba(231,156,156,0.3),
    0 12px 12px rgba(231,156,156,0.3),
    0 15px 15px rgba(231,156,156,0.3);
}
</style>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>白桃粉可爱风的立体字时钟</title>
  
    <script type="text/javascript">
        function myTime(){
            let time=new Date();
            let hh=time.getHours();  //时
            let mm=time.getMinutes();  //分
            let ss=time.getSeconds();  //秒
            // Math.floor() 向下取整
            document.getElementById("1").innerText=Math.floor(hh/10);
            document.getElementById("2").innerText=hh%10;
            document.getElementById("4").innerText=Math.floor(mm/10);
            document.getElementById("5").innerText=mm%10;
            document.getElementById("7").innerText=Math.floor(ss/10);
            document.getElementById("8").innerText=ss%10;
        }
        // 一秒执行一次
        setInterval(myTime,1000);
    </script>
</head>

<body>
    <div class="clock">
        <p id="1">0</p>
        <p id="2">0</p>
        <p id="3">:</p>
        <p id="4">0</p>
        <p id="5">0</p>
        <p id="6">:</p>
        <p id="7">0</p>
        <p id="8">0</p>
    </div>
</body>

</html>

总结：该HTML页面展示了一个立体风格的白桃粉色立体字时钟效果，使用CSS样式美化，JavaScript更新时间并实现动态刷新，整体布局采用弹性布局居中显示。