📄 21-8 可拖动的角度选择器.htm
字号:
<html xmlns:v>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>21-8 可拖动的角度选择器</title>
<style>
body { margin:0px; padding:0px; }
v\:* { behavior:url(#default#vml); }
</style>
<script>
var x0=150, y0=150, r=150;
var md = false;
function rotate(angle){
var ag;
line1.from = x0+","+y0;
try{
line1.to = (r*Math.cos(angle)+x0)+","+(r*Math.sin(angle)+y0);
ag = (angle+(angle<0?Math.PI*2:0))/Math.PI*180;
fill1.angle = -ag;
if(ag<270){
arc1.startAngle = 90;
arc1.endAngle = 90 + ag;
}else{
arc1.startAngle = -270;
arc1.endAngle = ag-270;
}
line1.innerHTML = ag.toFixed(2);
}catch(e){}
}
window.onload = function(){
arc1.style.position="absolute";
arc1.style.left = x0-r;
arc1.style.top = x0-r;
arc1.style.width = r*2;
arc1.style.height = r*2;
rotate(0);
}
document.onselectstart = function(){ return(false); }
document.onmousedown = function(){
md = true;
angle = Math.atan((event.clientY-y0)/(event.clientX-x0)) + ((event.clientX-x0)<0?Math.PI:0);
rotate(angle);
}
document.onmouseup = function(){ md = false; }
document.onmousemove = function(){
if(!md)return;
angle = Math.atan((event.clientY-y0)/(event.clientX-x0)) + ((event.clientX-x0)<0?Math.PI:0);
rotate(angle);
}
</script>
</head>
<body>
<v:line id="line1"></v:line>
<v:arc startAngle="90" endAngle="180" id="arc1" filled="false" />
<v:rect style="width:200px; height:120px;">
<v:fill type="gradient" color="red" color2="blue" id="fill1"
colors="30% yellow,70% green" method="Linear"
FocusSize="0.001,0.001" Opacity="60%" Opacity2="100%"
FocusPosition="50%,50%"
/>
</v:rect>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -