JS实现时间表

最新推荐文章于 2024-08-16 08:28:46 发布

都ok

最新推荐文章于 2024-08-16 08:28:46 发布

阅读量3.2k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42193674/article/details/85392240

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

用来JS实现时间表方法很简单，直接定义year、month、day、hour、minute和second变量，直接获取系统时间即可。只不过注意，用getmonth()时注意，他获取的时从0到11的数字而不是1到12所以要加一，这里是千万要注意的。其它细节见代码：

<!DOCTYPE html>
<html>
<head>
	<title>动态时间表</title>
	<style type="text/css">
       #box{
            width:200px;
            height:200px;
            background:red;
            margin:200px auto;
            line-height:200px;
            text-align:center;
            border-radius:60%;
            box-shadow:0 0 100px red;
            color:black;
       }
   </style>

</head>
<body>
<div id="box"></div>
</body>
</html>
<script type="text/javascript">
        function showtime(){
        var date=new  Date();//创建一个日期对象的实例,new代表创建，Date是一个时间对象，连起来就是创建对象，并用变量date接收，实例就是一个实实在在的东西
        console.log(date);//在控制台输出date的值
        var  year=date.getFullYear();
        var  month=date.getMonth()+1;//这里系统定义的月份是从0到11定义的，而加一的目的就是让它变成从1到12，这样就可以实现正常的月份了
        var  day=date.getDate();
        var  hour=date.getHours();
        if(hour<10){
            hour='0'+hour;
        }//这里用if语句的原因是当我们的时间走到一位数字时就会出现闪动，会使整个代码混乱，为了解决这一缺点在个位数前面用拼接的方法加一个0，这样就形成了两位数，这样就不会出现闪动。分钟和秒也是一样
        var  minute=date.getMinutes();
         if(minute<10){
            minute='0'+minute;
        }
        var  second=date.getSeconds();
         if(second<10){
            second='0'+second;
        }
        var time=year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second;
        var time1=document.getElementById('box');
        time1.innerHTML=time;//innerHTML是整个标签的前后里面的内容，把time里面的内容赋值到了time1中
        setTimeout(showtime,1000);
        }
        showtime();
</script>

运行代码截图：