12.随机取名

 1 <!DOCTYPE html>
 2 <html ng-app="myApp" ng-controller="myCtrl" >
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>T45-随机取名</title>
 6     <script src="js/angular.js" type="text/javascript"></script>
 7     <style type="text/css">
 8         .show{
 9 
10             200px;
11             height:80px;
12             background-color: #a6beee;
13             font:bold 28px 宋体;
14             color: #ff1312;
15             position: absolute;
16                 top:30px;
17             left:500px;
18 
19         }
20         button{
21             padding:3px;
22             color: #55e259;
23             font-size:22px;
24             background-color: #c11314;
25             position: absolute;
26             left:50px;
27         }
28         .name{
29             position: absolute;
30             left:50px;
31             bottom:5px;
32         }
33     </style>
34 
35 
36 </head>
37 <body>
38 <div class="show">
39 <button ng-click="change()">随机取名</button>
40 
41 <div class="name"><span ng-bind="a"></span><span ng-bind="b"></span></div>
42 
43 
44 </div>
45 </body>
46 
47 <script type="text/javascript">
48     var app=angular.module("myApp",[]);
49     app.controller("myCtrl", function ($scope) {
50 
51         $scope.change = function () {
52             $scope.firstName=["秦","楚","萧","苏"];
53             var i=Math.floor(Math.random()*4);
54             $scope.a = $scope.firstName[i];
55 
56 
57 
58             $scope.lastName=["风","云","雷","枫","岚","月","霜","雪","雨"];
59             var j=Math.floor(Math.random()*6);
60             $scope.b=$scope.lastName[j];
61 
62         }
63     });
64 
65 
66 
67 
68 </script>
69 
70 </html>

View Code


<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myCtrl" >
<head lang="en">
    <meta charset="UTF-8">
    <title>T45-随机取名</title>
    <script src="js/angular.js" type="text/javascript"></script>
    <style type="text/css">
        .show{

            200px;
            height:80px;
            background-color: #a6beee;
            font:bold 28px 宋体;
            color: #ff1312;
            position: absolute;
                top:30px;
            left:500px;

        }
        button{
            padding:3px;
            color: #55e259;
            font-size:22px;
            background-color: #c11314;
            position: absolute;
            left:50px;
        }
        .name{
            position: absolute;
            left:50px;
            bottom:5px;
        }
    </style>


</head>
<body>
<div class="show">
<button ng-click="change()">随机取名</button>

<div class="name"><span ng-bind="a"></span><span ng-bind="b"></span></div>


</div>
</body>

<script type="text/javascript">
    var app=angular.module("myApp",[]);
    app.controller("myCtrl", function ($scope) {

        $scope.change = function () {
            $scope.firstName=["秦","楚","萧","苏"];
            var i=Math.floor(Math.random()*4);
            $scope.a = $scope.firstName[i];



            $scope.lastName=["风","云","雷","枫","岚","月","霜","雪","雨"];
            var j=Math.floor(Math.random()*6);
            $scope.b=$scope.lastName[j];

        }
    });




</script>

</html>