0

请耐心等待，我是编程新手 :) 我正在浏览器中测试 Brython。我有这个简单旋转图像的代码，在这种情况下它是一个齿轮。我想使用 python 和 DOM 来为这个 cog 的图像制作动画。这是代码：

<!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
4

1 回答 1

0

在第 14 行

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

到很多空间的

应该

   """ Helper function for determining the user agent """
于 2016-09-25T14:14:54.117 回答