用angularJS两个人掷骰子判断输赢

最新推荐文章于 2023-03-23 19:21:22 发布

snow箴言

最新推荐文章于 2023-03-23 19:21:22 发布

阅读量355

点赞数

本文链接：https://blog.csdn.net/c_hjf/article/details/78219095

版权

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title></title>
    <script type="text/javascript">
        var rand = function () {
            return Math.ceil(Math.random() * 6);
        };

        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope, $http) {
        });

        var rollDice = function () {
            var appElement = document.querySelector("[ng-controller=myCtrl]");
            var $scope = angular.element(appElement).scope();
            $scope.zhangsan = rand();
            $scope.lisi = rand();
            $scope.winer = ($scope.zhangsan > $scope.lisi ? "张三" : ($scope.zhangsan < $scope.lisi ? "李四" : "相等"))
            $scope.$apply(); // 同步到Angular控制器中
        };
    </script>
</head>
<body>
<div ng-controller="myCtrl">
    <div>张三：<input ng-model="zhangsan"/></div>
    <div>李四：<input ng-model="lisi"/></div>
    <div>赢方：<input ng-model="winer"/></div>
    <div><input type="button" value="掷骰子" οnclick="return rollDice();"/></div>
</div>
</body>
</html>