1. Accueil
  2. Question et réponse
  3. Brython: éléments en mouvement toutes les [...] microsecondes

Brython: éléments en mouvement toutes les [...] microsecondes

2013-07-14 1 views
3

Bonne nuit. Ceci est une question à propos de Brython et toute aide sera la bienvenue.Brython: éléments en mouvement toutes les [...] microsecondes

Je cherche un moyen de déplacer des éléments (par exemple, un div) quelques pixels vers la gauche (ou vers la droite, le haut, etc.) à chaque intervalle de temps (peut-être 200 millisecondes). Quelqu'un peut-il m'aider?

Et ce serait génial de supprimer l'élément une fois qu'il est arrivé sur la marge de gauche. (:

[mise à jour] Voici un point de départ, je ne polluer avec un mauvais code Brython, suivez votre créativité.)

<html><head> 
<style> 
* { margin: 0; padding: 0; outline: 0; border: 0; } 
.block { 
    display: inline-block; 
    margin: 1em; 
    padding: 1em; 
    background: steelblue; 
    color: white; 
    font: 14pt/1.2 georgia,cambria; 
    border-radius: .2em; 
} 
</style></head><body> 

<div class="block"> 
    Test 
</div> 

</body></html>

Source

2013-07-14 leonardo_assumpcao

+2

Veuillez poster votre code pour nous donner un point de départ. – Liam

+1

Attendez que vous utilisiez un langage de script Web standard pour réimplémenter la balise ''. * Pourquoi? * –

+0

Lego, parce qu'il est déprécié ... et aussi je voudrais l'apprendre en brython. @Liam, je voulais juste un exemple simple et fonctionnel avec des explications. Si vous le souhaitez, je vais mettre à jour avec un point de départ simple. –

Répondre

5

Voici comment vous pouvez le faire:

<html> 
<head> 
<meta charset="utf-8"> 
<style> 
* { margin: 0; padding: 0; outline: 0; border: 0; } 
.block { 
    display: inline-block; 
    /*margin: 1em;*/ 
    padding: 1em; 
    background: steelblue; 
    color: white; 
    font: 14pt/1.2 georgia,cambria; 
    border-radius: .2em; 
} 
</style> 
<script src="/src/brython.js"></script> 
<script type="text/python"> 
import time 

elt = doc["moving"] 

def move(): 
    elt.style.left = "%spx" %(elt.left+10) 
    if(elt.left > 500): 
     time.clear_interval(timer) 
     del doc["moving"] 

timer = time.set_interval(move,200) 
</script> 
</head> 
<body onload="brython(1)"> 

<div class="block" id="moving" style="position:absolute;top:10;left:20;"> 
    Test 
</div> 

</body> 
</html>

Assez simple, hein? Quelques commentaires:

  • l'élément DIV doit être réglé avec la position = absolue

  • dans le programme Brython, vous obtenez une référence à l'objet par doc[object_id] (doc est intégré dans le nom pour le document). Pour supprimer l'objet: del doc[object_id]

  • cet objet a un attribut gauche: un entier mesurant la distance au document gauche frontière

  • set_interval et clear_interval sont des méthodes ajoutées au intégrée temps du module, ils ont la même syntaxe que leurs équivalents Javascript

Source

2013-07-16 08:50:37 marqueemoon

+0

Merci mec (: –

+2

mise à jour pour 2014: Il est recommandé d'utiliser 'from import import timer 'au lieu de' import time'. (La direction du projet est d'équivalence avec les bibliothèques python stdlib) Donc 'set_interval' de brython et "set_timeout" sont tous les deux dans le module 'browser.timer' – jsbueno

Questions connexes

 Questions connexes