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 ...
随机推荐
- Postman使用手册4——API test
一.Pre Request Scripts Postman v0.10+ 版本支持pre-request scripts. prerequest script.png pre-request scri ...
- Event（补交作业）
三种方法可以创建Eventhandler 1.
- 点击事件获得li标签内容
通过点击事件获得li标签内容 Table of contents 随笔 随笔 <li onclick="liClick(this)">数据</li> //点 ...
- HEOI2019游记(退役记)
少了回程铁路相关信息,有空补 AFO 辣鸡蒟蒻ghj1222顺利地退役了 由于没带手机拍照片,本次坐动车不写运转记录,下次去CTS/APIO应该是坐普速车,应该能带手机拍照,应该会写运转记录 Day ...
- springBoot 实现中文国际化
一:实现效果如下: 二 SpringBoot 国际化配置 1.创建国际化配置文件(3个): messages.properties messages.user.name=用户名 messages.us ...
- 2019年华南理工大学程序设计竞赛（春季赛）A NB群友
https://ac.nowcoder.com/acm/contest/625/A 题意:给出一个区间范围 , 求有多少个数的每一位的积是在这个区间里面的 分析:没错了 ,就是记忆化暴力搜索 ,不断的 ...
- 榨取kkksc03 多维dp
榨取kkksc03 多维dp 题面:洛谷 P1855 榨取kkksc03 一道简单的动态规划,背包再加一维费用,首先可以易得三维动态规划转移方程 \[ dp[i][j][w]=\left\{ \beg ...
- [转] Jenkins pipeline 中获取 exit code, stdout and stderr 返回值和输出
[From] https://issues.jenkins-ci.org/browse/JENKINS-44930 其做法是,把stdout定向到一个文件,sh 配置 returnStatus: tr ...
- 获取浏览器用户代理（user-agent）
获取浏览器用户代理(user-agent) 用户代理(user-agent)是浏览器客户端与服务器交互时的重要信息之一,用于帮助网站识别请求用户的浏览器类别,以便于网站发送相应的网页数据. 用户代理数 ...
- spark第九篇：Spark操作ES
spark操作es需要elasticsearch-hadoop-xxx.jar,版本需同es版本.从5.0版本开始,支持spark2.0. 把elasticsearch-hadoop-xxx.jar放 ...