素材牛VIP会员

糖果字体倒计时数字时钟效果

 所属分类:网页特效-时间日期

 浏览:2769次  评论:0次  更新时间:2016-11-11
牛币素材VIP可免积分下载
糖果字体倒计时数字时钟效果兼容IE6
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:JS数字时钟(糖果字体)修改图片可以任意DIY样式

详细介绍

使用方法:

核心JS结构

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;
}

将<body>里面的<script>和<div>标签复制到你的<body>里面 然后 在把images文件夹也考过去就好!

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)