Voici un effet spécial par cour de cour JavaScript, l'effet est le suivant:
Non seulement l'effet de l'image ci-dessous peut apparaître, mais la figure peut également être tournée avec la souris. Ce n'est qu'un exemple simple et non modifié. Sur la base de cet exemple, cela peut rendre la parade nuptiale plus amusante. Hommes réticents, pouvez-vous publier une telle page Web à votre petit loli? Super.
Publier le code:
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> Insérer le titre ici </TITME>
<style type = "text / css">
corps{
Border: 1px Solide rouge;
Largeur: 1000px;
Hauteur: 1000px;
marge: 0px automatique;
rembourrage: 0px;
Couleur: vert;
}
/ *
Faites glisser l'objet à partir du flux de document, en utilisant des propriétés telles que la gauche, la droite, le haut, le bas, etc.
C'est le plus proche de l'objet parent le plus positionné pour le positionnement absolu. Si un tel objet parent n'existe pas,
Par objet corporel. Et sa cascade est définie par l'attribut z-index
* /
div {
Position: absolue;
}
</ style>
<script type = "text / javascript">
// Pourquoi devrais-je utiliser Onload? Parce que lorsque j'initialise la div de l'horloge dans le code JavaScript, la page de débogage a constaté qu'il n'y avait pas d'implémentation
// Plus tard, j'ai découvert la raison, le code HTML a été analysé de l'avant en arrière. Lorsque vous analysez d'abord le code javascript, allez au corps
// Lors de l'ajout de nœuds enfants, le corps non résolu ne peut être trouvé. Vous devez donc d'abord analyser le corps. Il y a deux méthodes, une est
La méthode d'écriture de //, une autre façon peut être d'ajouter la méthode Onload à la balise corporelle.
window.onload = function () {
init ();
};
// Définissez un tableau Div pour stocker 12 div
// En raison de la relation entre les 12 positions div, déterminez d'abord le point et le rayon pour calculer la position du div
var divs = [];
var lovebaby = ["i", "love", "vous", "vous", "bao", "bei", "love", "love", "me", "wan", "wan", "wan", "wan" "wan" "wan" "wan" "w" Un "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" w " Un "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" "wan" "wan" "" wan "" wan "" wan "" wan "" "wan" "" w " Un "" "wan" "" wan "" "wan" "" wan "" "wan" "" wan "" "wan" "" wan "" "wan" "" wan "" "wan" "" wan "" "wan" "wan" "" wan "" "wan" "" "" "
var cx = 300;
var CY=300;//----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var r = 150;
var divcenterode; // La position du point central doit être contrôlée et les variables globales doivent être définies
// définir une fonction initialisée
fonction init () {
// Créer un div à la position du point central (vous pouvez écrire l'objet de parade nuptiale)
divcenterode = document.CreateElement ("div");
divcenterode.innerhtml = "Tingting, épouser-moi!";
Document.Body.ApendChild (Divcenternode);
divcenterode.style.left = (cx-50) + "px";
divcenterode.style.top = (cy-30) + "px";
// Créez 12 divs pour former une horloge interdite et la placer dans le corps
pour (var x = 1; x <= 12; x ++) {
// Créer un div
var divnode = document.CreateElement ("div");
divnode.innerhtml = lovebaby [x-1];
// L'objet Body n'a pas besoin d'être obtenu comme d'autres objets, et la bibliothèque JS a été encapsulée.
document.body.appendChild (divnode);
divs.push (divnode);
}
// Chaque fois que StartClock () est commencé à repositionner l'élément div
/ *
En fait, pour réaliser l'effet de rotation, il est nécessaire de compenser en continu, ou
Repositionnement, mais en boucle, vous ne pouvez pas contrôler le temps qu'il faut pour démarrer la fonction, puis
À l'heure actuelle, l'objet Window fournit une méthode.
* /
startClock ();
}
// décalage de div
Var Offset = 0; // Degré Offset
// Définissez une fonction pour positionner et faire pivoter la position séparément
fonction startClock () {
pour (var x = 1; x <= 12; x ++) {
var div = divs [x-1];
// le degré de chaque numéro
var Dushu = 30 * x + décalage;
// Valeur d'angle * math.pi / 180 = valeur de rayon
var divleft = cx + r * math.sin (dushu * math.pi / 180);
div.style.left = divleft + "px";
var divtop = cy-r * math.cos (dushu * math.pi / 180);
div.style.top = divtop + "px";
}
Offset + = 50;
// un certain intervalle, rappelez cette fonction
// Une expression est calculée après la valeur de la milliseconde spécifiée. Le premier paramètre est l'expression, le deuxième paramètre est le temps
setTimeout (StartClock, 80); // Méthode d'objet Window
}
// Définissez cette horloge à différentes positions alors que la souris se déplace
fonction Clockmove (événement) {
Cx = event.clientx; // la coordonnée x de la position de la souris
Cy = event.clienty; // la coordonnée y de la position de la souris
divcenterode.style.left = (cx-50) + "px";
divcenterode.style.top = (cy-30) + "px";
}
</cript>
</ head>
<corps onMouseMove = "Clockmove (événement)">
<! -
1. Afficher 12 numéros en cercle
1 / Créez 12 divs, attribuez respectivement les valeurs 1-12
2 / Localisez 12 Divs et forment un cercle.
->
</docy>
</html>
Je voulais à l'origine faire un écran d'horloge qui pourrait tourner et courir. Donc, la dénomination dans le code est liée à l'horloge, donc je ne serai pas confus, mon cher. Débutants en JavaScript, je pense que JavaScript est très puissant.