先來一個簡單的
<style>
.sweepstake {
color: orange;
font-size: 24px;
font-weight: bold;
}
</style>
<script src="http://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按鈕就才得結果。