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 ...
随机推荐
- c++11 enable_shared_from_this
本质的原因:raw data和引用计数的管理块,可能是分开的 使用场景: 需要在对象中得到shared ptr, 错误的代码:直接构造新的shared_ptr<A>对象,两个shared ...
- nginx下重写隐藏index.php文件
location / { root /项目目录/; index index.php; if (-f $request_filename/index.php){ rewrite (.*) $1/inde ...
- HTML-利用CSS和JavaScript制作一个切换图片的网页
由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...
- [BZOJ 4921][Lydsy1706月赛]互质序列
传送门 因为区间 gcd 的变换不会超过 log 个,所以我们可以暴力枚举区间起点,复杂度是 n*logn 的 #include <bits/stdc++.h> using namespa ...
- django Form数据读取问题
1.在我学习django的过程中,我学习到了一个关于表单验证的问题 2.我们从前端post一个表单,通过urls配置,传给对应的view方法 3.然后再传给Form验证 4.一开始我是很好奇,在vie ...
- NEXIQ 125032 USB Link Diesel Truck Diagnose Interface Introduction
What are the features of nexiq usb link? 1.Compatible with applications that diagnose engines, trans ...
- php session的简单使用
创建session: session_start(); $_SESSION['name'] = $value; 获取session: session_start(); echo $_SESSION[' ...
- Zookeeper选举算法原理
Zookeeper选举算法原理 Leader选举 Leader选举是保证分布式数据一致性的关键所在.当Zookeeper集群中的一台服务器出现以下两种情况之一时,需要进入Leader选举. (1) 服 ...
- OS 管理命令
查看当前目录下最大的文件 du -amx |sort -nr|more ################################################################ ...
- 理解session和cookie
Session 与 Cookie 的作用都是为了保持访问用户与后端服务器的交互状态.它们有各自的优点,也有各自的缺陷,然而具有讽刺意味的是它们的优点和它们的使用场景又是矛盾的.例如,使用 Cookie ...