AngularJS實(shí)現(xiàn)的生成隨機(jī)數(shù)與猜數(shù)字大小功能示例
本文實(shí)例講述了AngularJS實(shí)現(xiàn)的生成隨機(jī)數(shù)與猜數(shù)字大小功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>m.fzitv.net 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)文章
用WebStorm進(jìn)行Angularjs 2開發(fā)(環(huán)境篇：Windows 10，Angular-cli方式)
這篇文章主要介紹了用WebStorm進(jìn)行Angularjs 2開發(fā)(環(huán)境篇：Windows 10，Angular-cli方式),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
Angular 利用路由跳轉(zhuǎn)到指定頁面的指定位置方法
今天小編就為大家分享一篇Angular 利用路由跳轉(zhuǎn)到指定頁面的指定位置方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制)
本篇文章主要介紹了淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
AngularJS是Google開發(fā)的純客戶端JavaScript技術(shù)的WEB框架,用于擴(kuò)展、增強(qiáng)HTML功能,它專為構(gòu)建強(qiáng)大的WEB應(yīng)用而設(shè)計(jì)。下面這篇文章我們來分享如何利用Angularjs實(shí)現(xiàn)幻燈片效果。2016-09-09
AngularJS基礎(chǔ) ng-init 指令簡單示例
本文主要介紹AngularJS ng-init 指令,這里幫大家整理了關(guān)于ng-init 指令的基本知識資料,并附有簡單的代碼示例,有需要學(xué)習(xí)的小伙伴可以參考下2016-08-08
angularjs實(shí)現(xiàn)Tab欄切換效果
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)Tab欄切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
angularjs 的數(shù)據(jù)綁定實(shí)現(xiàn)原理
本篇文章主要介紹了angularjs 的數(shù)據(jù)綁定實(shí)現(xiàn)原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
使用RxJS更優(yōu)雅地進(jìn)行定時(shí)請求詳析
這篇文章主要給大家介紹了關(guān)于如何使用RxJS更優(yōu)雅地進(jìn)行定時(shí)請求的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用RxJS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
AngularJS向后端ASP.NET API控制器上傳文件
這篇文章主要介紹了AngularJS向后端ASP.NET API控制器上傳文件的相關(guān)資料,需要的朋友可以參考下2016-02-02
AngularJS 前臺(tái)分頁實(shí)現(xiàn)的示例代碼
本篇文章主要介紹了AngularJS 前臺(tái)分頁實(shí)現(xiàn)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06