码迷,mamicode.com
首页 > Web开发 > 详细

angularjs入门案例 新玩具-中午吃神马

时间:2014-07-31 02:25:25      阅读:350      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   java   使用   os   

angularjs 是一个用来开发单页webAPP的mvv框架,由Google 开发,如果不知道angularjs 的可以先google 下

 

按照angularjs 的开发一般顺序先搭建好需要做的视图,然后准备数据,最后绑定事件处理业务逻辑,操作DOM事件用户和程序的交互。

 

1、开始搭建界面,使用bootstrap作为UI框架,可以快速搭建清爽的界面效果,顺便引入 angular.js jquery.js 和我们需要写的app.js 作为业务逻辑

 

 1 <!doctype html>
 2 <html ng-app="lottery"> 
 3 <head>
 4     <meta charset="utf-8">
 5     <title>中午吃什嘛!</title>
 6     <meta name="fragment" content="!">
 7     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 8     <meta name="description" content="">
 9     <meta name="viewport" content="width=device-width">
10 
11     <link rel="stylesheet" type="text/css" href="/js/sandbox/bootstrap-2.2.1/css/bootstrap.min.css">
12     
13     <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/250/osagsqji/angular.js"></script>
14     <script type="text/javascript" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script>
15     <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/250/osagsqji/app.js"></script>
16     
17     <style type="text/css">
18         td span{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;border:1px solid #ccc;cursor: pointer;}
19         .red{color:red;}
20         .view{height:300px;border:1px solid #ccc;}
21         .buffer{background: url(http://dev.haowa.com/img/ajax_loader.gif) center center no-repeat;}
22         .ground{width:400px;}
23         .ground .one{width:100px;height:100px;float:left;margin:5px;border:1px solid #ccc;text-align:center;text-align:center;line-height:100px;}
24         .ground .one.active{background:#357ebd;border:1px solid #A2FF9C;color:#fff;}
25         .result{color:#f60;}
26     </style>
27 
28 </head> 
29 <body buffer>
30     <p></p>
31     <div class="container" ng-controller="main">
32         <div class="row-fluid" >
33             <div class="span6">
34                 <h3 class="result">获取结果:{{result}}</h3>
35                 <h5>添加选项</h5>
36                   <form ng-submit="add()">
37                     <input type="text" ng-model="value" required size="30" placeholder="名称">
38                     <input class="btn" type="submit" value="添加到预选列表">
39                   </form>
40                 <!-- 列表 -->
41                 <ul>
42                     <li ng-repeat="one in data">
43                         <span>{{one.id}}</span>
44                         <input value="{{one.name}}" style="border:1px solid #fff" size="30">
45                         <a ng-click="del(one.id)">删除</a>
46                     </li>
47                 </ul>
48             </div>
49             <div class="span6">
50 
51                 <button class="btn" ng-click="start()" ngDisabled="is_start">开始计算</button>
52                 <p></p>
53                 <div class="ground">
54                     <div ng-repeat="one in data" id="{{one.id}}" class="one" ng-class="{‘active‘:one.status}" >{{one.name}}</div>
55                 </div>
56             </div>
57         </div>
58     </div>
59 </body>
60 </html>

 

开始写app.js 

"use strict"

var app = angular.module("lottery",[]);

app.controller(‘main‘, [‘$scope‘,‘$timeout‘, function($scope,$timeout){ 
    $scope.data = [
        {id:1,name:"火锅",status:0},
        {id:2,name:"中餐",status:0},
        {id:3,name:"泰国菜",status:0},
        {id:4,name:"韩国料理",status:0}
    ];
    $scope.is_start = false;

    $scope.result = "还没有开始!";

    /**
     * 添加
     * @author ln
     */
    $scope.add = function () {
        var last_id = getLastId();
        $scope.data.push({id:last_id,name:$scope.value,status:0})
    }

    /**
     * 删除
     * @author ln
     */
    $scope.del = function (id) {
        angular.forEach($scope.data,function(value, key) {
            if (id == value.id) {
                $scope.data.splice(key,1);
            };
        })
    }
            
    $scope.start = function() {
        if ($scope.is_start)
            alert("已经开始了!!");

        $scope.is_start = true;
        var queue = []; //滚动队列
        var circle = 3;
        var select_key = 0; //中奖的KEY

        //随机
        select_key = Math.floor(Math.random()*$scope.data.length);

        //滚动
        var next = function(key) {
            $scope.data[key].status = true;
            if ((key-1)>=0)
            $scope.data[key-1].status = false;
            if (key==0)
            $scope.data[$scope.data.length-1].status = false;

            var timer = $timeout(function() {
                // //结束
                if (circle <=0 && select_key == key) {
                    alert("搞定,答案是:"+$scope.data[key].name);
                    $scope.result = $scope.data[key].name;
                    $scope.is_start = false;
                    
                    return;
                };
                // //减少一圈
                if ($scope.data.length == key+1){
                    circle--;
                }
                if ($scope.data[key+1]) {
                    next(key+1)
                }else{
                    next(0)
                }
            },100);
        }
        next(0);
    }

    /******私有方法 ***********/
    function getLastId() {
        var id = 0;
        angular.forEach($scope.data,function(value, key) {
            if (id < value.id)
                id = value.id
        })
        return ++id;
    }
}]);   

这里数据

$scope.data = [
{id:1,name:"火锅",status:0},
{id:2,name:"中餐",status:0},
{id:3,name:"泰国菜",status:0},
{id:4,name:"韩国料理",status:0}
];

作为默认数据,根据 add del 方法实现增加、删除功能

最后关键的开始的滚动抽奖逻辑由 start 方法实现

 1     $scope.start = function() {
 2         if ($scope.is_start)
 3             alert("已经开始了!!");
 4 
 5         $scope.is_start = true;
 6         var queue = []; //滚动队列
 7         var circle = 3;
 8         var select_key = 0; //中奖的KEY
 9 
10         //随机
11         select_key = Math.floor(Math.random()*$scope.data.length);
12 
13         //滚动
14         var next = function(key) {
15             $scope.data[key].status = true;
16             if ((key-1)>=0)
17             $scope.data[key-1].status = false;
18             if (key==0)
19             $scope.data[$scope.data.length-1].status = false;
20 
21             var timer = $timeout(function() {
22                 // //结束
23                 if (circle <=0 && select_key == key) {
24                     alert("搞定,答案是:"+$scope.data[key].name);
25                     $scope.result = $scope.data[key].name;
26                     $scope.is_start = false;
27                     
28                     return;
29                 };
30                 // //减少一圈
31                 if ($scope.data.length == key+1){
32                     circle--;
33                 }
34                 if ($scope.data[key+1]) {
35                     next(key+1)
36                 }else{
37                     next(0)
38                 }
39             },100);
40         }
41         next(0);
42     }

 

runJs 代码演示

http://runjs.cn/detail/x7wntsvq



 

angularjs入门案例 新玩具-中午吃神马,布布扣,bubuko.com

angularjs入门案例 新玩具-中午吃神马

标签:des   style   blog   http   color   java   使用   os   

原文地址:http://www.cnblogs.com/linksgo2011/p/3879550.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!