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 中输出错误信息
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>JS里的居民们1</title> </head> <body>
<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> <script>
//定义常量
const numA = document.getElementById("num-a");
numB = document.getElementById("num-b");
radioA = document.getElementById("radio-a");
radioB = document.getElementById("radio-b");
buttons = document.getElementsByTagName("button"); //按钮数组
p = document.getElementById("result");
//定义数字检查
function isNumber(num) {
if (!isNaN(num.value) && num.value != "") {
return true;
} else {
return false;
}
}
//定义勾选检查
function isCheck(check) {
if (check.checked) {
return true;
} else {
return false;
}
}
//按钮1监听点击，实现判断当前选中的输入框输入内容是否为数字
buttons[0].addEventListener("click", function () {
if (isCheck(radioA)) {
if (isNumber(numA)) {
p.innerHTML = "这是一个数字";
} else {
p.innerHTML = "这不是一个数字";
console.log("这不是一个数字哈！");
}
}
if (isCheck(radioB)) {
if (isNumber(numB)) {
p.innerHTML = "这是一个数字";
} else {
p.innerHTML = "这不是一个数字";
console.log("这不是一个数字哈！");
}
}
})
//按钮2监听点击，实现把A四舍五入为B个小数位数的数字
buttons[1].addEventListener("click", function () {
if (isNumber(numA) && isNumber(numB)) {
var A = parseFloat(numA.value);
p.innerHTML = A.toFixed(parseInt(numB.value));
} else {
console.log("必须均为数字哦！")
}
})
//按钮3监听点击，实现当前选中数字的绝对值
buttons[2].addEventListener("click", function () {
if (isCheck(radioA)) {
if (isNumber(numA)) {
p.innerHTML = Math.abs(Number(numA.value));
} else {
console.log("非数字！");
}
}
if (isCheck(radioB)) {
if (isNumber(numB)) {
p.innerHTML = Math.abs(Number(numB.value));
} else {
console.log("非数字！");
}
}
})
//按钮4监听点击，实现对当前选中的数字进行上舍入
buttons[3].addEventListener("click", function () {
if (isCheck(radioA)) {
p.innerHTML = Math.ceil(Number(numA.value));
}
if (isCheck(radioB)) {
p.innerHTML = Math.ceil(Number(numB.value));
}
})
//按钮5监听点击，实现对当前选中的数字进行下舍入
buttons[4].addEventListener("click", function () {
if (isCheck(radioA)) {
p.innerHTML = Math.floor(Number(numA.value));
}
if (isCheck(radioB)) {
p.innerHTML = Math.floor(Number(numB.value));
}
})
//按钮6监听点击，实现把当前选中的数字四舍五入为最接近的整数
buttons[5].addEventListener("click", function () {
if (isCheck(radioA)) {
p.innerHTML = Math.round(Number(numA.value));
}
if (isCheck(radioB)) {
p.innerHTML = Math.round(Number(numB.value));
}
})
//按钮7监听点击，实现返回A和B中的最高值
buttons[6].addEventListener("click", function () {
p.innerHTML = Math.max(Number(numA.value), Number(numB.value));
})
//按钮8监听点击，实现返回A和B中的最小值
buttons[7].addEventListener("click", function () {
p.innerHTML = Math.min(Number(numA.value), Number(numB.value));
})
</script>
</body> </html>
注意点：Math.round（）判断有小数点大于等于0.5的，向上取整数。比如Math.round（-1.5）=-1；Math.round（1.5）=2
JavaScript里面的居民们1-数据的更多相关文章
- javascript读取xml文件读取节点数据的例子
分享下用javascript读取xml文件读取节点数据方法. 读取的节点数据,还有一种情况是读取节点属性数据. <head> <title></title> < ...
- 主要看思路：区域数据去重 + JavaScript一次性展示几万条数据实例代码
近期做1功能,Gis地图 基于百度地图api , 会遇到的问题的, 如后台接口给的数据很多,大几千上万的,如果拿了数据直接渲染dom ,这滋味爽爽的. 再遇上 客户端浏览器悲催的,这卡顿就来了... ...
- JavaScript怎么把对象里的数据整合进另外一个数组里
https://blog.csdn.net/qq_26222859/article/details/70331833 var json1 = [ {"guoshui":[ 3000 ...
- JavaScript（四）：运算符&数据类型转换
+:算符的加法:连接字符串 加法会将其它类型的值,自动转为字符串,然后再进行连接运算! var a=1+2; console.log('first: '+a); var a=1+2+'3';//先计算 ...
- JavaScript实现ajax发送表单数据
知识点: 1.重置表单数据 2.获取表单数据(纯JavaScript) 3.设置表单数据(纯JavaScript) 4.ajax发送数据到客户端 (1)设置请求头,自己组合数据 (2)实例化表单对象, ...
- javascript动态添加表格以及获取数据
<script type="text/javascript"> var dict = { '百度': 'http://wwww.baidu.com', '新浪': 'h ...
- 使用 W3C Performance 对象通过 R 和 JavaScript 将浏览器内的性能数据可视化[转]
当考虑 Web 性能指标时,需要关注的目标数字应该是从您自己的用户那里获得的实际用户指标.最常见的方法是利用 Splunk 之类的工具来分析您的机器数据,该工具支持您分析和可视化您的访问权限和错误日志 ...
- 高性能javascript学习总结（3）--数据访问
在 JavaScript 中,数据存储位置可以对代码整体性能产生重要影响.有四种数据访问类型:直接量,变量,数组项,对象成员. 直接量仅仅代表自己,而不存储于特定位置. JavaScr ...
- JavaScript学习总结（六）数据类型和JSON格式
转自:http://segmentfault.com/a/1190000000668072 什么是JSON JSON:JavaScript 对象表示法(JavaScript Object Notati ...
- JavaScript中通过按回车键进行数据的录入
1.代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
随机推荐
- struts中如何查看配置文件中是否存在某个返回值
ActionConfig config = ActionContext.getContext() .getActionInvocation().getProxy().getConfig(); Resu ...
- WPF捕获全局未处理异常
在WPF开发过程中我们一般都用try/catch块来捕获异常,但不是每个异常我们都能捕获,程序总会出现一些意想不到情况,抛出一些未捕获的异常,这时就要用到全局异常捕获,即在程序的最外层加上捕获未处理异 ...
- Aizu-1378- ICPC Asia 2017-Secret of Chocolate Poles
Secret of Chocolate Poles Time Limit : 1 sec, Memory Limit : 262144 KB Problem A Secret of Chocolate ...
- POJ-2387-Til the Cows Come Home（最短路）
Til the Cows Come Home Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 72844 Accepted ...
- SpringMVC的JSP页面中中EL表达式不起作用的问题解决
原文地址:https://blog.csdn.net/sinat_35512245/article/details/53611663
- 剑指offer——面试题18:删除链表的节点
#include"List.h" void DeleteNode(ListNode** pHead,ListNode* pToBeDeleted) { if(*pHead==nul ...
- Scrapy——settings配置文件
# -*- coding: utf-8 -*- # Scrapy settings for tencent project # # For simplicity, this file contains ...
- java BufferedImage 合成多张图片 - 因为JPEGImageEncoder 不能用
java BufferedImage 合成多张图片 public void createPicTwo2(int x,int y) { try { //读取第一张图片 ...
- 算法导论学习笔记1---排序算法(平台：gcc 4.6.7)
平台:Ubuntu 12.04/gcc 4.6.7 插入排序 #include<vector> #include <algorithm> #include<iostrea ...
- Robot Framework自动化测试四（分层思想）
谈到Robot Framework 分层的思想,就不得不提“关键字驱动”. 关键字驱动: 通过调用的关键字不同,从而引起测试结果的不同. 在上一节的selenium API 中所介绍的方法其实就是关 ...