Script notif : Affichage de notification
Affichage de notification avec effet d'animation
Partie II : L'interactivité
Edition 1 | Chapitre 12 : Manipuler le document / Page 180
Edition 2 | Chapitre 12 : Manipuler le document / Page 195
Edition 3 | Chapitre 12 : Manipuler le document / Page 195
Exécution du script
Code source
<html><head><style type="text/css"> div { padding:5px; margin:5px; } div#notification { border:1px solid #999; background: #ccc; box-shadow: 3px 3px 3px #999; font-weight: bold; width:120px; } .fixed { position:fixed; } .top { top:10px; } .right { right:10px; } .animate { animation: animFromRight 0.5s 1; } @keyframes animFromRight { from { right: -150px; } to { right:10px; } }</style><title>Ajout d'une notification à l'écran</title></head><body> <h1>Notifications animées</h1> <p>Utilisation de createElement() et appendChild()</p> <p>Animation CSS via @keyframes</p></body><script type="text/javascript"> /* Après la balise </body>, le document est prêt à être manipulé */ var notification=document.createElement("div"); notification.setAttribute("id", "notification"); notification.innerHTML="Voici notre bloc de notification"; notification.className="fixed top right animate"; document.body.appendChild(notification);</script></html>
Troisième édition Tout JavaScript chez Dunod
En savoir plusSortie le 4 janvier 2023
Version papier 29€90
Format électronique 22€99.
Commandez en ligneLe graph des objets JavaScript
Chargement
en cours...
