快捷導(dǎo)航

AngularJS實(shí)現(xiàn)的生成隨機(jī)數(shù)與猜數(shù)字大小功能示例

更新時(shí)間：2017年12月25日 14:39:17 作者：當(dāng)愛(ài)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.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>請(qǐng)輸入一個(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">猜對(duì)了</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)容感興趣的讀者可查看本站專(zhuān)題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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