<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" onclick="start_draw()" />
<div id="x" class="test"> </div>
<div id="y" class="test"> </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>
分享到：
相关推荐
"JS完美画饼图"这个话题涉及到使用JavaScript库或者自定义代码来创建动态、交互式的饼图。在这个过程中，我们将探讨如何使用JavaScript和相关的库来实现这一目标。 首先，我们需要理解饼图的基本原理。饼图由一个...
React Native 是一个由Facebook开发的开源框架，它允许开发者使用JavaScript和React的声明式编程模型来构建原生的iOS和Android应用。ReactART是React的一个扩展库，它为React Native提供了一个2D图形渲染层，使得...
JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页和网络应用的开发，实现动态内容和交互性功能。在这个"js半圆形banner切换动画效果"的项目中，我们探讨的是如何利用JS来创建一种独特的视觉效果，即在Banner...
【标题】"js圆形进度特效"涉及的知识点主要集中在JavaScript编程和前端网页特效的实现上。JavaScript是一种广泛用于客户端Web开发的脚本语言，它在网页中主要用于处理用户交互、动态内容更新以及与服务器的异步通信...
6. **框架与库的支持**：现代开发中，许多库和框架如React、Vue.js或Flutter提供了内置的动画系统，可以帮助开发者更容易地实现此类动画。了解这些工具的用法可以简化开发过程。 7. **响应式设计**：考虑到不同设备...
总结，这款“css3圆形进度条时分秒计时器js特效”充分利用了CSS3的高级特性，结合JavaScript的时间管理和DOM操作，实现了动态的、可视化的计时功能。这样的特效不仅可以提升用户体验，也可以在各种应用场景中增加...
【基于anime.js的动感圆形轮播图特效】是一种利用JavaScript动画库anime.js实现的独特视觉效果。anime.js是一个轻量级且强大的动画库，它提供了丰富的API来创建复杂的动画效果，包括时间轴、缓动函数、关键帧等。在...
该压缩包文件"js圆形图片旋转的焦点图特效代码.rar"包含了一个JavaScript实现的特殊焦点图效果，这种效果使得图片以圆形的方式进行旋转切换。在网页设计中，焦点图通常被用来展示一组重要的图片，通过动态效果吸引...
"css"、"js"和"imgs"目录分别存放样式表文件、JavaScript脚本和图片资源，这些都是构建响应式圆形轮播图不可或缺的部分。"related"和"fonts"目录可能包含了与插件相关的其他文件，比如额外的CSS样式或者定制的字体。...
在JavaScript中，动态设置图片的热区（hotspots）并获取图片坐标是一项常见的需求，尤其在交互式网页设计中。热区技术允许我们为图片指定特定的交互区域，用户点击或悬停在这些区域上时可以触发特定的事件。本文将...
"js圆形进度条css圆形进度条.zip"是一个压缩包，包含了实现圆形进度条效果的资源，适用于JavaScript（js）和CSS（css）技术。这个圆形进度条设计允许用户自定义样式，并且具有良好的浏览器兼容性，支持IE8及以上版本...
6. JavaScript库：实现带动画效果的圆形统计图，通常会利用JavaScript库，如D3.js、Chart.js、ECharts等，它们提供了丰富的图形绘制和动画功能。 7. CSS样式：为了美化动画效果，CSS可以用来定义环形图的颜色、边框...
jQuery圆形横向图片轮播图切换，就是一种能够为网站增添亮点的JavaScript特效。本文将深入探讨这个特性，以及如何利用HTML5、CSS3和jQuery实现这种独特的图片展示方式。 首先，我们要明白jQuery是什么。jQuery是一...
【JS顶部圆形导航特效】是一种常见的网页交互设计，它利用JavaScript技术实现了一种创新的页面导航方式。在网页设计中，导航菜单是帮助用户快速访问网站不同部分的关键元素。而圆形导航特效则以其独特的视觉效果，...
Canvas API提供了丰富的绘图函数，如fillRect()用于填充矩形，arc()用于绘制圆形或弧形，以及drawImage()用于在画布上显示图像，这些都是制作动画的基础。 JavaScript作为主要的脚本语言，负责控制动画的时间序列和...
首先，我们需要了解JavaScript（JS）的基础。JavaScript是一种解释型的、面向对象的、弱类型的脚本语言，常用于网页和网络应用开发。它能够实时更新页面内容，为用户带来动态的交互体验。在我们的计时器案例中，...
在这个案例中，“js+css3交互式圆形图标菜单导航代码”就是一个很好的示例，它利用JavaScript和CSS3的强大功能，为用户提供了直观且有趣的菜单导航体验。下面将详细介绍这个项目中的核心技术和实现方式。 首先，...
本示例聚焦于一个利用原生JavaScript实现的3D圆形图片叠加排列滚动切换的代码，这是一个创新且吸引用户注意力的设计元素，常见于现代网页和应用的界面展示。 首先，我们要理解3D效果在网页中的实现方式。JavaScript...
【超酷JS圆形浮动菜单】是一种使用JavaScript编程语言实现的创新性交互设计，它将菜单设计成圆形，并使其在网页上浮动，为用户提供独特的浏览体验。这种设计在现代网页开发中越来越受欢迎，因为它不仅增加了网站的...
圆形图片轮播图是一种创新的展示方式，它将原本矩形的图片转换为圆形展示，增加了视觉吸引力。这种设计通常通过CSS3的border-radius属性实现，同时结合JavaScript来实现图片的动态切换和无缝循环，提供独特的用户...