JS实时时间特效代码
作者:老鱼网 时间:2022-10-19
阅读数:719
这是一段JS代码写的实时时间特效代码,站长可以拿来放在网站侧边栏,美化网站的同时也能提高些用户体验度;
下载压缩包把压缩包里的images素材目录上传到网站里,用代码编辑器打开index.php文件,找到标记代码开始处与代码结束中间的就是JS实时时间特效代码,把这段JS代码中的素材路径修改好,就可以放到需要的地方了。
<!---JS实时时间代码开始--> <div id="time"></div> <script> window.onload=function(){getTime();} function getTime(){ var date = new Date(); var hours =formatTime(date.getHours()); var minutes = formatTime(date.getMinutes()); var seconds = formatTime(date.getSeconds()); var $time = document.getElementById('time'); $time.innerHTML=hours +"<img src='images/hm.png' style='margin:0 10px;' width='12' height='40'/>"+ minutes+"<img style='margin:0 10px;' src='images/ms.png' width='12' height='40'/>"+ seconds; setTimeout("getTime()",500);} function formatTime(i){ if(i<10&&i==1){ i= "<img src='images/0.png' width='40' height='60'/>"+"<img src='images/1.png' width='20' height='60'/>"; }else if(i<10&&i!=1){ i= "<img src='images/0.png' width='40' height='60'/>" + "<img src='images/"+i+".png' width='40' height='60'/>"; }else{ var j= i.toString().charAt(0); var z =i.toString().charAt(1); if(j<10 && z<10&&j!=1&&z!=1){ i = "<img src='images/"+j+".png' width='40' height='60'/>" + "<img src='images/"+z+".png' width='40' height='60'/>"; }else if(j<10 && z<10&&j==1&&z!=1){ i = "<img src='images/1.png' width='20' height='60'/>" + "<img src='images/"+z+".png' width='40' height='60'/>"; }else if(j<10 && z<10&&z==1&&j!=1){ i = "<img src='images/"+j+".png' width='40' height='60'/>"+"<img src='images/1.png' width='20' height='60'/>"; }else if(j<10 && z<10&&(j==1&&z==1)){ i="<img src='images/1.png' width='20' height='60'/>"+"<img src='images/1.png' width='20' height='60'/>"; } } return i; } </script> <!--JS实时时间代码结束-->
可能喜欢
-
Typecho详细图文建站教程
Typecho是一款PHP博客程序,相比于WordPress,Typecho显得更加的轻量级和简洁。现在越来越多的人倾向于用Typecho来搭建个人博客,而...
建站教程 2023-05-30 -
解决阿里云服务器网站无法安装问题的实用方法
在使用阿里云服务器搭建网站的过程中,经常会出现一些安装问题。如果你遇到了这样的问题,不要惊慌,本文将为你提供一些实用的解决方法。以下是几种经常出现的阿里云服务器...
建站教程 2023-05-11 -
ubuntu搭建ftp服务器详细图文教程
今天小编就为大家分享一篇关于图文详解Ubuntu搭建Ftp服务器的方法(包成功),小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小...
建站教程 2023-05-10 -
两个免费特别稳定的二维码生成API接口
搜狐视频api接口链接:https://my.tv.sohu.com/user/a/wvideo/getQRCode.do?text=此处为你的链接如果要设置二...
建站教程 2023-05-01 -
非常实用的鼠标移动到相应位置,下拉显示全部内容代码
今天分享一个非常实用的鼠标移动到相应位置,下拉显示全部内容代码。css代码:.list-article li a:hover{color:&...
建站教程 2023-04-26 -
百度Api推送提示{“error”:401,”message”:”site error”}错误
网站数据进行了百度Api推送和神马Api推送,神马Api自动推送成功提示200状态码,而百度Api推送却提示{“error”:401.”message”:”si...
建站教程 2023-04-21