js 数字相关的操作

最新推荐文章于 2022-11-04 12:05:32 发布

qq_40891002

最新推荐文章于 2022-11-04 12:05:32 发布

阅读量125

点赞数

分类专栏： js 文章标签： js javascript

本文链接：https://blog.csdn.net/qq_40891002/article/details/106358604

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

编码

首先练习数字相关的一些操作：

<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 中输出错误信息

<html>

<head>
    <title>数字</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 id="judge">判断当前选中的输入框输入内容是否为数字</button>
        <button id="round">把 A 四舍五入为 B 个小数位数的数字</button>
        <button id="abs">当前选中数字的绝对值</button>
        <button id="ceil">对当前选中的数字进行上舍入</button>
        <button id="floor">对当前选中的数字进行下舍入</button>
        <button id="round2">把当前选中的数字四舍五入为最接近的整数</button>
        <button id="max">返回 A 和 B 中的最高值</button>
        <button id="min">返回 A 和 B 中的最低值</button>
    </div>
    <label>结果是:</label>
    <p id="result"></p>

    <script>
                var A=document.getElementById('radio-a');
		var B=document.getElementById('radio-b');
		var Avalue=document.getElementById('num-a');
		var Bvalue=document.getElementById('num-b');
		var result=document.getElementById('result');
		function getchecked(){
			if(A.checked==true){
				return Avalue;
			}
		    if(B.checked==true){
				return Bvalue;
			}
		}
		function isNam(str){
			if(str==null|| str.length==0){
				return false;
			}
			for(var i=0;i<str.length;i++){
				if(!Number.parseInt(str[i])){
					return false;
				}
			}
			return true;
		}
	
		function checkNum(){
			var value=getchecked().value;
			if(isNam(value)){
				
				result.innerHTML=value+'是个数字';
			}
			else{
				result.innerHTML=value+'不是个数字';
			}
		}
		document.getElementById('judge').addEventListener("click",checkNum);
		function round(){
			result.innerHTML=Number(Avalue.value).toFixed(Bvalue.value);
		}
		document.getElementById('round').addEventListener('click',round);
		function abs(){
			result.innerHTML=Math.abs(getchecked().value);
		}
		document.getElementById('abs').addEventListener("click",abs);
		function topabondon(){
			result.innerHTML=Math.ceil(getchecked().value);
		}
		document.getElementById('ceil').addEventListener("click",topabondon);
		function bottombandon(){
			result.innerHTML=Math.floor(getchecked().value);
		}
		document.getElementById('floor').addEventListener("click",bottombandon);
		function recentdight(){
			result.innerHTML=Math.round(getchecked().value);
		}
		document.getElementById('round2').addEventListener('click',recentdight);
		function maxdight(){
			result.innerHTML=Math.max(Avalue.value,Bvalue.value);
		}
		document.getElementById('max').addEventListener('click',maxdight);
		function mindight(){
			result.innerHTML=Math.max(Avalue.value,Bvalue.value);
		}
		document.getElementById('min').addEventListener('click',maxdight);
    </script>
</body>

</html>

写的时候自己不会写，看了看别人的，然后自己又敲了一遍，遇到的困难有在定义isNam()函数上，如何判断一个数是不是数字，值得长度为0或者为空，如果是字符串用Number(parseInt(str[i]))来判断，如果不能转化为数字，则返回false,还有不知道如何实现选择按钮操作其后的值，查看书籍发现原来有radio对象中有checked属性可用，总之觉得还挺难的

qq_40891002

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 数字相关的操作

编码首先练习数字相关的一些操作：<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" val
复制链接

扫一扫