转盘demo

最新推荐文章于 2023-10-11 09:37:29 发布

iLove9ouHenry

最新推荐文章于 2023-10-11 09:37:29 发布

阅读量615

点赞数 1

分类专栏：数据结构与算法文章标签： function timer xhtml border each html

本文链接：https://blog.csdn.net/minjun0901/article/details/6917390

版权

数据结构与算法专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>

<script type="text/javascript">
function $(id){
	return document.getElementById(id);
}
function setStyle(control,obj){
   for(var p in obj){
	   control['style'][p] = obj[p];
   }
}
</script>
<script type="text/javascript">
var max_len = 5;
var real_max_len = 9;
var centerPos = {x:1000,y:300};
var R = 200;

var position = [
				   [centerPos.x,centerPos.y-R],
				   [centerPos.x+R*Math.sin(2*Math.PI/max_len),centerPos.y-R*Math.cos(2*Math.PI/max_len)],
				   [centerPos.x+R*Math.sin(2*2*Math.PI/max_len-Math.PI/2),centerPos.y+R*Math.sin(2*2*Math.PI/max_len-Math.PI/2)],
				   [centerPos.x-R*Math.sin(2*2*Math.PI/max_len-Math.PI/2),centerPos.y+R*Math.sin(2*2*Math.PI/max_len-Math.PI/2)],
				   [centerPos.x-R*Math.sin(2*Math.PI/max_len),centerPos.y-R*Math.cos(2*Math.PI/max_len)]
			   ];
function setPosition(){
	   createDiv();
	   //other things
}
function createDiv(){
	var temp = [];
	
	for(var i=0;i<max_len;i++){
	   temp[i] = document.createElement("div");
	   temp[i].id = "id"+i;
	   document.body.appendChild(temp[i]);
	   
	   setStyle(
			  temp[i],
			  {     
					     position:"absolute",
					     fontSize:'36px',
						 color:"red",
						 background:"url(images/pic_"+i+".png) no-repeat",
						 width:"100px",
						 height:"200px",
						 border:"1px solid red",
						 left:position[i][0]+"px",
						 top:position[i][1]+"px"
			 }
	  );
	}
}

var index = 0;
var realIndex = 0;
var listData = [];
var realListData = [];
function move(direction){
	var _type;
    if(direction==='l'){
		_type = -1;
	} else if(direction==='r'){
		_type = 1;
	} else{
		_type =0;
	}
	//this can show that if you know one number,you can know each number from this known number;
	realIndex = (realIndex+_type+real_max_len)%real_max_len;
	index = (index+_type+max_len)%max_len;
	for(var i=0;i<max_len;i++){
		realListData[i] = (realIndex+i)%real_max_len;
		//alert(realListData[i]);
	}
	for(var i=0;i<max_len;i++){
		listData[i] = (index+i)%max_len;
	}
	translate(direction);
}
//not change:5个坐标位置  changing:
function translate(dir){
	var angle =0;
	var timer = 0;
	var perStep = 0.07;//转动的幅度
	
	timer = setInterval(
	    function(){
	       angle = angle + perStep;
		   if(angle>2*Math.PI/max_len){
		       clearInterval(timer);
			   (function(){
				   //移动结束后，重新赋值；
				   for(var i=0;i<max_len;i++){
		             //$("id"+listData[i]).innerHTML = listData[i];
	               }
			   })();
		   }
		   if(dir=='r'){
			   for(var i=0;i<max_len;i++){
					  setStyle(
							  $("id"+listData[i]),
							  {     
								 left:(position[(i+1)%max_len][0]-centerPos.x)*(Math.cos(-angle))-(position[(i+1)%max_len][1]-centerPos.y)*(Math.sin(-angle))+centerPos.x+"px",
								 
								 top:(position[(i+1)%max_len][0]-centerPos.x)*(Math.sin(-angle))+ (position[(i+1)%max_len][1]-centerPos.y)*(Math.cos(-angle))+centerPos.y+"px"
							  }
					 );
			  }
		  }
		  else if(dir=='l'){
		       for(var i=0;i<max_len;i++){
				 setStyle(
							  $("id"+listData[i]),
							  {     
								 left:(position[(i-1+max_len)%max_len][0]-centerPos.x)*(Math.cos(angle))-(position[(i-1+max_len)%max_len][1]-centerPos.y)*(Math.sin(angle))+centerPos.x+"px",
								 
								 top:(position[(i-1+max_len)%max_len][0]-centerPos.x)*(Math.sin(angle))+ (position[(i-1+max_len)%max_len][1]-centerPos.y)*(Math.cos(angle))+centerPos.y+"px"
							  }
					    );
		      }
		  }
	    },
	1);
}

function skip(value){
	//go to the define position
    //alert(value);
	index = value;
    for(var i=0;i<max_len;i++){
		listData[i] = (index+i)%max_len;
		setStyle(   
				    $("id"+listData[i]),
				    {
					     left:position[i][0]+"px",
						 top:position[i][1]+"px"
					}
				)
	}
	translate();
}
function enter(){
   alert(index);
}

var onloadFlag = false;
window.onload = function main(){
   setPosition();
   onloadFlag = true;
};

document.onkeydown = function eventHandler(event){
	    if(!onloadFlag) return;
		var KEY = {
		    LEFT:37,
			RIGHT:39,
			UP:38,
			DOWN:40,
			ENTER:13,
			BACK:640
		}
		var keycode = event.keyCode || event.which;
		switch(keycode){
			case KEY.LEFT:
				move("l");
				break;
			case KEY.RIGHT:
				move("r");
				break;
			case KEY.UP:
				move("u");
				break;
			case KEY.DOWN:
				move("d");
				break;
			case KEY.ENTER:
				 enter();
				 break;
			case KEY.BACK:
			case 8:
			case 27:
			     var code = parseInt(Math.random()*5);
			     skip(code);
				 break;
		}
}
</script>
</body>
</html>

iLove9ouHenry

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
转盘demo

无标题文档function $(id){ return document.getElementById(id);}function setStyle(control,obj){ for(var p in obj){ control['style'][p] = obj[p]; }}var max_len = 5;var r
复制链接

扫一扫

专栏目录