AngularJS实现的生成随机数与猜数字大小功能示例
2019/6/27 20:29:51
本文主要是介绍AngularJS实现的生成随机数与猜数字大小功能示例,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本文实例讲述了AngularJS实现的生成随机数与猜数字大小功能。分享给大家供大家参考,具体如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.zyiz.net Angular猜数</title> <style> *{ margin: 0; padding: 0; font-size: 30px; } input{ width: 500px; height: 50px; font-size: 30px; } button{ width: 80px; height: 50px; border: 0; text-align: center; line-height: 50px; background: darkblue; color: #fff; margin-left: 5px; } </style> <script src="angular/angular.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function ($scope) { $scope.check=function () { console.log($scope.random); $scope.differ=$scope.guess-$scope.random; $scope.num++; }; $scope.reset=function () { $scope.differ=null; $scope.guess=null; $scope.num=0; $scope.random=Math.ceil(Math.random()*10); }; $scope.reset(); }) </script> </head> <body ng-app="myapp" ng-controller="myCtrl"> <h2>请输入一个1-10的整数</h2> <input type="text" ng-model="guess"><button ng-click="check()">检查</button><button ng-click="reset()">重置</button> <p ng-if="differ>0">猜大了</p> <p ng-if="differ<0">猜小了</p> <p ng-if="differ==0">猜对了</p> <p>一共猜了<span ng-bind="num"></span>次</p> </body> </html>
运行效果:
PS:这里再为大家提供几款相关在线工具供大家参考:
在线随机数字/字符串生成工具:
http://tools.zyiz.net/aideddesign/suijishu
在线随机字符/随机密码生成工具:
http://tools.zyiz.net/aideddesign/rnd_password
高强度密码生成器:
http://tools.zyiz.net/password/CreateStrongPassword
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
这篇关于AngularJS实现的生成随机数与猜数字大小功能示例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist