可視化的 js：動態圖演示 Promises &amp; Async/Await 的過程

者：Lydia Hallie

譯者：xuying 全棧修煉

原文鏈接：https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke

轉發鏈接：https://mp.weixin.qq.com/s/AthCvtiTnPETkAnzyOLN1A

<template>
    <div class="number">
        <ul id="dataNums">
            <li v-for="(item,index) in list" :key="index">
                <div class="dataBoc">
                    <div class="tt"
                        :style="{transition:'all 2.5s ease-in-out 0s',top:'-'+item.top+'px'}">
                        <span v-for="(item2,index2) in numList" :key="index2">{{item2}}</span>

                    </div>

                </div>

            </li>

        </ul>

    </div>

</template>

s部分


export default {
        props:{
        	number:Number
        },
        data(){
            return{
                list:[],
                numList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '.']
            }
        },
        mounted(){
            this.scroll();
        },
        methods:{
            scroll(){
                this.list=this.number.toString().split('');
                let arr=[];
                this.list.forEach((value) => {
                    arr.push({
                        num:value,
                        top:0
                    })
                });
                this.list=arr;
                let Hei=parseFloat(getComputedStyle(document.getElementById("dataNums")).height);
                this.list.forEach((value,index) => {
                    setTimeout(()=>{
                        value.top=parseFloat((value.num*Hei)+(Hei*10));
                    },index*300);
                });
            }
        }
    }

css樣式

者：徐小夕

轉發鏈接：https://mp.weixin.qq.com/s/XHwOHf498t6ZNfDLiwZ6Xg

在線咨詢

上一篇：html中怎樣獲取當前元素的高度？
下一篇：前端開發：Web多媒體播放器，提升網站的又一逼格

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

可視化的 js：動態圖演示 Promises &amp;amp; Async/Await 的過程

s部分

css樣式

您的項目需求

可視化的 js：動態圖演示 Promises & Async/Await 的過程