web
/
client-app


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
							<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0" />
        <title>检测性能</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="app" class="hc-app-animation-body">
            <div v-for="item in 190" :key='item' class="animation-mode item"
                :style="`background-color: ${getColor()}; animation-name: animation-${getIndex()};`"
                :id="`item-${item}`" @animationend="onAnimationend(item)"></div>
        </div>
        <script type="text/javascript" src="../js/uni.webview.1.5.5.js"></script>
        <script type="text/javascript" src="../js/vue-2.7.14.js"></script>
        <script>
            document.addEventListener('UniAppJSBridgeReady', () => {
                window.addEventListener('message', (event) => {
                    if (event.data.source === 'animation-web') {
                        uni.postMessage({
                            data: event.data
                        });
                    }
                });
            });
            //创建vue实例
            var app = new Vue({
                el: '#app',
                data: {
                    startTime: new Date(),
                    indexs: [],
                    colors: ['red', 'green', 'black', 'pink', 'orange', 'aqua', 'yellowgreen', 'blue']
                },
                mounted() {
                    let newArr = [];
                    for (let i = 0; i < 14; i++) {
                        newArr.push(i + 1)
                    }
                    this.indexs = newArr;
                },
                methods: {
                    getIndex() {
                        let arr = this.indexs
                        return arr[Math.floor((Math.random() * arr.length))];
                    },
                    getColor() {
                        let arr = this.colors;
                        return arr[Math.floor((Math.random() * arr.length))];
                    },
                    onAnimationend(i) {
                        if (i === 100) {
                            const duration = new Date() - this.startTime
                            window.postMessage({
                                type: 'on-animation',
                                source: 'animation-web',
                                data: duration
                            }, '*')
                        }
                    },
                }
            })
        </script>
    </body>
</html>