用html语言写一个环形,html5环形流程图可添加流程图代码

特效描述：html5 环形流程图 可添加流程图代码。html5流程图代码

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

A

B

C

D

E

F

center

Add

var radio = 160;

var radio_arrows =140;

var container_width = 420, container_height=420;

var c_container_width = 420, c_container_height=420;

$(".ciclo1").smartCycle({

container_width: '420px',

container_height: '420px',

radio: radio,

radio_arrows: radio_arrows,

arrows_colors:['#40A4C0'],

colors:['#928fa2','#928fa2']

});

var alphabet = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','Ñ','O','P','Q','R','S','T','U','V','W','X','Y','Z'];

var alphabet_pos =6;

$(".add").click(function(){

$(".ciclo1").append(''+alphabet[alphabet_pos]+'');

radio+=25;

radio_arrows+=25;

container_width+=50;

container_height+=50;

c_container_width+=50;

c_container_height+=50;

$(".contenedor").css({

'width':c_container_width+'px',

'height':c_container_height+'px'

});

$(".ciclo1").smartCycle('options',{'radio': radio, 'radio_arrows': radio_arrows, 'container_width': container_width+'px',

'container_height': container_height+'px',});

$(".ciclo1").smartCycle('realign');

alphabet_pos+=1;

});