需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<script>标签中，输入js代码：$('body').append(new Date())。
3、浏览器运行index.html页面，此时页面显示出了系统时间。
作者：eleven
链接：https://www.zhihu.com/question/50603427/answer/122278093
来源：知乎
著作权归作者所有，转载请联系作者获得授权。
芝麻的应该是用canvas实现的：放大下图片就可以看到刻度线上的小锯齿；右侧数字上方的刻度线的颜色明显淡了些。
CSS3或者CANVAS都可以实现，关键是要把 旋转中心 / 旋转角度 / 旋转方向 确定好了。具体实现方式可参考 @Jim Liu 的逻辑。（二楼的神作还没有理解呢，\汗）
旋转中心：多以圆心为准；
旋转角度：根据应用逻辑也容易计算；
旋转方向： -- 这个对我来说有点不好理解，导致走了长长的弯路。
以下是rotate的官方说明：
CSS3：
rotate( <angle>)
specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as
defined by the transform-origin property. For example, rotate(90deg)
would cause elements to appear rotated one-quarter of a turn in the clockwise direction.
CANVAS：
The rotate(angle)
method must add the rotation transformation described by the argument to the transformation
matrix. The angle argument represents a clockwise rotation angle expressed in
radians.
参数的单位不一样，但都是以顺时针方向实现旋转的。如果参数值为负数，可表示以逆时针的方向旋转。
对于CSS3来说，所有的元素都是可变动的。旋转的物体是HMTL标签元素。旋转的方向是原始元素到目标位置。一般将元素集中绝对定位到特定的位置，比如正上方-Y轴的负方向(可随意指定，怎么方便怎么来)，然后将各个元素旋转（拖拽）到目标位置上。
对于CANVAS来说，只有一次写的机会，一旦在画布上写了内容，都是不可修改和撤销的。旋转的物体是坐标系。旋转的方向就是坐标轴到目标位置。
只要参照物在坐标轴上， 两种方式的旋转方向和角度都一样，不用刻意区分，简单多了。
有区别的就是下一个元素： (顺序依次为：红色第一个；紫色第二个)
具体的实现为：
CSS3：
var total_count = el_sets.length,
per_degree = total_degrees / (total_count-1)
for(var i = 0i <total_counti++){
var degree = start_rotate_degree + i * per_degree
el_sets[i].style.transform = "rotate("+ degree +"deg)"
}
CANVAS:
ctx.rotate(setting.start_degree)
for(var i = 0i <setting.counti++){
var pos = getPosInCircle(0,setting.radius,Math.PI/-2,10)
ctx.fillText(sets[i],pos.x,pos.y)
ctx.rotate(setting.per_degree)
}
很简单 用javascript 代码 获取当前时间 然后1调用一次<html>
<head>
<title>无标题文档</title>
</head>
<script type="text/javascript" language="javascript">
function shijian(){
var myDate = new Date()
var mytime=myDate.toLocaleTimeString()//获取当前时间
document.getElementById("av").innerHTML=mytime
}
setInterval('shijian()',1000)
</script>
<body >
<div id="av" style="width:100px"></div>
</body>
</html>
