interface Web
js tutoriel
Vue réalise une loterie de numéros de téléphone mobile, partage d'exemples d'animation à défilement haut et bas
Vue réalise une loterie de numéros de téléphone mobile, partage d'exemples d'animation à défilement haut et bas
Cet article présente principalement l'exemple de Vue implémentant une animation de défilement vers le haut et vers le bas pour la loterie des numéros de téléphone mobile. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde.
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.css" rel="external nofollow" />
<style type="text/css">
.in-out-translate-demo-wrapper {
position: relative;
height: 58px;
}
.in-out-translate-demo-wrapper button {
position: absolute;
}
.in-out-translate-fade-enter-active,
.in-out-translate-fade-leave-active {
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
}
.in-out-translate-fade-enter,
.in-out-translate-fade-leave-active {
opacity: 0;
}
.in-out-translate-fade-enter {
transform: translateX(54px);
-webkit-transform: translateX(54px);
-moz-transform: translateX(54px);
-o-transform: translateX(54px);
}
.in-out-translate-fade-leave-active {
transform: translateX(-54px);
-webkit-transform: translateX(-54px);
-moz-transform: translateX(-54px);
-o-transform: translateX(-54px);
}
.down-up-translate-fade-enter-active,
.down-up-translate-fade-leave-active {
transition: all .1s;
-webkit-transition: all .1s;
-moz-transition: all .1s;
-o-transition: all .1s;
}
.down-up-translate-fade-enter,
.down-up-translate-fade-leave-active {
opacity: 1;
}
.down-up-translate-fade-enter {
/*transform: translateY(40px);
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-o-transform: translateY(40px);*/
}
.down-up-translate-fade-leave-active {
transform: translateY(-50px);
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-o-transform: translateY(-50px);
}
.num {
/*position: relative;*/
width: 100%;
height: 50px;
overflow: hidden;
}
.num .span {
/*position: absolute;*/
background: #0062CC;
color: #fff;
width: 30px;
height: 50px;
line-height: 50px;
font-size: 40px;
font-weight: bold;
float: left;
margin-right: 2px;
}
.num .span p {
background: #0062CC;
color: #fff;
width: 30px;
height: 50px;
line-height: 50px;
font-size: 40px;
font-weight: bold;
}
</style>
</head>
<body>
<p id="demo" class="demo">
<p class="in-out-translate-demo-wrapper mui-text-center">
<transition name="in-out-translate-fade">
<button v-if="show" v-on:click="start" key="start" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">开始</button>
<button v-else key="end" v-on:click="end" type="button" class="mui-btn mui-btn-yellow mui-btn-outlined">结束</button>
</transition>
</p>
<p class="num mui-text-center">
<p class="span">
<p>1</p>
</p>
<p class="span">
<transition name="down-up-translate-fade">
<p :key="i">{{i}}</p>
</transition>
</p>
<p class="span">
<transition name="down-up-translate-fade">
<p :key="j">{{j}}</p>
</transition>
</p>
<p class="span">
<p>*</p>
</p>
<p class="span">
<p>*</p>
</p>
<p class="span">
<p>*</p>
</p>
<p class="span">
<p>*</p>
</p>
<p class="span">
<transition name="down-up-translate-fade">
<p :key="k">{{k}}</p>
</transition>
</p>
<p class="span">
<transition name="down-up-translate-fade">
<p :key="l">{{l}}</p>
</transition>
</p>
<p class="span">
<transition name="down-up-translate-fade">
<p :key="i">{{i}}</p>
</transition>
</p>
<p class="span">
<transition name="down-up-translate-fade">
<p :key="j">{{j}}</p>
</transition>
</p>
</p>
</p>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>-->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
show: true,
i: 0,
j:0,
k: 0,
l: 0,
interval: null
},
methods: {
start: function() {
this.show = !this.show
var _this = this;
if(!this.interval) {
this.interval = setInterval(function() {
_this.i = Math.floor(Math.random() * 10);
_this.j = Math.floor(Math.random() * 10);
_this.k = Math.floor(Math.random() * 10);
_this.l = Math.floor(Math.random() * 10);
}, 10)
}
},
end: function() {
this.show = !this.show
clearInterval(this.interval)
this.interval = null
}
}
})
</script>
</body>Recommandations associées :
Exemple de fonction de loterie PHP
Exemple de php, jQuery et Mysql implémentant la loterie programme
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quelles sont les raisons pour lesquelles un téléphone portable a un numéro vide ?
Feb 21, 2023 pm 02:26 PM
Les raisons pour lesquelles le numéro de téléphone mobile est vide : 1. Le numéro de téléphone mobile a été mis sur liste noire par l'autre partie. 2. L'autre partie a configuré la fonction de transfert d'appel et le numéro transféré est une plage de numéros de téléphone mobile non conventionnelle, telle que comme 11 chiffres pressés de manière aléatoire ; 3. Le numéro est erroné ; 4. Le numéro virtuel a été annulé et est en période de gel de récupération. 6. La panne du système de l'opérateur entraînera un numéro vide du téléphone mobile de l'utilisateur ; de manière régionale et de portée ; 7. Le signal n'est pas bon ; 8. Le numéro Le format est incorrect ; 9. Défaillance de la carte du téléphone portable ;
Comment vérifier ce qui est enregistré avec un numéro de téléphone mobile « Explication détaillée : méthode de requête APP pour l'enregistrement du numéro de téléphone mobile »
Feb 07, 2024 am 08:24 AM
Je ne sais pas si vous vivez une telle expérience. Votre téléphone mobile reçoit souvent des messages texte inexplicables, des informations d'inscription sur certains sites Web ou d'autres informations de vérification. En fait, notre numéro de téléphone mobile peut être lié à de nombreux sites Web inconnus, et nous. Même si vous ne le savez pas, ce que je vais partager avec vous aujourd'hui est de vous apprendre à dissocier tous les sites Web inconnus en un seul clic. Étape 1 : Ouvrez la plateforme de service de numéros Cette technique est très pratique. Les étapes sont les suivantes : ouvrez WeChat, cliquez sur l'icône plus dans la zone de recherche, sélectionnez Ajouter un ami, puis entrez la plate-forme de service de numéro de code pour effectuer la recherche. Nous pouvons voir qu'il existe une plate-forme de service de numéros. Bien sûr, elle appartient à une institution publique et a été lancée par l'Institut national des technologies de l'information et des communications. Elle peut aider tout le monde à dissocier les informations sur les numéros de téléphone portable en un seul clic. Étape 2 : Vérifiez si le téléphone a été marqué pour moi
Comment changer le numéro de téléphone portable d'Amap - Introduction détaillée à la méthode de changement de numéro de mobile d'Amap
Mar 20, 2024 pm 08:41 PM
Amap est apprécié des utilisateurs pour son positionnement précis et ses fonctions riches. Cependant, pendant l'utilisation, nous pouvons parfois être amenés à modifier le numéro de téléphone mobile associé pour garantir l'exactitude des informations personnelles et des services. Alors, comment changer le numéro de téléphone portable d’Amap ? L'éditeur a compilé quelques informations pertinentes, venez jeter un œil avec moi ! Comment changer le numéro de téléphone portable sur Amap ? Réponse : [AMAP] - [Mon] - [Icône Paramètres] - [Compte et sécurité] - [Numéro de téléphone mobile] - [Modifier] - [Étape suivante]. Étapes spécifiques : 1. Ouvrez d'abord le logiciel Amap et entrez dans la page d'accueil. Nous devons cliquer sur [My] dans le coin inférieur droit ; 2. Ensuite, vous pouvez voir certaines fonctions associées dans My One Second. Ici, nous cliquons sur le coin supérieur droit. . [Icône Paramètres] dans le coin ;
Comment vérifier l'état d'utilisation du numéro de téléphone mobile ? Comment vérifier la durée d'utilisation du numéro de téléphone mobile ?
Mar 07, 2024 pm 04:30 PM
Avec les progrès continus de la technologie de communication mobile, les numéros de téléphone mobile sont devenus un outil de communication indispensable dans notre vie quotidienne. Parfois, nous devons vérifier l'état d'utilisation d'un numéro de téléphone mobile, par exemple vérifier si le numéro est hors service ou en retard. 1. Comment vérifier l'état d'utilisation du numéro de téléphone mobile ? Contacter le service client de l'opérateur est le moyen le plus direct de vérifier l'état d'utilisation de votre numéro de téléphone mobile. Différents opérateurs peuvent avoir des méthodes de demande différentes, mais cela peut généralement être accompli en appelant la hotline du service client de l'opérateur. Lorsque vous parlez au personnel du service client, il vous suffit de fournir le numéro de téléphone mobile que vous devez interroger, et le personnel du service client vous fournira des informations détaillées sur l'état d'utilisation. Par conséquent, si vous souhaitez connaître la situation spécifique d'un certain numéro de téléphone mobile, vous pouvez obtenir des informations pertinentes en appelant la hotline du service client de l'opérateur. Il y a
Comment modifier la liaison du numéro de téléphone mobile dans la boîte aux lettres QQ - Comment modifier la liaison du numéro de téléphone mobile dans la boîte aux lettres QQ
Mar 04, 2024 pm 03:46 PM
De nombreux amis ne savent pas comment modifier la liaison du numéro de téléphone portable dans la boîte aux lettres QQ, l'éditeur ci-dessous partagera donc la méthode de modification de la liaison du numéro de téléphone portable dans la boîte aux lettres QQ. Suivons l'éditeur pour y jeter un œil. être utile à tout le monde. Étape 1 : Ouvrez d’abord la boîte aux lettres QQ et sélectionnez les paramètres ci-dessus, comme indiqué ci-dessous. Étape 2 : Sélectionnez l'option de compte dans les paramètres, comme indiqué ci-dessous. Étape 3 : Choisissez de vous déconnecter immédiatement, comme indiqué ci-dessous. Étape 4 : Après vous être déconnecté, choisissez d'enregistrer un numéro de téléphone mobile et un compte de messagerie. Étape 5 : Choisissez d'enregistrer d'autres comptes dans l'interface qui apparaît, comme indiqué ci-dessous. Étape 6 : Utilisez le nouveau numéro de téléphone mobile selon les invites et envoyez des messages texte, comme indiqué ci-dessous. Étape 7 : Une fois l'envoi terminé, la modification est réussie. Ce qui précède est l'intégralité du contenu sur la façon de modifier la liaison du numéro de téléphone mobile dans la boîte aux lettres QQ, présentée par l'éditeur, j'espère.
Comment implémenter le défilement vers une position d'élément spécifiée en JavaScript ?
Oct 22, 2023 am 08:12 AM
Comment implémenter la fonction de défilement vers une position d'élément spécifiée en JavaScript ? Dans une page Web, lorsque nous devons concentrer l'attention de l'utilisateur sur une position d'élément spécifique, nous pouvons utiliser JavaScript pour implémenter la fonction de défilement jusqu'à la position d'élément spécifiée. Cet article présentera comment implémenter cette fonction via JavaScript et fournira des exemples de code correspondants. Tout d’abord, nous devons obtenir les informations de position de l’élément cible. Vous pouvez utiliser Element.getBoundingClient
Comment vérifier l'emplacement du numéro de téléphone mobile avec PHP
Oct 20, 2022 pm 03:00 PM
Comment interroger l'emplacement d'un numéro de téléphone mobile en PHP : 1. Demandez l'API pour interroger l'emplacement d'un numéro de téléphone mobile 2. Recherchez les informations de localisation d'un numéro de téléphone mobile en fonction du numéro de téléphone mobile ou des 7 premiers chiffres ; du numéro de mobile ; 3. Grâce à la méthode "function juheHttpRequest($url, $params = false, $ispost = 0){...}" demande à l'interface de renvoyer le contenu.
Surveiller le comportement de défilement des iframes
Feb 18, 2024 pm 08:40 PM
Comment surveiller le défilement d'une iframe nécessite des exemples de code spécifiques Lorsque nous utilisons la balise iframe pour intégrer d'autres pages Web dans une page Web, nous devons parfois effectuer certaines opérations spécifiques sur le contenu de l'iframe. L'un des besoins courants est d'écouter l'événement de défilement de l'iframe afin que le code correspondant puisse être exécuté lorsque le défilement se produit. Ce qui suit explique comment utiliser JavaScript pour surveiller le défilement d'une iframe et fournit des exemples de code spécifiques à titre de référence. Récupérer l'élément iframe Tout d'abord, nous avons besoin
