zoukankan      html  css  js  c++  java
  • Javascript:一个优雅的时钟

    实现效果:

    准备工作:

    1# 定时器 相关知识了解

    2# javascript Date(日期)对象

    3# 准备效果所用图片

         

    实现原理:

    1# 获取当前时间;

    var time=new Date();
    var iHours=time.getHours();
    var iMinutes=time.getMinutes();
    var iSeconds=time.getSeconds();
    var iNow=double(iHours)+':'+double(iMinutes)+':'+double(iSeconds);
    

    2# 设定定时器,1s执行一次;

    setInterval(function(){
    
    code//代码部分
    
    },1000);
    

    3# 通过实时的时间数据,动态改变对应的img属性值

     3.1 方法一:  固定位置图片显示相应时间数据

    arrImg[0].src='img/'+parseInt(iHours/10)+'.jpg';
    arrImg[1].src='img/'+iHours%10+'.jpg';
    

      

      3.2 方法二:通过charAt()获取日期字符串指定位置字符,然后改变相应图片的img属性值

    arrImg[i].src='img/' +iNow.charAt(i)+'.jpg';
    

      

    代码部分:

    方法一 : 固定位置图片显示相应时间数据

    <!DOCTYPE html>
    <html>
    <head>
    	<title>时间计时器</title>
    	<meta charset='utf-8'/>
        <style type="text/css">
        body{font-size: 80px;}
        img{float: left; 60px;margin:0 3px;}
        .middle{
        	 600px;
        	height: 100px;
        	position: absolute;
        	top:0;right: 0;bottom: 0;left: 0;
        	margin: auto;
        }
        </style>
    </head>
    <body>
    
    <div id="time"></div>
    
    <div class="middle">
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/colon.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/colon.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    </div>
    
    
    
    <script type="text/javascript">
    var oTime=document.getElementById('time');
    var arrImg=document.getElementsByTagName('img');
    
    setInterval(function(){
    
    timer();
    
    },1000);
    
    
    timer();//消除刷新网页时,时钟函数延迟带来的误差
    
    //时钟两位数显示
    
    function double(n){
    	if(n<10){
    		return '0'+n;
    	}else{
    		return ''+n;
    	}
    }
    
    	
    function timer(){
    
    var time=new Date();
    var iHours=time.getHours();
    var iMinutes=time.getMinutes();
    var iSeconds=time.getSeconds();
    var iNow=double(iHours)+':'+double(iMinutes)+':'+double(iSeconds);
    
    arrImg[0].src='img/'+parseInt(iHours/10)+'.jpg';
    arrImg[1].src='img/'+iHours%10+'.jpg';
    arrImg[3].src='img/'+parseInt(iMinutes/10)+'.jpg';
    arrImg[4].src='img/'+iMinutes%10+'.jpg';
    arrImg[6].src='img/'+parseInt(iSeconds/10)+'.jpg';
    arrImg[7].src='img/'+iSeconds%10+'.jpg';
    
    return iNow;
    }
    </script>
    </body>
    </html>
    

    方法二 :通过charAt()获取日期字符串指定位置字符,然后改变相应图片的img属性值

    <!DOCTYPE html>
    <html>
    <head>
    	<title>时间计时器</title>
    	<meta charset='utf-8'/>
        <style type="text/css">
        body{font-size: 80px;}
        img{float: left; 60px;margin:0 3px;}
        .middle{
        	 600px;
        	height: 100px;
        	position: absolute;
        	top:0;right: 0;bottom: 0;left: 0;
        	margin: auto;
        }
        </style>
    </head>
    <body>
    
    <div id="time"></div>
    
    <div class="middle">
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    </div>
    
    
    <!--<img src="img/colon.jpg"/>-->
    
    
    <script type="text/javascript">
    
    //alert(timer());
    var oTime=document.getElementById('time');
    var arrImg=document.getElementsByTagName('img');
    setInterval(function(){
    timer();
    },1000);
    
    timer();//消除刷新网页时,时钟函数延迟带来的误差
    
    //时钟两位数显示
    
    function double(n){
    	if(n<10){
    		return '0'+n;
    	}else{
    		return ''+n;
    	}
    }
    
    	
    function timer(){
    
    var time=new Date();
    
    var iYear=time.getFullYear();
    var iMonth=time.getMonth()+1;
    var iDay=time.getDay();
    var iHours=time.getHours();
    var iMinutes=time.getMinutes();
    var iSeconds=time.getSeconds();
    
    var iNow=double(iHours)+':'+double(iMinutes)+':'+double(iSeconds);
    
    
    arrImg[0].src='img/'+parseInt(iHours/10)+'.jpg';
    arrImg[1].src='img/'+iHours%10+'.jpg';
    arrImg[3].src='img/'+parseInt(iMinutes/10)+'.jpg';
    arrImg[4].src='img/'+iMinutes%10+'.jpg';
    arrImg[6].src='img/'+parseInt(iSeconds/10)+'.jpg';
    arrImg[7].src='img/'+iSeconds%10+'.jpg';
    
    
    for(var i=0;i<arrImg.length;i++){
    	if(i==2 || i==5){
    		arrImg[i].src='img/colon.jpg';
    
    	}else{
    		arrImg[i].src='img/' +iNow.charAt(i)+'.jpg';
    
    	}
    }
    
    return iNow;
    }
    
    
    </script>
    
    
    
    </body>
    </html>
    

      

  • 相关阅读:
    个人第四次作业
    个人第四作业
    英语学习app——Alpha发布2
    英语学习app——Alpha发布1
    团队作业---系统设计
    团队第二次作业:需求分析
    第三次作业:结对编程
    团队第一次作业
    Web测试实践 第二天
    Web测试实践 第一天
  • 原文地址:https://www.cnblogs.com/kevinCoder/p/4548806.html
Copyright © 2011-2022 走看看