這次我用HTML5 + Pure javascript寫

完整範例在jsfiddle (會動，完全自己寫的，無參照，用上了一堆Math.sin / cos / PI )

https://jsfiddle.net/gxeLz7ct/5/

HTML部份

<canvas id="canvas" width="200" height="200">
</canvas>

javascript部份

var colorArr = ["white","white","white","white","white","purple","darkblue","lightblue","green","yellow","orange","red"];
var Q = 0;
drawClock();

function drawClock(){
	var c = document.getElementById("canvas");
  var pi = Math.PI;
  var h = pi*2/12;
  var startArc = -0.5*pi;
  var endArc = 1.5*pi;
  var r = 150 ;
  var rWord = 120;
  var cX = 150;
  var cY = 150;
  var lenColor = colorArr.length;
  c.width = 500;
  c.height = 500;
  var ctx = c.getContext("2d");
  ctx.font= "1.5em Verdana";
  ctx.beginPath();
  ctx.fillStyle="Yellow";
  ctx.arc(r,r,r,startArc,endArc);
  ctx.stroke();
  var x = 0 ;
  var y = 0 ;
  for(i = Q ; i<=Q+12 ; i++){
    var xi =i%12==0 ? 12 : i %12;
  	var metrics = ctx.measureText(xi);
    var aW =metrics.width;
	  var fontHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
		var aH = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;

		ctx.beginPath();
  	x = Math.cos(startArc+h*i)*rWord+cX; 
    y = Math.sin(startArc+h*i)*rWord+cY; 
    ctx.fillStyle = colorArr[(i-1-Q)%12];
    ctx.arc(x,y,20,startArc,endArc);
    ctx.fill();
    ctx.stroke();
    ctx.fillStyle="black";
    ctx.fillText(xi,x-aW/2,y+aH/2);
  }  
  Q=Q<11?Q+1:0;
  setTimeout(drawClock,1000);
};

用Timer吧,
其實所謂跑馬燈就是前面那個暗了,
後面那個亮了,
看起來就像是往旁邊跑了,
可是其實就是控制燈的明跟暗而已.

你想要的迴圈效果就是讓他跑無窮迴圈
取i除以12的餘數代表12個燈
剩下自己想
這邏輯一般人是小學~高1都有可能會的

1.設定一個time，每秒跑一次
2.抓當前的秒數 用目前秒數除於5。取其正整數做key。
3.將12的值當0的key。
4.點亮計算出來key燈號。
5.解決!!

以上只給你另一種觀念。當然這是依秒數，不一定是你要的。另一種寫法是
也是得將12當0key用

s = 啟始值 0~11;
foreach(i=1;i<=12;i++){
    keyAdd = s+i;
    key = keyAdd%12;//取其餘數當key
    全滅燈();
    亮燈(key);
}

都給你觀念了，自已寫看看吧。至於燈的顏色可事先定義好。