动态时间练习

最新推荐文章于 2024-06-10 21:20:33 发布

小高三岁半

最新推荐文章于 2024-06-10 21:20:33 发布

阅读量46

点赞数 3

文章标签： css html css3

本文链接：https://blog.csdn.net/G_0402/article/details/129938209

版权

<!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>
        #showtime{
            width: 400px;
            height: 50px;
            background-color: pink;
            margin: 0 auto;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div id="showtime">
        今天是2023年 3月22日 星期三 17：53：20
    </div>
</body>
<script>
    function showdate(){
        var mydate = new Date();
        var year = mydate.getFullYear();    // 年
        var month = mydate.getMonth() + 1;      // 月
        var date = mydate.getDate();        // 日
        var day = mydate.getDay();          // 星期
        var hours = mydate.getHours();      // 小时
        var minutes = mydate.getMinutes();  // 分钟 
        var seconds = mydate.getSeconds();  // 秒
        switch (day) {
            case 0:
                day = '星期日'
                break;
            case 1:
                day = '星期一'
                break;
            case 2:
                day = '星期二'
                break;
            case 3:
                day = '星期三'
                break;
            case 4:
                day = '星期四'
                break;
            case 5:
                day = '星期五'
                break;
            case 6:
                day = '星期六'
                break;
        }     
        var s;
        if(hours < 11.59){
            s = 'am'
        }else{
            s = 'pm'
        }
        var _showtime = document.getElementById('showtime');
        _showtime.innerHTML = `今天是${year}年${month}月${date}&ensp;${day}&ensp;${hours}:${minutes}:${seconds}&emsp;${s}`
    };
    setInterval('showdate()',1000)
</script>
</html>