xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > AngularJS入门教程之AngularJS指令,javascript实现简单

AngularJS入门教程之AngularJS指令,javascript实现简单

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-07-11 09:41

最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分??

熟悉HTML的朋友都知道,HTML有很多属性。比如<a>标签的href属性可以来指定链接的URL地址,<input>标签的type属性可以用来指定input的类型。AngularJS指令就是通过扩展HTML的属性来为 AngularJS应用增加功能。

前言:

图-1

AngularJS指令用于扩展HTML。这些都是先从ng- 前缀的特殊属性。我们将讨论以下指令:

JS没有现成的函数,能够直接生成指定范围的随机数。

图片 1

常用AngularJS指令

但是它有个函数:Math.random()  这个函数可以生成 [0,1) 的一个随机数。

图-2

ng-app 指令初始化一个 AngularJS 应用程序。

利用它,我们就可以生成指定范围内的随机数。

图片 2

ng-init 指令初始化应用程序数据。

而涉及范围的话,就有个边界值的问题。这样就包含四种情况:

HTML代码如下

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

1)min ≤ r ≤ max  (一般这种比较常见)

<body>
<div id="calculator">
  <div class="LOGO">
    简单的计算器
    @walker
  </div>
  <div id="shuRu">
    <!--screen输入栏-->
    <div class="screen">
      <input type="text" id="screenName" name="screenName" class="screen">
    </div>
  </div>
  <div id="keys">
    <!-- j -->
    <!--第一排-->
    <input type="button" id="7" onclick="jsq(this.id)" value="7" class="buttons">
    <input type="button" id="8" onclick="jsq(this.id)" value="8" class="buttons">
    <input type="button" id="9" onclick="jsq(this.id)" value="9" class="buttons">
    <input type="button" id="Back" onclick="tuiGe()" value="Back" class="buttons">
    <input type="button" id="C" onclick="clearNum()" value="C" class="buttons" style="margin-right:0px">
    <!--第二排-->
    <input type="button" id="4" onclick="jsq(this.id)" value="4" class="buttons">
    <input type="button" id="5" onclick="jsq(this.id)" value="5" class="buttons">
    <input type="button" id="6" onclick="jsq(this.id)" value="6" class="buttons">
    <input type="button" id="*" onclick="jsq(this.id)" value="X" class="buttons">
    <input type="button" id="/" onclick="jsq(this.id)" value="/" class="buttons" style="margin-right:0px">
    <!--第三排-->
    <input type="button" id="1" onclick="jsq(this.id)" value="1" class="buttons">
    <input type="button" id="2" onclick="jsq(this.id)" value="2" class="buttons">
    <input type="button" id="3" onclick="jsq(this.id)" value="3" class="buttons">
    <input type="button" id=" " onclick="jsq(this.id)" value=" " class="buttons">
    <input type="button" id="-" onclick="jsq(this.id)" value="-" class="buttons" style="margin-right:0px">
    <!--第四排-->
    <input type="button" id="0" onclick="jsq(this.id)" value="0" class="buttons">
    <input type="button" id="00" onclick="jsq(this.id)" value="00" class="buttons">
    <input type="button" id="." onclick="jsq(this.id)" value="." class="buttons">
    <input type="button" id="%" onclick="jsq(this.id)" value="%" class="buttons">
    <input type="button" id="eva" onclick="eva()" value="=" class="buttons" style="margin-right:0px">
  </div>
  <div class="footer">
    欢迎使用JavaScript计算器

        <a href="#" title="声明" target="_blank">反馈</a>

  </div>
</div>
</body>

ng-app指令

2)min ≤ r < max

CSS代码如下:

ng-app 指令启动一个AngularJS应用。它定义根元素。它会自动初始化或启动加载包含AngularJS应用程序的Web页面的应用程序。它也被用来加载各种AngularJS模块AngularJS应用。在下面的例子中,我们定义默认AngularJS应用使用div元素的ng-app 属性。

3) min < r ≤ max

<style>
    /*Basic reset*/
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  font: 14px Arial,sans-serif;
}
html{
  height:100%;
  background-color:lightslategrey;
}

#calculator{
  margin: 15px auto;
  width:330px;
  height:400px;
  border: 1px solid lightgray;
  background-color:darkgrey;
  padding:15px;
}

