[查看演示] 源码如下
----------------------------------------------------------
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>testing VML－www.51windows.Net</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<body>
<v:group id="clock" coordsize="100 100" style="width: 200px; height: 200px; position: relative; filter: alpha(opacity=90);">
<v:oval style="width: 100%; height: 100%">
<v:stroke weight="10px" color="#eeeeee"/>
<!-- I removed this gradient fill to match the WebFX color theme
<v:fill type="gradient" color="white" color2="#eeeeff" angle="225deg"/>
-->
</v:oval>
<v:group id="secondsPointer" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
<v:line from="50,50" to="50,5">
<v:stroke weight="2px" endcap="round" color="navy"/>
</v:line>
</v:group>
<v:group id="minutesPointer" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
<v:line from="50,50" to="50,8">
<v:stroke weight="4px" endcap="round" color="navy"/>
</v:line>
</v:group>
<v:group id="hoursPointer" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
<v:line from="50,50" to="50,18">
<v:stroke weight="7px" endcap="round" color="navy"/>
</v:line>
</v:group>
</v:group>
<SCRIPT LANGUAGE="JavaScript">
<!--
function updatePointers() {
var now = new Date();
secondsPointer.style.rotation = now.getSeconds() * 6;
minutesPointer.style.rotation = now.getMinutes() * 6 + now.getSeconds() / 10;
hoursPointer.style.rotation = now.getHours() * 30 + now.getMinutes() / 2;
}
window.attachEvent("onload", initVMLClock);
function initVMLClock() {
updatePointers();
window.setInterval("updatePointers()", 1000);
}
//-->
</SCRIPT>
</body>
</html>
<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<input type="button" name="Button" value="查看源代码" onClick= 'window.location = "view-source:" + window.location.href'></div> |
