JavaScript里面的居民们1-数据

编码

首先练习数字相关的一些操作：

<div><label>Number A:<input id="radio-a" type="radio" name="math-obj" value="a"></label><input id="num-a" type="text"> <label>Number B:<input id="radio-b" type="radio" name="math-obj" value="b"></label><input id="num-b" type="text"> </div> <div> <button>判断当前选中的输入框输入内容是否为数字</button> <button>把 A 四舍五入为 B 个小数位数的数字</button> <button>当前选中数字的绝对值</button> <button>对当前选中的数字进行上舍入</button> <button>对当前选中的数字进行下舍入</button> <button>把当前选中的数字四舍五入为最接近的整数</button> <button>返回 A 和 B 中的最高值</button> <button>返回 A 和 B 中的最低值</button> </div> <p id="result"></p>

基于如上HTML，实现需求

按照HTML中按钮的描述以此实现功能
计算结果显示在 id 为 result 的 P 标签中
除了第一个按钮，其它按钮操作时，都需要判断输入是否为数字，否则在 console 中输出错误信息

  1 <!DOCTYPE html>
  2 <html>
  3
  4 <head>
  5     <meta charset="utf-8" />
  6     <title>JS里的居民们1</title>
  7
  8 </head>
  9
 10 <body>
 11     <div>
 12         <label>Number A:<input id="radio-a" type="radio" name="math-obj" value="a"></label><input id="num-a" type="text">
 13         <label>Number B:<input id="radio-b" type="radio" name="math-obj" value="b"></label><input id="num-b" type="text">
 14     </div>
 15     <div>
 16         <button>判断当前选中的输入框输入内容是否为数字</button>
 17         <button>把 A 四舍五入为 B 个小数位数的数字</button>
 18         <button>当前选中数字的绝对值</button>
 19         <button>对当前选中的数字进行上舍入</button>
 20         <button>对当前选中的数字进行下舍入</button>
 21         <button>把当前选中的数字四舍五入为最接近的整数</button>
 22         <button>返回 A 和 B 中的最高值</button>
 23         <button>返回 A 和 B 中的最低值</button>
 24     </div>
 25     <p id="result"></p>
 26
 27     <script>
 28         //定义常量
 29         const numA = document.getElementById("num-a");
 30         numB = document.getElementById("num-b");
 31         radioA = document.getElementById("radio-a");
 32         radioB = document.getElementById("radio-b");
 33         buttons = document.getElementsByTagName("button"); //按钮数组
 34         p = document.getElementById("result");
 35         //定义数字检查
 36         function isNumber(num) {
 37             if (!isNaN(num.value) && num.value != "") {
 38                 return true;
 39             } else {
 40                 return false;
 41             }
 42         }
 43         //定义勾选检查
 44         function isCheck(check) {
 45             if (check.checked) {
 46                 return true;
 47             } else {
 48                 return false;
 49             }
 50         }
 51         //按钮1监听点击，实现判断当前选中的输入框输入内容是否为数字
 52         buttons[0].addEventListener("click", function () {
 53             if (isCheck(radioA)) {
 54                 if (isNumber(numA)) {
 55                     p.innerHTML = "这是一个数字";
 56                 } else {
 57                     p.innerHTML = "这不是一个数字";
 58                     console.log("这不是一个数字哈！");
 59                 }
 60             }
 61             if (isCheck(radioB)) {
 62                 if (isNumber(numB)) {
 63                     p.innerHTML = "这是一个数字";
 64                 } else {
 65                     p.innerHTML = "这不是一个数字";
 66                     console.log("这不是一个数字哈！");
 67                 }
 68             }
 69         })
 70         //按钮2监听点击，实现把A四舍五入为B个小数位数的数字
 71         buttons[1].addEventListener("click", function () {
 72             if (isNumber(numA) && isNumber(numB)) {
 73                 var A = parseFloat(numA.value);
 74                 p.innerHTML = A.toFixed(parseInt(numB.value));
 75             } else {
 76                 console.log("必须均为数字哦！")
 77             }
 78         })
 79         //按钮3监听点击，实现当前选中数字的绝对值
 80         buttons[2].addEventListener("click", function () {
 81             if (isCheck(radioA)) {
 82                 if (isNumber(numA)) {
 83                     p.innerHTML = Math.abs(Number(numA.value));
 84                 } else {
 85                     console.log("非数字！");
 86                 }
 87             }
 88             if (isCheck(radioB)) {
 89                 if (isNumber(numB)) {
 90                     p.innerHTML = Math.abs(Number(numB.value));
 91                 } else {
 92                     console.log("非数字！");
 93                 }
 94             }
 95         })
 96         //按钮4监听点击，实现对当前选中的数字进行上舍入
 97         buttons[3].addEventListener("click", function () {
 98             if (isCheck(radioA)) {
 99                 p.innerHTML = Math.ceil(Number(numA.value));
100             }
101             if (isCheck(radioB)) {
102                 p.innerHTML = Math.ceil(Number(numB.value));
103             }
104         })
105         //按钮5监听点击，实现对当前选中的数字进行下舍入
106         buttons[4].addEventListener("click", function () {
107             if (isCheck(radioA)) {
108                 p.innerHTML = Math.floor(Number(numA.value));
109             }
110             if (isCheck(radioB)) {
111                 p.innerHTML = Math.floor(Number(numB.value));
112             }
113         })
114         //按钮6监听点击，实现把当前选中的数字四舍五入为最接近的整数
115         buttons[5].addEventListener("click", function () {
116             if (isCheck(radioA)) {
117                 p.innerHTML = Math.round(Number(numA.value));
118             }
119             if (isCheck(radioB)) {
120                 p.innerHTML = Math.round(Number(numB.value));
121             }
122         })
123         //按钮7监听点击，实现返回A和B中的最高值
124         buttons[6].addEventListener("click", function () {
125             p.innerHTML = Math.max(Number(numA.value), Number(numB.value));
126         })
127         //按钮8监听点击，实现返回A和B中的最小值
128         buttons[7].addEventListener("click", function () {
129             p.innerHTML = Math.min(Number(numA.value), Number(numB.value));
130         })
131     </script>
132 </body>
133
134 </html>

