JS问题

[HTML] 标签： 2014-04-07 17:03
<!DOCTYPE html>
<html>
 <head>
  <title>clock1</title>
  <script>
   function timeDisplay()
   {
	var today = new Date();
	var h = today.getHours();
	var m = today.getMinutes();
	var s = today.getSeconds();
	divDisplay("h",h);
	divDisplay("m",m);
	divDisplay("s",s);
	h = checkTime(h);
	m = checkTime(m);
	s = checkTime(s);
	document.getElementById("txt").innerHTML = h + ":" + m + ":" + s;
	
	t = setTimeout(function(){timeDisplay()},1000);
   }
   
   function checkTime(i)
   {
	if(i<10)
	 i = "0" + i;
	return i;
   }
   
   function divDisplay(divId,num)
   {
	var divDs="";
	var mod = num % 5;
	if(divId=="h")	//hours
	{
	 if(num>12)
	 {
	  num -= 12;
	 }
	 for(var i = 0; i < 12; ++i)
	 {
	  if(i < 12 - num)
		divDs += "<div class='emp'></div>";
	  else 
		divDs += "<div class='" + divId + "'></div>";
	 }
	}
	else			//minutes and seconds
	{
	 for(var j = 0; j < 12; ++j)
	 {
	    if(num == 0)  num = 60;
		if(j< 12 - (num+4)/5)				//上方空白区
			divDs +="<div class='emp'></div>";
		else if(j == 12 - (num+4)/5 )		//5s为一个单位，1~5s方框不断变高
				divDs += oneDiv(divId,mod);
		     else							//底部
				divDs += "<div class='" + divId + "'></div>";
	 } 
	}
	document.getElementById(divId).innerHTML = divDs;
   }
   
   function oneDiv(divId,n)
   {
	var showDiv="";
	switch(n)
	{
		case 0: showDiv += "<div class='" + divId + "'></div>";
				break;
		case 1:	for(var i = 0; i < 4; ++i) 
					showDiv += "<div class='empS'></div>";
				showDiv += "<div class='" + divId + "S'></div>";
				break;
		case 2:	for(var i = 0; i < 3; ++i) 
					showDiv += "<div class='empS'></div>";
				for(var i = 0; i < 2; ++i) 
					showDiv += "<div class='" + divId + "S'></div>";
				break;
		case 3:	showDiv += "<div class='empS'></div><div class='empS'></div>";
				for(var i = 0; i < 3; ++i)
					showDiv += "<div class='" + divId + "S'></div>";
				break;
		case 4:	showDiv += "<div class='empS'></div>";
				for(var i = 0; i < 4; ++i) 
					showDiv += "<div class='" + divId + "S'></div>";
				break;
	}
	return showDiv;
   }
  </script>
  <style>
  div{float:left;}
  .h{width:100px;height:28px;border:1px white solid;background-color:red;}
  .m{width:100px;height:28px;border:1px white solid;background-color:green;}
  .s{width:100px;height:28px;border:1px white solid;background-color:blue;}
  
  .hS{width:100px;height:4px;border:1px white solid;background-color:red;}
  .mS{width:100px;height:4px;border:1px white solid;background-color:green;}
  .sS{width:100px;height:4px;border:1px white solid;background-color:blue;}
    
  .emp{width:100px;height:28px;border:1px white solid;}
  .empS{width:100px;height:4px;border:1px white solid;}
  
  #h,#m,#s{width:102px;height:360px;border:1px white solid;}
  #container{width:312px;}
  #txt{font-family:微软雅黑;font-size:77px;}
  </style>
 </head>

 <body onLoad="timeDisplay()">
  <div id="container">
   <div id="h"></div>
   <div id="m"></div>
   <div id="s"></div>
   <p id="txt"></p>
  </div>
  
 </body>

</html>
JS问题

最新评论
