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