AngularJS實現(xiàn)的生成隨機數(shù)與猜數(shù)字大小功能示例
更新時間：2017年12月25日 14:39:17 作者：當愛0201
這篇文章主要介紹了AngularJS實現(xiàn)的生成隨機數(shù)與猜數(shù)字大小功能,結(jié)合完整實例形式分析了AngularJS隨機數(shù)生成與數(shù)值判定相關操作技巧,需要的朋友可以參考下
本文實例講述了AngularJS實現(xiàn)的生成隨機數(shù)與猜數(shù)字大小功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>chabaoo.cn Angular猜數(shù)</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的整數(shù)</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：這里再為大家提供幾款相關在線工具供大家參考：
在線隨機數(shù)字/字符串生成工具：
http://tools.jb51.net/aideddesign/suijishu
在線隨機字符/隨機密碼生成工具：
http://tools.jb51.net/aideddesign/rnd_password
高強度密碼生成器：
http://tools.jb51.net/password/CreateStrongPassword
更多關于AngularJS相關內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設計有所幫助。
相關文章
本篇文章主要介紹了angular2系列之路由轉(zhuǎn)場動畫的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Angular使用$http.jsonp發(fā)送跨站請求的方法
這篇文章主要介紹了Angular使用$http.jsonp發(fā)送跨站請求的方法,結(jié)合實例形式分析了$http.jsonp發(fā)送跨站請求遇到的問題與相應的解決方法,具有一定參考借鑒價值,需要的朋友可以參考下2017-03-03
測試IE瀏覽器對JavaScript的AngularJS的兼容性
這篇文章主要介紹了測試IE瀏覽器對JavaScript的AngularJS的兼容性的方法,盡管隨著Windows10的近期上市,IE瀏覽器即將成為歷史...需要的朋友可以參考下2015-06-06
Angular?Ngrx?Store應用程序狀態(tài)典型示例詳解
這篇文章主要為大家介紹了Angular?Ngrx?Store應用程序狀態(tài)典型示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
使用AngularJS編寫多選按鈕選中時觸發(fā)指定方法的指令代碼詳解
最近做項目時遇到了需要用到多選按鈕選中觸發(fā)事件的功能，小編試著手寫一個指令，具體實現(xiàn)代碼大家參考下本文吧2017-07-07
這篇文章主要介紹了AngularJS HTML編譯器介紹,AngularJS的HTML編譯器能讓瀏覽器識別新的HTML語法。它能讓你將行為關聯(lián)到HTML元素或者屬性上，甚至能讓你創(chuàng)造具有自定義行為的新元素,需要的朋友可以參考下2014-12-12
AngularJS基礎 ng-mousemove 指令簡單示例
本文主要介紹AngularJS ng-mousemove 指令,這里幫大家整理了ng-mousemove 指令的詳細資料,并附有示例代碼,有需要的朋友參考下2016-08-08
這篇文章主要介紹了angular中如何綁定iframe中src的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
angularJs中$http獲取后臺數(shù)據(jù)的實例講解
今天小編就為大家分享一篇angularJs中$http獲取后臺數(shù)據(jù)的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本篇文章主要介紹了說說AngularJS中的$parse和$eval的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09