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 ...
随机推荐
- Oracle数据库中日期/数字和字符之间的转换和计算
--查出当前系统时间 select SYSDATE from table; --格式转换 -- TO_CHAR 把日期或数字转换为字符串 -- TO_CHAR(number, '格式') -- TO_ ...
- 2016级算法第五次上机-C.Bamboo和"Coco"
1064 Bamboo和"Coco" 分析题意 每个亡灵至少一个花瓣,相邻的亡灵中思念值高的要获得的花瓣高(思念值相等是不需要花瓣一样多的).主要考贪心思路,为了使得花瓣总量最少, ...
- CentOS虚拟机断电或强制关机，再开机出现问题：Entering emergency mode. Exit the shell to continue.
解决问题: 输入命令:xfs_repair -v -L /dev/dm-0
- Sklearn，TensorFlow，keras模型保存与读取
一.sklearn模型保存与读取 1.保存 from sklearn.externals import joblib from sklearn import svm X = [[0, 0], [1, ...
- 2018牛客多校6 - I Team Rocket KD树维护空间
题意:给出n条铁路区间\([L,R]\),共有m个boom依时间顺序放置在\(k_i\)中,区间与\(k_i\)有交集的都被炸掉 求每次炸掉的铁路个数和最后输出所有id被炸的时间点 炸弹能炸到的区间满 ...
- 压缩jar包
1. 下载所要压缩 jar 包的源代码 2. 找到所有需要导入的类, 比如: import org.bouncycastle.util.io.pem.PemObject; import or ...
- ubuntu下nodejs环境搭建
#0.0.0.0 account.jetbrains.com”添加到hosts文件中 apt-get升级 sudo apt-get upgrade apt-get更新 sudo apt-get upd ...
- maven打包时跳过测试类
记录 修改pom.xml文件 <project> [...] <build> <plugins> <plugin> <groupId>org ...
- https迁移实践手记
前言什么是公钥和私钥?使用OpenssL生成私钥.使用Keytool导出私钥.主流数字证书都有哪些格式?SSL证书类型注册SSL证书使用OpenSSL工具生成CSR文件使用keytool工具生成CSR ...
- Android中Service与多个Activity通信
由于项目需要,我们有时候需要在service中处理耗时操作,然后将结果发送给activity以更新状态.通常情况下,我们只需要在一个service与一个activity之间通信,通常这种情况下,我们使 ...