JavaScript——运用JS做出当前12小时制的日期，其中包含（年、月、日、星期、小时、分钟、秒）计时的效果.

一个程序猿.

已于 2023-03-23 08:58:41 修改

阅读量628

点赞数 2

文章标签： javascript html 前端

于 2023-03-22 20:50:21 首次发布

本文链接：https://blog.csdn.net/weixin_70747888/article/details/129719085

版权

如何运用JS做出当前日期还带有计时的效果呢？

<style>
        #box{
            width: 500px;
            height: 70px;
            background-color: red;
            margin: 300px auto;
            line-height: 70px;
            text-align: center;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        setInterval(function(){
            var _box=document.getElementById('box');//获取box
            var nowdate=new Date();//设置的值是现在的时间
            var year=nowdate.getFullYear();//年
            var month=nowdate.getMonth();//月
            var date=nowdate.getDate();//日
            var day=nowdate.getDay();//星期
            var hours=nowdate.getHours();//小时
            var minutes=nowdate.getMinutes();//分钟
            var seconds=nowdate.getSeconds();//秒
            //假如hours>12,就减去12赋字符串pm，小于12赋am
            if(hours>12){
                hours-=12;
                var time="pm";
            }else{
                var time="am";
            }
            //day是多少数值就转变成相应的字符串值
            if(day==0){
                 day='日'
            }
            if(day==1){
                day='一'
            }
            if(day==2){
                day='二'
            }
            if(day==3){
                day='三'
            }
            if(day==4){
                day='四'
            }
            if(day==5){
                day='五'
            }
            if(day==6){
                day='六'
            }
            //假如三个值小于十就拼0
            if(hours<10){
                hours=`0${hours}`;
            }
            if(minutes<10){
                minutes=`0${minutes}`;
            }
            if(seconds<10){
                seconds=`0${seconds}`;
            }
            //计算出日期的结果
            _box.innerHTML=`今天是 ${year}年 ${month}月 ${date}日 星期${day} ${hours}:${minutes}:${seconds} ${time}`
        },1000//一秒
        )
    </script>
</body>

效果图如下：