2016-09-24 98 views
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 

回答

0

在第14行

""" Helper function for determining the user agent """ 

到大的空間的

應該

""" Helper function for determining the user agent """ 
相關問題