标签：style blog class code java ext
运行它的代码需要打开IE的兼容性视图
如有疑问请参考：http://msdn.microsoft.com/en-us/library/bb264280(VS.85).aspx
代码如下：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<!-- VML requires VML namespace and behavior. -->
<style>
v\:* { behavior: url(#default#VML); }
</style>
<script type="text/javascript">
// Your JavaScript code will go here.
//Flag to stop rectangle from spinning.
var spin;
//Flag to first call makeRect function
var first = true;
// Make rectangle.
function makeRect() {
//if not first call, return.
if(first == false)
return;
first = false;
// Create element in memory.
var r = document.createElement("v:rect");
// Define width, height, color, and unique ID.
r.style.width = 100;
r.style.height = 100;
r.fillcolor = "purple";
r.id = "myRect";
// Attach rectangle to the document at the the specified Div.
var anchorDiv = document.getElementById(‘anchorDiv‘);
anchorDiv.appendChild(r);
}
// Set up the rotation.
function rotateRect() {
// Call spinRect function every 10 milliseconds.
// The spin variable allows us to clear the call to setInterval.
spin = setInterval("spinRect()", 10);
}
// Spin the rectangle by specified increment every time function called.
function spinRect() {
// Increment rectangle rotation by 1 degrees.
var myRect = document.getElementById(‘myRect‘);
myRect.rotation += 1;
}
</script>
</head>
<body>
<br><br>
<!-- Button to create rectangle. -->
<input type="BUTTON" value="Make Rectangle" onclick="makeRect()">
<!-- Button to rotate rectangle. -->
<input type="BUTTON" value="Rotate Rectangle" onclick="rotateRect()">
<!-- Button to close webpage. -->
<input type="BUTTON" value="Stop!" onclick="clearInterval(spin)">
<br><br>
<!-- Node where new rectangle will be attached. -->
<div id="anchorDiv" style="border: dotted"></div>
</body>
</html>
运行结果如下：
html --- VML --- javascript --- 旋转矩形,布布扣,bubuko.com
html --- VML --- javascript --- 旋转矩形
标签：style blog class code java ext
原文地址：http://www.cnblogs.com/kodoyang/p/Html_VML_RotateRectangle_Javascript.html
