微信自助下单小程序_原生js完成心爱糖果数字时

2021-01-12 15:40 admin
原生js实现可爱糖果数字时间特效       本文主要介绍了原生js实现可爱糖果数字时间特效的实例代码,附效果展示和代码演示。具有一定的参考价值,下面跟着小编一起来看下吧

效果展示:

源码下载:

数字采用漂亮的糖果皮肤设计

效果图:

代码如下:

 !DOCTYPE html 
 html 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 
 meta name="viewport" content="width=device-width, initial-scale=1" / 
 title js多彩的数字时钟_何问起 /title base target="_blank" / 
 style a{color:blue;} /style 
 /head 
 body 
 div h1 JS实现多彩的数字时钟 /h1 /div 
 div id="time" /div 
 div br / br / a href="a a href="h/" 说明 /a a href="texiao/" 特效 /a /div 
 script 
 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' width='12' height='40'/ "+ minutes+" img 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;
 getTime();
 /script 
 /body 
 /html 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!