/*LOGO*/
.LOGO{
  height:20px;

}
.LOGO .name{
  float:left;
  line-height:30px;
}
.LOGO .verson{
  float:right;
  line-height:30px;
}
/*screen*/
#shuRu{
  margin-top:15px;
}
.screen{
  margin-top:5px;
  width:300px;
  height:40px;
  text-align: right;
  padding-right:10px;
  font-size:20px;
}
#keys{
  border:1px solid lightgray;
  height:223px;
  margin-top:25px;
  padding:8px;
}
#keys .last{
  margin-right:0px;
}
.footer{
  margin-top:20px;
  height:20px;
}
.footer .link{
  float:right;
}

#keys .buttons{
  float:left;
  width: 42px;
  height: 36px;
  text-align:center;
  background-color:lightgray;
  margin: 0 17px 20px 0;
}
  </style>
<div ng-app="">
...
</div>

4)min < r < max

javascript代码如下:

ng-init 指令

一、min ≤ r ≤ max

<script> 
    var num = 0; // 定义第一个输入的数据 
    function jsq(num) { 
      //获取当前输入 
      if(num=="%"){ 
        document.getElementById('screenName').value=Math.round(document.getElementById('screenName').value)/100; 
      }else{ 
        document.getElementById('screenName').value  = document.getElementById(num).value; 
      } 
    } 
    function eva() { 
      //计算输入结果 
      document.getElementById("screenName").value = eval(document.getElementById("screenName").value); 
    } 
    function clearNum() { 
      //清0 
      document.getElementById("screenName").value = null; 
      document.getElementById("screenName").focus(); 
    } 
    function tuiGe() { 
      //退格 
      var arr = document.getElementById("screenName"); 
      arr.value = arr.value.substring(0, arr.value.length - 1); 
    } 
  </script> 

ng-init 指令初始化一个AngularJS应用程序的数据。它被用来把值在应用程序中使用的变量。在下面的例子中,我们将初始化countries数组。使用JSON语法来定义countries数组。

function RandomNumBoth(Min,Max){
      var Range = Max - Min;
      var Rand = Math.random();
      var num = Min   Math.round(Rand * Range); //四舍五入
      return num;
}

以上这篇javascript实现简单计算器效果【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">

...
</div>

二、min ≤ r < max

您可能感兴趣的文章:

  • 基于javascript实现简单计算器功能
  • 纯js代码实现简单计算器
  • js实现简单计算器
  • 基于JSP实现一个简单计算器的方法
  • JS简单计算器实例
  • 使用JavaScript 编写简单计算器
  • js的表单操作 简单计算器
  • javascript简单计算器 可美化
  • js当月水电气简单计算器
  • Javascript 实现简单计算器实例代码

ng-model指令

function RandomNum(Min, Max) {
      var Range = Max - Min;
      var Rand = Math.random();
      var num = Min   Math.floor(Rand * Range); //舍去
      return num;
}

ng-model指令定义在AngularJS应用中使用的模型/变量。在下面的例子中,我们定义了一个名为“name”的模型。

三、min < r ≤ max

<div ng-app="">
...
<p>Enter your Name: <input type="text" ng-model="name"></p>
</div>
function RandomNum(Min, Max) {
      var Range = Max - Min;
      var Rand = Math.random();
      if(Math.round(Rand * Range)==0){       
        return Min   1;
      }
      var num = Min   Math.round(Rand * Range);
      return num;
}

ng-repeat 指令

四、min < r < max 

ng-repeat 指令重复html元素集合中的每个项目。在下面的例子中,我们已经迭代了数组countries。

function RandomNum(Min, Max) {
      var Range = Max - Min;
      var Rand = Math.random();
      if(Math.round(Rand * Range)==0){
        return Min   1;
      }else if(Math.round(Rand * Max)==Max)
      {
        index  ;
        return Max - 1;
      }else{
        var num = Min   Math.round(Rand * Range) - 1;
        return num;
      }
 }
<div ng-app="">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: '   country.name   ', Locale: '   country.locale }}
</li>
</ol>
</div>

以上这篇JS生成某个范围的随机数【四种情况详解】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

AngularJS指令示例

您可能感兴趣的文章:

  • JS生成随机字符串的多种方法
  • javascript创建含数字字母的随机字符串方法总结
  • js 按照指定间隔 向字符串中插入随机字符串的实现代码
  • JavaScript生成随机字符串的方法
  • js 数组随机字符串(广告不重复)
  • javascript自动生成包含数字与字符的随机字符串
  • JS简单生成由字母数字组合随机字符串示例
  • 使用js Math.random()函数生成n到m间的随机数字
  • js生成随机数的方法实例
  • JS实现生成由字母与数字组合的随机字符串功能详解

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:AngularJS入门教程之AngularJS指令,javascript实现简单

关键词: GA电子游戏