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>
