Ruby's Louvre

每天学习一点点算法

导航

avalon做的抽奖效果

先来一个简单的

        <style>
          .sweepstake {
             color: orange;
             font-size: 24px;
             font-weight: bold;
        }
        </style>

        <script src="https://files.cnblogs.com/rubylouvre/avalon2014123.js">

        </script>
        <script>
            var id
            var vm = avalon.define({
                $id: "test",
                number: 100,
                click: function() {
                    if (!id) {
                        id = setInterval(function() {
                            vm.number--
                            if (vm.number === 0) {
                                clearInterval(id)
                                id = null
                            }
                        }, 100)
                    }
                }
            })
        </script>

    <div ms-controller="test">
        <p class="sweepstake">{{number}}
        </p>
        <p><button type="button" ms-click="click">xxx</button></p>
    </div>

{{number}}

再来一个复杂的有动画效果的柏青哥

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js">

        </script>
        <style>
            .pachinko{
                height: 40px;  
                width: 245px;
                border: 5px  solid black;
                padding: 15px;
            }
            .pachinko .cell{
                margin-right: 20px;
                position: relative;
                float: left;
                border: 1px solid blueviolet;
                width: 30px;
                height: 40px;
                overflow:hidden
            }
            .pachinko .cell.last{
                margin-right: 0px;
            }
            .pachinko .cell .top{
                position: absolute;
                display: block;
                top: 0px;
                left: 0px;
                text-align: center;
                line-height: 40px;
                width: 30px;
                height: 40px;
            }
            .pachinko .cell .middle{
                position: absolute;
                display: block;
                top: -40px;
                left: 0px;
                text-align: center;
                line-height: 40px;
                width: 30px;
                height: 40px;
            }
        </style>
        <script>

            var id
            var vm = avalon.define({
                $id: "test",
                array: [{number: 9}, {number: 9}, {number: 9}, {number: 9}, {number: 9}],
                subtractOne: function(a) {
                    var a = a - 1
                    if (a < 0) {
                        a = 9
                    }
                    return a
                },
                distance: 0, //0-40 每个格子都高40px, 那么top的移动距离也是40, 其初始值为0
                start: function() {
                    for (var i = 0, n = vm.array.length; i < n; i++) {
                        vm.array[i].number = Math.floor(Math.random() * 10)
                    }
                    if (!id) {
                        id = setInterval(function() {
                            vm.distance += 5
                            if (vm.distance > 50) {
                                vm.distance = 0
                                for (var i = 0, n = vm.array.length; i < n; i++) {
                                    vm.array[i].number += 1
                                    if(vm.array[i].number > 9){
                                        vm.array[i].number = 0
                                    }
                                }
                            }
                        }, 20)
                    }

                },
                stop: function() {
                    if (id) {
                        clearInterval(id)
                        id = null
                    }
                    vm.distance = 0
                }
            })
        </script>
    </head>
    <body ms-controller="test">
        <div class="pachinko">
            <div ms-repeat="array" class="cell" ms-class="last: $last">
                <span class="top" ms-css-top="distance-40">{{subtractOne(el.number)}}</span>
                <span class="middle" ms-css-top="distance">{{el.number}}</span>
            </div>
        </div>
        <p><button type="button" ms-click="start">start</button><button type="button" ms-click="stop">stop</button></p>
    </body>
</html>
{{subtractOne(el.number)}} {{el.number}}

简单说一下原理，表面上只有五个格子，其实为了出现更好的过渡效果，总共有10个格子。其中有五个位于另五个的上方，然后动画就是改变格子的top样式值就行了。对应avalon，就是改vm中的distance属性值， 它会在定时器里面快速地递加，一直加到50就归零。而格子里面的值，在第一次点击时进行第一次洗牌，然后每当格子快跌出可视区后再递增一，当它大于10时，就变回0。这样不断变啊变，直到用户点了stop按钮就才得结果。

posted on 2014-12-03 15:12  司徒正美  阅读(3125)  评论(3)  编辑  收藏  举报