將程式運行起來，會在畫面中間以一張小圓球的圖片沿著圓形軌跡不斷移動。
主要是想測試一下在Dart中，addEventListener及setInterval這兩個函數的寫法。
TestBallMove.html :
<html>
<head>
<title>TestBallMove</title>
</head>
<body>
<h1>TestBallMove</h1>
<h2 id="status">dart is not running</h2>
<input type ="button" name="button1" id = "button1" value = "移動"/>
<img src ="ball.png" id="ball"/>
<script type="text/javascript" src="TestBallMove.dart.app.js"></script>
</body>
</html>
TestBallMove.dart
#import('dart:dom');
class TestBallMove {
static var r = 100 ;
static var dx = 0,dy = 0 ;
static var count = 0;
static Draw(Element e){
var x = (window.innerWidth/2) ,y = window.innerHeight/2;
dx = r * Math.cos(count) + x;
dy = r * Math.sin(count) + y;
count +=1;
e.style.setProperty("left", dx.toString() +"PX");
e.style.setProperty("top", dy.toString() +"PX");
}
}
void main() {
var doc = window.document;
var ball = doc.getElementById("ball");
var button = doc.getElementById("button1");
button.addEventListener("click",
(Event e){
ball.style.setProperty("position","absolute");
window.setInterval(f() => TestBallMove.Draw(ball),40);
},false);
}
留言列表
前端網頁相關技術 (5)
