0
請耐心等待我,我是編程新手:) 我在瀏覽器中測試Brython。我有這個簡單的旋轉圖像的代碼,在這種情況下,它是一個齒輪。 我想使用python和DOM來動畫這個cog的圖像。 這是代碼:Uncaught ReferenceError:rotateAnimation沒有定義(匿名函數)
<!DOCTYPE html>
<html>
<head>
<!-- load Brython -->
<script src="http://brython.info/src/brython_dist.js"></script>
<!-- the main script; after loading, Brython will run all 'text/python3' scripts -->
<script type='text/python3'>
from browser import window, timer, document, html
def user_agent():
""" Helper function for determining the user agent """
if window.navigator.userAgent.find('Chrome'):
return 'chrome'
elif window.navigator.userAgent.find('Firefox'):
return 'firefox'
elif window.navigator.userAgent.find('MSIE'):
return 'msie'
elif window.navigator.userAgent.find('Opera'):
return 'opera'
# Dict Mapping UserAgents to Transform Property names
rotate_property = {
'chrome':'WebkitTransform',
'firefox':'MozTransform',
'msie':'msTransform',
'opera':'OTransform'
}
degrees = 0
def animation_step(elem_id):
""" Called every 30msec to increase the rotatation of the element. """
global degrees, tm
# Get the right property name according to the useragent
agent = user_agent()
prop = rotate_property.get(agent,'transform')
# Get the element by id
el = document[elem_id]
# Set the rotation of the element
setattr(el.style, prop, "rotate("+str(degrees)+"deg)")
document['status'].innerHTML = "rotate("+str(degrees)+"deg)"
# Increase the rotation
degrees += 1
if degrees > 359:
# Stops the animation after 360 steps
timer.clear_interval(tm)
degrees = 0
# Start the animation
tm = timer.set_interval(lambda id='img1':animation_step(id),30)
</script>
</head>
<!-- After the page has finished loading, run bootstrap Brython by running
the Brython function. The argument '1' tells Brython to print error
messages to the console. -->
<body onload='brython(1)'>
<img id="img1" src="cog1.png" alt="cog1">
<script>rotateAnimation("img1",30);</script>
<h2 style="width:200px;" id="status"></h2>
</body>
</html>
這是JavaScript源代碼:
<!DOCTYPE html>
<html>
<head>
<script>
var looper;
var degrees = 0;
function rotateAnimation(el,speed){
var elem = document.getElementById(el);
if(navigator.userAgent.match("Chrome")){
elem.style.WebkitTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("Firefox")){
elem.style.MozTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("MSIE")){
elem.style.msTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("Opera")){
elem.style.OTransform = "rotate("+degrees+"deg)";
} else {
elem.style.transform = "rotate("+degrees+"deg)";
}
looper = setTimeout('rotateAnimation(\''+el+'\','+speed+')',speed);
degrees++;
if(degrees > 359){
degrees = 1;
}
document.getElementById("status").innerHTML = "rotate("+degrees+"deg)";
}
</script>
</head>
<body>
<img id="img1" src="cog1.png" alt="cog1">
<script>rotateAnimation("img1",30);</script>
<h2 style="width:200px;" id="status"></h2>
</body>
</html>
我有錯誤:
(index):67 Uncaught ReferenceError: rotateAnimation is not defined(anonymous
function) @ (index):67
brython_dist.js:4985 File "__main__", line 6
if window.navigator.userAgent.find('Chrome'):
IndentationError: unexpected indent
有什麼不對?
如果我改變
<script>rotateAnimation("img1",30);</script>
到
<script>animation_step("img1",30);</script>
我有錯誤:
(index):67 Uncaught ReferenceError: animation_step is not defined(anonymous function) @ (index):67
brython_dist.js:4985 File "__main__", line 6
if window.navigator.userAgent.find('Chrome'):
IndentationError: unexpected indent