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 ...
随机推荐
- Android app ADB命令
* 查看设备 adb devices ps这个命令是查看当前连接的设备, 连接到计算机的android设备或者模拟器将会列出显示 若有多台安卓设备,可以通过在adb后面加上 -s <设备id&g ...
- uC/OS-II 函数之OSInit()
获得更多资料欢迎进入我的网站或者 csdn或者博客园 对于有热心的小伙伴在微博上私信我,说我的uC/OS-II 一些函数简介篇幅有些过于长应该分开介绍.应小伙伴的要求,特此将文章分开进行讲解.本文主要 ...
- 0、PlayGround可视化
Tensorflow新手通过PlayGround可视化初识神经网络 是不是觉得神经网络不够形象,概念不够清晰,如果你是新手,来玩玩PlayGround就知道,大神请绕道. PlayGround是一个在 ...
- Thread类和Runnable接口的比较
Thread和Runnable的联系 Thread类的定义: public class Thread extends Object implements Runnable 联系:从Thread类的定义 ...
- python全栈开发学习_day1_计算机五大组成部分及操作系统
一.计算机五大组成部分: 1)五大组成: 1.控制器(指挥系统,用于控制其他计算机硬件的工作) 2.运算器(用于数学运算及逻辑运算) 3.存储器(寄存器,高速缓存,内存,磁盘(机械,固态),磁带) 4 ...
- Linux云服务器下Tomcat部署
基于阿里云Centos 7服务器的Tomcat 项目部署 工具:一台安装jdk1.8的Centos 6/7.X 云服务器(64位) Putty ssh远程连接云服务器的软件 FileZillaCli ...
- 解决执行maven项目出现 SLF4J: Failed to load class “org.slf4j.impl.StaticLoggerBinder”. error
最近再弄maven项目,运行起来没有问题,但是Console控制台会报错,比如说如下的问题异常提示: 由此我们可以看出,报出错误的地方主要是slf4j的jar包,而故障码中“Failed to loa ...
- jacvascript 保留小数点
//四舍五入保留2位小数(若第二位小数为0,则保留一位小数) function keepTwoDecimal(num) { var result = parseFloat(num); if (is ...
- C++程序设计
C++程序设计 之前学过C++课程,但是时间有点久,忘了很多,这里做一个简单的回顾. 网站推荐: C++在线编译器 学习C++之前,您可以先了解C语言. c++的扩展名一般为cpp(cplusplus ...
- redis和memcache缓存击穿，缓存失效问题
我们在用缓存的时候,不管是Redis或者Memcached,基本上会通用遇到以下三个问题: 缓存穿透 缓存并发 缓存失效 一.缓存穿透 Paste_Image.png Paste_Image.png ...