js画圆形图

最新推荐文章于 2024-07-28 18:11:07 发布

索引在线

最新推荐文章于 2024-07-28 18:11:07 发布

阅读量215

点赞数

分类专栏： JavaScript文章文章标签： HTML

本文链接：https://blog.csdn.net/mimang2008110/article/details/83738851

版权

JavaScript文章专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<html>
<style>
div {font-size:1px}
#x {width:900px; height:2px; background-color:black;position:absolute;top:300px;left:0px}
#y {width:2px; height:800px; background-color:black;position:absolute;top:0px;left:400px}
</style>
<body>
精度<input id="input_text" />
半径<input id="input_text_dia" />
<select id="sel_color">
<option value="red">红</option>
<option value="blue">蓝</option>
<option value="black">黑</option>
<option value="yellow">黄</option>
<option value="green">绿</option>
</select>
<select id="sel_size">
<option value="1">小</option>
<option value="2">中</option>
<option value="3">大</option>
</select>

<input value="start" type="button" οnclick="start_draw()" />
<div id="x" class="test">&nbsp;</div>
<div id="y" class="test">&nbsp;</div>
<script>
function $(node_id){
return document.getElementById(node_id);
}
function $A(node_list){
var temp=[];
for (var i=0;i<node_list.length ;i++ )
{
   temp.push(node_list[i]);
}
return temp;
}

function draw_cylinder(diameter,ankle_degree){
var x=Math.cos(ankle_degree)*diameter;
var y=Math.sin(ankle_degree)*diameter;
var temp=document.createElement("div");
var color=document.getElementById("sel_color").options[document.getElementById("sel_color").selectedIndex].value;
var size=document.getElementById("sel_size").options[document.getElementById("sel_size").selectedIndex].value;
temp.style.cssText="width:"+size+"px;height:"+size+"px;background:"+color+";position:absolute;top:"+(300-y)+"px;left:"+(400+x)+"px;";
document.body.appendChild(temp);
}

function start_draw(){
var temp=$A(document.getElementsByTagName("div"));
for (var i=0;i<temp.length;i++ )
{
if (temp[i].id!="x"&&temp[i].id!="y")
{
temp[i].parentNode.removeChild(temp[i]);
}
}

for (var i=0;i<$("input_text").value;i++ )
{
   draw_cylinder($("input_text_dia").value,2*Math.PI*i/$("input_text").value);
}
}


</script>
</body>
</html>