Web-Frontend
js-Tutorial
Vue realisiert das Auf- und Abscrollen von Animationsbeispielen für die Lotterie von Mobiltelefonnummern
Vue realisiert das Auf- und Abscrollen von Animationsbeispielen für die Lotterie von Mobiltelefonnummern
In diesem Artikel wird hauptsächlich das Beispiel vorgestellt, wie Vue eine Auf- und Ab-Scroll-Animation für die Lotterie von Mobiltelefonnummern implementiert. Es hat einen gewissen Referenzwert. Ich hoffe, es kann jedem helfen.
<!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>Verwandte Empfehlungen:
Beispiel einer PHP-Lotteriefunktion
Beispiel einer PHP-, jQuery- und MySQL-Implementierung der Lotterie Programm
Das obige ist der detaillierte Inhalt vonVue realisiert das Auf- und Abscrollen von Animationsbeispielen für die Lotterie von Mobiltelefonnummern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1392
52
Was sind die Gründe, warum ein Mobiltelefon eine leere Nummer hat?
Feb 21, 2023 pm 02:26 PM
Die Gründe, warum die Mobiltelefonnummer leer ist: 1. Die Mobiltelefonnummer wurde von der anderen Partei auf die schwarze Liste gesetzt. 2. Die andere Partei hat die Anrufweiterleitungsfunktion eingerichtet und die übertragene Nummer ist ein unkonventioneller Mobiltelefonnummernbereich, z als 11 Ziffern zufällig gedrückt; 3. Die Nummer ist falsch; 5. Die Nummer wurde storniert und befindet sich in der Wiederherstellungsphase. 6. Der Systemausfall des Benutzers führt dazu, dass die Nummer leer ist 7. Das Signal ist nicht gut. 8. Das Format ist falsch. 10. Ein spezieller Klingelton.
So überprüfen Sie, was mit einer Mobiltelefonnummer registriert ist „Detaillierte Erklärung: APP-Abfragemethode für die Registrierung von Mobiltelefonnummern'
Feb 07, 2024 am 08:24 AM
Ich weiß nicht, ob Sie eine solche Erfahrung machen. Ihr Mobiltelefon empfängt häufig unerklärliche Textnachrichten oder Registrierungsinformationen für einige Websites oder andere Verifizierungsinformationen. Tatsächlich ist unsere Mobiltelefonnummer möglicherweise an viele unbekannte Websites gebunden uns selbst Auch wenn Sie es nicht wissen, möchte ich Ihnen heute beibringen, wie Sie alle unbekannten Websites mit einem Klick entbinden können. Schritt 1: Öffnen Sie die Nummerndienstplattform. Diese Technik ist sehr praktisch. Die Schritte sind wie folgt: Öffnen Sie WeChat, klicken Sie auf das Pluszeichen im Suchfeld, wählen Sie „Freund hinzufügen“ und geben Sie dann die zu suchende Codenummer der Serviceplattform ein. Wir können sehen, dass es eine Nummerndienstplattform gibt, die einer öffentlichen Einrichtung gehört und vom Nationalen Institut für Informations- und Kommunikationstechnologie ins Leben gerufen wurde. Sie kann jedem helfen, Mobiltelefonnummerninformationen mit einem Klick zu lösen. Schritt 2: Überprüfen Sie, ob das Telefon für mich markiert wurde
So ändern Sie die Mobiltelefonnummer von Amap – Detaillierte Einführung in die Methode zum Ändern der Mobiltelefonnummer von Amap
Mar 20, 2024 pm 08:41 PM
Amap wird von Benutzern wegen seiner präzisen Positionierung und seinen umfangreichen Funktionen geliebt. Allerdings kann es während der Nutzung manchmal erforderlich sein, die gebundene Mobiltelefonnummer zu ändern, um die Richtigkeit der persönlichen Informationen und Dienste sicherzustellen. Wie kann man also die Mobiltelefonnummer von Amap ändern? Die Redaktion hat einige relevante Informationen zusammengestellt, schauen Sie mit mir vorbei! Wie ändere ich die Mobiltelefonnummer auf Amap? Antwort: [AMAP] – [Mein] – [Einstellungssymbol] – [Konto und Sicherheit] – [Mobiltelefonnummer] – [Ändern] – [Nächster Schritt]. Spezifische Schritte: 1. Öffnen Sie zunächst die Amap-Software und rufen Sie die Startseite auf. Klicken Sie dann in der oberen rechten Ecke auf „Mein“. . [Einstellungssymbol] in der Ecke;
Wie kann ich den Nutzungsstatus der Mobiltelefonnummer überprüfen? Wie kann ich die Nutzungsdauer einer Mobiltelefonnummer überprüfen?
Mar 07, 2024 pm 04:30 PM
Mit der kontinuierlichen Weiterentwicklung der mobilen Kommunikationstechnologie sind Mobiltelefonnummern zu einem unverzichtbaren Kommunikationsmittel in unserem täglichen Leben geworden. Manchmal müssen wir den Nutzungsstatus einer bestimmten Mobiltelefonnummer überprüfen, z. B. um festzustellen, ob die Nummer außer Betrieb ist oder im Rückstand ist. 1. Wie kann ich den Nutzungsstatus der Mobiltelefonnummer überprüfen? Die Kontaktaufnahme mit dem Kundendienst des Betreibers ist die direkteste Möglichkeit, den Nutzungsstatus Ihrer Mobiltelefonnummer zu überprüfen. Verschiedene Betreiber verfügen möglicherweise über unterschiedliche Anfragemethoden. Dies kann jedoch normalerweise durch einen Anruf bei der Kundendienst-Hotline des Betreibers erreicht werden. Im Gespräch mit dem Kundendienst müssen Sie lediglich die Mobiltelefonnummer angeben, die Sie abfragen möchten, und der Kundendienst wird Ihnen detaillierte Informationen zum Nutzungsstatus zukommen lassen. Wenn Sie also die konkrete Situation einer bestimmten Mobiltelefonnummer erfahren möchten, können Sie relevante Informationen erhalten, indem Sie die Kundendienst-Hotline des Betreibers anrufen. Es gibt
So ändern Sie die Mobiltelefonnummernbindung im QQ-Postfach - So ändern Sie die Mobiltelefonnummernbindung im QQ-Postfach
Mar 04, 2024 pm 03:46 PM
Viele Freunde wissen nicht, wie man die Mobiltelefonnummernbindung in der QQ-Mailbox ändert. Ich glaube, dass dies der Fall ist allen hilfreich sein. Schritt 1: Öffnen Sie zunächst das QQ-Postfach und wählen Sie die oben genannten Einstellungen aus, wie unten gezeigt. Schritt 2: Wählen Sie in den Einstellungen die Kontooption aus, wie unten gezeigt. Schritt 3: Wählen Sie die sofortige Abmeldung, wie unten gezeigt. Schritt 4: Nachdem Sie sich abgemeldet haben, können Sie eine Mobiltelefonnummer und ein E-Mail-Konto registrieren. Schritt 5: Wählen Sie die Registrierung anderer Konten in der angezeigten Benutzeroberfläche aus, wie unten gezeigt. Schritt 6: Verwenden Sie die neue Mobiltelefonnummer gemäß den Anweisungen und senden Sie Textnachrichten, wie unten gezeigt. Schritt 7: Nachdem der Versand abgeschlossen ist, ist die Änderung erfolgreich. Das Obige ist hoffentlich der gesamte Inhalt zum Ändern der Mobiltelefonnummernbindung im QQ-Postfach
Wie implementiert man das Scrollen zu einer bestimmten Elementposition in JavaScript?
Oct 22, 2023 am 08:12 AM
Wie implementiert man die Funktion zum Scrollen zu einer bestimmten Elementposition in JavaScript? Wenn wir auf einer Webseite die Aufmerksamkeit des Benutzers auf eine bestimmte Elementposition lenken müssen, können wir JavaScript verwenden, um die Funktion zum Scrollen zur angegebenen Elementposition zu implementieren. In diesem Artikel wird die Implementierung dieser Funktion über JavaScript vorgestellt und entsprechende Codebeispiele bereitgestellt. Zuerst müssen wir die Positionsinformationen des Zielelements erhalten. Sie können Element.getBoundingClient verwenden
So überprüfen Sie den Standort der Mobiltelefonnummer mit PHP
Oct 20, 2022 pm 03:00 PM
So fragen Sie den Standort einer Mobiltelefonnummer in PHP ab: 1. Fordern Sie die API zum Abfragen des Standorts einer Mobiltelefonnummer an. 2. Fragen Sie die Standortinformationen einer Mobiltelefonnummer basierend auf der Mobiltelefonnummer oder den ersten 7 Ziffern ab 3. Über die Methode „function juheHttpRequest($url, $params = false, $ispost = 0){...}“ wird die Schnittstelle aufgefordert, den Inhalt zurückzugeben.
Überwachen Sie das Scrollverhalten von Iframes
Feb 18, 2024 pm 08:40 PM
Um das Scrollen eines Iframes zu überwachen, sind bestimmte Codebeispiele erforderlich. Wenn wir das Iframe-Tag verwenden, um andere Webseiten in eine Webseite einzubetten, müssen wir manchmal bestimmte Vorgänge für den Inhalt im Iframe ausführen. Eine der häufigsten Anforderungen besteht darin, auf das Scroll-Ereignis des Iframes zu warten, damit der entsprechende Code beim Scrollen ausgeführt werden kann. Im Folgenden wird die Verwendung von JavaScript zum Überwachen des Scrollens eines Iframes vorgestellt und spezifische Codebeispiele als Referenz bereitgestellt. Holen Sie sich zuerst das iframe-Element
