本文实例为大家分享了js实现动态时钟效果的具体代码,供大家参考,具体内容如下
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>
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
2020-07-21 html5如何监听veido的全屏 + css的字体间距 + JS的window.open() + 软技能svn与git
html+css+js适合前端小白的实战全解(超详细)——2048小游戏(二)
在使用@angular/cli创建的angular项目上添加postcss等一系列移动端自适应插件
网友评论