有人会不会用js 或 html 5 写一个圆环 24等分可以点击的 就像这样的

html-css012

有人会不会用js 或 html 5 写一个圆环 24等分可以点击的 就像这样的,第1张

<html>

<head>

<title></title>

<style type="text/css">

.content{display: none}

</style>

</head>

<body>

<span>设为终点</span><span>设为起点</span><span>搜索附近</span>

<div class="content">1</div>

<div class="content">2</div>

<div class="content">3</div>

<script>

var _span=document.getElementsByTagName("span")

var _div=document.getElementsByTagName("div")

for (var i = 0,len=_span.lengthi <leni++) {

_span[i].index=_div[i].index=i

_span[i].onclick=function(){

var ind=this.index

if (_div[ind].className=="content") {

for(var j=0j<lenj++){

_div[j].className="content"

}

_div[ind].className=""

}else{

_div[ind].className="content"

}

}

}

</script>

</body>

</html>

Chart.js允许通过HTML5的canvas进行图表绘制。这里我们希望绘制一个环形图，点击图上各segment时可以显示自定义的圆形tooltip。Chart.js支持通过几个变量添加tooltip，它提供一个tooltipTemplate但是却不支持自定义tooltip的HTML！于是决定自行绘制tooltip手动添加上去。

html5+javascript 实现的圆形进度条，应该符合你要求

源代码 ： http://blog.csdn.net/tangdou5682/article/details/52778766