前端练手项目4-数字时钟

最新推荐文章于 2024-06-26 19:39:06 发布

晴天.js

最新推荐文章于 2024-06-26 19:39:06 发布

阅读量508

点赞数

分类专栏： web-项目训练文章标签：前端 css html javascript

本文链接：https://blog.csdn.net/qq_43352505/article/details/129451344

版权

web-项目训练专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文展示了如何利用JavaScript获取本地时间并构建一个数字时钟，通过DOM操作将时间显示在页面上。项目使用了计时器setInterval每秒更新时间，并讨论了弹性布局的居中技巧。同时，还提到了font-family属性来设置字体。

摘要由CSDN通过智能技术生成

利用在页面生成数字时钟

效果展示

在这里插入图片描述

项目难点

本项目几乎没有难点，用了一些简单的操作可以写一下

1，获取本地时间

用js自带的Date函数直接就可以获取到本地时间，
在这里插入图片描述
获取到本地时间以后，再按照我们的需要，把年月日时分秒这些数据单独截出来，通过js的dom操作写入页面，便可以实现数字的更新。

获取时间的代码片段

    // 获取时间
        // 获取完整时间
        var date = new Date()
        // 获取年份
        var year = date.getFullYear()
        //获取月份
        var month = date.getMonth()+1
        //获取日期
        var day = date.getDate()
        //获取星期
        var week = date.getDay()
        //获取小时
        var hours = date.getHours()
        //获取时分
        var minutes = date.getMinutes()
        // 获取秒
        var seconds = date.getSeconds()

一些小技巧

1计时器

// 计时器
setInterval(() => {
clock()
}, 1000);
计时器在需要重复操作的页面中使用还是比较多的，比如我之前写的轮播图等都是去进行重复操作。本属性一共两个参数执行函数以及时间，总结就是在时间到来时需要执行什么操作。

2弹性布局的居中

display: flex;
justify-content: center;
align-items: center;

justify-content: 主轴方向上的的对齐方式
align-items 交叉轴（交叉轴：与主轴垂直）上的对齐方式

font-family

font-family: “楷书”;

font-family: “字体”，“字体”，“字体”，“字体”，····
使用本属性，浏览器会依次查探本地是否有相应的字体，如果左右的字体都不支持，才使用默认的字体。

项目源码

源码瑕疵较多，仅供参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #bg{
            width: 100vw;
            height: 100vh;
            background: linear-gradient(270deg, aqua, lightgreen);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #bg .content{
            width: 400px;
            height: 200px;
            background-color: rgba(0, 0, 0, .3);
        }
        #bg .content #time{
            /* background-color: red; */
            font-size: 60px;
            color: #fff;
            text-align: center;
            margin-top: 30px;
        }
        #bg .content #data{
            /* background-color: yellow; */
            text-align: center;
            font-size: 30px;
            font-family: "楷书";
        }
    </style>
</head>
<body>
    <div class="box">
        <div id="bg">
            <div class="content">
                <p id="time">00:00:00</p>
                <p id="data">mary</p>
            </div>
        </div>
    </div>
    <script>
        
        // 获取元素
        var obj = document.getElementById('bg')
        var time = document.getElementById('time')
        var data = document.getElementById('data')

        // 获取写入时间函数
        function clock() {
           // 获取时间
        // 获取完整时间
        var date = new Date()
        console.log(date)
        // 获取年份
        var year = date.getFullYear()
        //获取月份
        var month = date.getMonth()+1
        //获取日期
        var day = date.getDate()
        //获取星期
        var week = date.getDay()
        //获取小时
        var hours = date.getHours()
        //获取时分
        var minutes = date.getMinutes()
        // 获取秒
        var seconds = date.getSeconds() 
        
        // 定义数组
        time.innerHTML = hours+":"+minutes+":"+seconds 
        data.innerHTML = year+"年"+month+"月"+day+"日"+"<br>"+"week："+week
        }

        // 计时器
        setInterval(() => {
            clock()
        }, 1000);
        
    </script>
</body>
</html>