按圆形轨迹排列元素

<div class="box">
	<span>0</span>
	<span>1</span>
	<span>2</span>
	<span>3</span>
	<span>4</span>
	<span>5</span>
	<span>6</span>
	<span>7</span>
	<span>8</span>
	<span>9</span>
	<span>10</span>
	<span>11</span>
	<span>12</span>
</div>

这里的span数量是可以随意增加的

.box{ width: 300px; height: 300px; background: #F3F0F0; position: relative; border-radius: 50%; }
.box::after{ content: ""; width: 300px; height: 300px; background: white; transform: scale(.5); border-radius: 50%; position: absolute; }
.box span{ width: 40px; height: 40px; position: absolute; border-radius: 50%; background: orange; color: white; text-align: center; line-height: 40px; font-weight: bold; }

写css的时候务必注意，中间圆的半径不能超过大圆和小圆的差值

function printRing( bcr , mcr , scr ){
	// bcr 大圆半径，mcr 大圆和小圆之间那个圆的半径（这个圆的直径不能超过大圆半径和小圆半径的差值），scr 小圆半径
	var $span = $("span");
	var len = $span.length;
	var a = Math.PI / 180 ;
	var r = ( bcr - scr ) / 2 + scr; //环形的半径=（大圆半径 - 小圆半径）/ 2 + 小圆半径；
	var angle = 360 / len; //根据span的数量来决定弧度大小
	for( var i = 0 ; i < len ; i++){
		var x="x"+i , y="y"+i;
		var x = bcr + Math.sin( a * angle * i ) * r ;
		var y = bcr + Math.cos( a * angle * i ) * r ;
		$span.eq(i).css({ "left" : ( x - mcr ) + "px" , "top" : ( y - mcr ) + "px"});
	}
}
printRing( 150 , 20 , 75 );

最后来个效果图