Javascript怎么实现动态时钟效果

小编给大家分享一下Javascript怎么实现动态时钟效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

具体内容如下

1.css代码

<style type="text/css">  #box{   width:200px;   height:200px;   background:pink;   margin:100px auto;   line-height:200px;   text-align:center;   border-radius:50%;   box-shadow:0 0 100px pink;   color:black;  }  </style>

2.JS代码

<script type="text/javascript">  function showtime(){  var date=new Date();//创建一个日期对象的实例。这句代码这样理解,new代表创建，Date是一个时间对象，连起来就是创建对象，并用变量date接收，实例就是一个实实在在的东西，比如：老师让你去帮他拿一个文件，结果你的同桌去了，你们两呢都属于人这个对象，所以你拿和他拿都一样。  console.log(date);//在控制台输出date的值  var year=date.getFullYear();//引用了年这个方法(功能，意思是能实现什么，能干什么)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');//在页面中根据ID查找标签对象,在文档中通过ID获得box的内容，并赋值给time 。(doucument意思是整个文档)  time1.innerHTML=time;//innerHTML是整个标签的前后里面的内容，把time里面的内容赋值到了time1中(innerHTML 指HTML开始标记和结束标记之间的内容)  setTimeout(showtime,1000);//一秒钟之后执行showTime.大家都知道，我们的HTML代码是从上往下执行的，当执行到shoutime时，会往下执行调用的函数，然后执行函数，又执行setTimeout方法，一直这样循环下去，就能实现时钟的不停跳动。  }  showtime();//函数需要调用才会执行  </script>

效果图：

以上是“Javascript怎么实现动态时钟效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！