Web Front-end
JS Tutorial
Vue implements mobile phone number lottery up and down scrolling animation example sharing
Vue implements mobile phone number lottery up and down scrolling animation example sharing
This article mainly introduces the example of Vue implementing the up and down scrolling animation of mobile phone number lottery. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.
<!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>Related recommendations:
PHP, jQuery and Mysql Implement Lottery Program Example
How to implement the algorithm for calculating lottery probability in php and share it
The above is the detailed content of Vue implements mobile phone number lottery up and down scrolling animation example sharing. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1390
52
What are the reasons why a mobile phone has an empty number?
Feb 21, 2023 pm 02:26 PM
The reasons why the mobile phone number is empty: 1. The mobile phone number has been blacklisted by the other party; 2. The other party has set up the call transfer function, and the transferred number is an unconventional mobile phone number range, such as 11 digits pressed randomly; 3. The number is wrong ; 4. Virtual number; 5. The number has been canceled and is in the recovery freezing period; 6. The operator's system failure will cause the user's mobile phone to have an empty number in a regional and range manner; 7. The signal is not good; 8. The number The format is wrong; 9. Mobile phone card failure; 10. Special ringtone.
How to check what is registered with a mobile phone number 'Detailed explanation: APP query method for mobile phone number registration'
Feb 07, 2024 am 08:24 AM
I don’t know if you have such an experience. Your mobile phone often receives some inexplicable text messages, or registration information for some websites or other verification information. In fact, our mobile phone number may be bound to many unfamiliar websites, and we ourselves Even if you don’t know, what I will share with you today is to teach you how to unbind all unfamiliar websites with one click. Step 1: Open the number service platform. This technique is very practical. The steps are as follows: Open WeChat, click the plus icon in the search box, select Add Friend, and then enter the code number service platform to search. We can see that there is a number service platform. Of course, it belongs to a public institution and was launched by the National Institute of Information and Communications Technology. It can help everyone unbind mobile phone number information with one click. Step 2: Check whether the phone has been marked for me
How to change the mobile phone number of Amap - Detailed introduction to the method of changing the mobile number of Amap
Mar 20, 2024 pm 08:41 PM
Amap is loved by users for its precise positioning and rich functions. However, during use, sometimes we may need to change the bound mobile phone number to ensure the accuracy of personal information and services. So, how to change the mobile phone number of Amap? The editor has compiled some relevant information, come and take a look with me! How to change the mobile phone number on Amap? Answer: [Amap]-[My]-[Settings Icon]-[Account and Security]-[Mobile Number]-[Change]-[Next Step]. Specific steps: 1. First open the Amap software and enter the home page. We need to click [My] in the lower right corner; 2. Then you can see some related functions in My One Second. Here we click on the upper right corner. [Settings icon] in the corner;
How to check the usage status of mobile phone number? How to check the usage time of mobile phone number?
Mar 07, 2024 pm 04:30 PM
With the continuous advancement of mobile communication technology, mobile phone numbers have become an indispensable communication tool in our daily lives. Sometimes, we need to check the usage status of a mobile phone number, such as verifying whether the number is out of service or in arrears. 1. How to check the usage status of mobile phone number? Contacting the operator's customer service is the most direct way to check the usage status of your mobile phone number. Different operators may have different inquiry methods, but this can usually be accomplished by calling the operator's customer service hotline. When talking to customer service staff, you only need to provide the mobile phone number you need to query, and the customer service staff will provide you with detailed usage status information. Therefore, if you want to know the specific situation of a certain mobile phone number, you can get relevant information by calling the operator's customer service hotline. There are
How to change the mobile phone number binding in QQ mailbox - How to change the mobile phone number binding in QQ mailbox
Mar 04, 2024 pm 03:46 PM
Many friends don’t know how to change the mobile phone number binding in QQ mailbox, so the editor below will share the method of changing the mobile phone number binding in QQ mailbox. Let’s follow the editor to take a look. I believe it will be helpful to everyone. Step 1: First open the QQ mailbox and select the settings above, as shown below. Step 2: Select the account option in the settings, as shown below. Step 3: Choose to log out immediately, as shown below. Step 4: After logging out, choose to register a mobile phone number and email account. Step 5: Choose to register other accounts in the interface that appears, as shown below. Step 6: Use the new mobile phone number according to the prompts and send text messages, as shown below. Step 7: After the sending is completed, the change is successful. The above is the entire content of how to change the mobile phone number binding in QQ mailbox brought to you by the editor. I hope
How to implement scrolling to a specified element position in JavaScript?
Oct 22, 2023 am 08:12 AM
How to implement the function of scrolling to a specified element position in JavaScript? In a web page, when we need to focus the user's line of sight to a specific element position, we can use JavaScript to implement the function of scrolling to the specified element position. This article will introduce how to implement this function through JavaScript and provide corresponding code examples. First, we need to obtain the position information of the target element. You can use Element.getBoundingClient
How to check the location of mobile phone number with PHP
Oct 20, 2022 pm 03:00 PM
How to query the location of a mobile phone number in PHP: 1. Request the API for querying the location of a mobile phone number; 2. Query the location information of a mobile phone number based on the mobile phone number or the first 7 digits of the mobile number; 3. Through "function juheHttpRequest($url, $params = false, $ispost = 0){...}" method requests the interface to return the content.
Monitor iframe scrolling behavior
Feb 18, 2024 pm 08:40 PM
How to monitor the scrolling of an iframe requires specific code examples. When we use the iframe tag to embed other web pages in a web page, sometimes we need to perform some specific operations on the content in the iframe. One of the common needs is to listen for the scroll event of the iframe so that the corresponding code can be executed when the scroll occurs. The following will introduce how to use JavaScript to monitor the scrolling of an iframe, and provide specific code examples for reference. Get the iframe element First, we need