注意点：Math.round（）判断有小数点大于等于0.5的，向上取整数。比如Math.round（-1.5）=-1；Math.round（1.5）=2

转载于:https://www.cnblogs.com/Joe-and-Joan/p/10065492.html

JavaScript里面的居民们1-数据相关推荐

javascript读取xml文件读取节点数据的例子
分享下用javascript读取xml文件读取节点数据方法. 读取的节点数据,还有一种情况是读取节点属性数据. <head> <title></title> < ...
在asp.net中如何用javascript读取本地Xml中的数据到网页中的文本框？
在asp.net中如何用javascript读取本地Xml中的数据到网页中的文本框? 转载于:https://www.cnblogs.com/dynasty/archive/2005/08/18/21 ...
html 无刷新显示公告,用javascript实现页面无刷新更新数据_js
程序设计中会经常碰到一种情况,就是事先无法得知用户会需要哪些数据,必须根据用户选择后再从服务器重新提取数据后反馈给用户.比如一简单的情况,用户选择省份以后,我们立即会在市里边将这个省的所有市重新显示出 ...
百度地图Javascript使用海量点加载数据并自定义图标
** 百度地图Javascript使用海量点加载数据并自定义图标由于数据量较大时使用Marker点在地图上标点会造成浏览器卡死,点聚合的形式可以解决数据量大浏览器卡死问题,但是移除点时点聚合不太好用 ...
Javascript获取或设置ckeditor的数据
为什么80%的码农都做不了架构师?>>> 例如在页面中载入了ckEditor作为程序内容的输入. <textarea name="content" i ...
Javascript 面向对象全新理练之数据的封装
JavaScript 是一种非常灵活的面向对象程序设计语言,它与传统的强类型的面向对象程序设计语言(如 C++,Java,C# 等)有很大不同,所以要实现如 C++.java.C# 当中的一些特性就需 ...
javascript：使用document.getElementById读取数据为空分析
今天写个网页,想在页面加载onLoad时,动态显示由后台其他程序传来的数据时,用document.getElementById获取控件对象总是为空.但是检查了这个id确实是存在的.在网上查阅一番后才知 ...
php下载数据表,javascript – 如何使用php下载表数据作为excel表..？
伙计们,我在som计算集后在表格中生成一组数据.一旦用户点击保存按钮excel文件,必须生成该数据以供下载. 什么是PHP的代码.. 伙计们没有从数据库中检索数据--它是在执行了一组计算后显示的. 因 ...
javascript中对象、JSON格式数据、创建对象的方式、数据类型分类及特点
对象对象指:具体的一个实物,javascript中对象是指一组没有顺序的属性和方法的集合,所有的事物都是对象,例如:函数,数组,字符串等.属性指事物的特征,一般为名词表示:方法指对象的行为,一般用动 ...
Javascript与未来十年的数据编程
作者 |Ben Schmidt 译者 |弯月出品 | CSDN(ID:CSDNnews) 以下为译文: 最近,我做了许多有关数据编程未来发展方面的探索.在日常工作中,我使用Python 的 pand ...

JavaScript里面的居民们1-数据

编码

JavaScript里面的居民们1-数据相关推荐

最新文章

热门文章