Day16~17 JavaScript 如果可以重来
2019-10-23 本文已影响0人
反复练习的阿离很笨吧
- 了解JS
- JS 中 if 和 for的使用
初步了解 JavaScript/ECMAScript 是什么
JS学习
- 《JavaScript 高级程序设计》
- W3School JS教程，从JS简介阅读到运算符
任务1
基于上一个任务中，关于加减乘除的任务，加上对于特殊情况的判断，比如判断两个输入框是否都是正常输入了数字类型的内容，比如除法的时候除数是否为0，当判断到输入有异常的时候，把错误信息提示到Console中。
阅读
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
</head>
<body>
<input id="first-number" type="number" value="0" placeholder="第一个数字">
<input id="second-number" type="number" value="0" placeholder="第二个数字">
<button id="add-btn">加</button>
<button id="minus-btn">减</button>
<button id="times-btn">乘</button>
<button id="divide-btn">除</button>
<p id="result">运算结果</p>
<script>
document.getElementById("add-btn").onclick = function() {
var a=parseInt(document.getElementById("first-number").value);
var b=parseInt(document.getElementById("second-number").value);
var x=a+b;
document.getElementById("result").innerHTML = '运算结果为 ' + x;
}
document.getElementById("minus-btn").onclick = function() {
var a=parseInt(document.getElementById("first-number").value);
var b=parseInt(document.getElementById("second-number").value);
var x=a-b;
document.getElementById("result").innerHTML = '运算结果为 ' + x;
}
document.getElementById("times-btn").onclick = function() {
var a=parseInt(document.getElementById("first-number").value);
var b=parseInt(document.getElementById("second-number").value);
var x=a*b;
document.getElementById("result").innerHTML = '运算结果为 ' + x;
}
document.getElementById("divide-btn").onclick = function() {
var a=parseInt(document.getElementById("first-number").value);
var b=parseInt(document.getElementById("second-number").value);
if(b===0) {
document.getElementById("result").innerHTML = '请输入非零的除数';
// break;
}else {
var x=a/b;
document.getElementById("result").innerHTML = '运算结果为 ' + x;
}
}
</script>
</body>
</html>
这部分代码有好多复制粘贴的语句，其实可以写成一个，然后用 if 判断 id 是什么，但我不会取 id。
任务2
阅读 通过除2取余的方法来把十进制整数转化为二进制，然后做一个小练习，基于下面代码，完成该转化算法，并实现页面交互
需求说明：
实现党点击转化按钮时，将输入的十进制数字转化为二进制，并显示在result的p标签内
需求说明：
新的需求是，转化显示后的二进制数为bin-bit中输入的数字宽度，例如
dec-number为5，bin-bit为5，则转化后数字为00101
如果bin-bit小于转化后的二进制本身位数，则使用原本的位数，如dec-number为5，bin-bit为2，依然输出101，但同时在console中报个错
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
</head>
<body>
<input id="dec-number" type="number" placeholder="输入一个十进制非负整数">
<input id="bin-bit" type="number" placeholder="输入转化后二进制数字位数">
<button id="trans-btn">转化为二进制</button>
<p id="result">运算结果</p>
<script>
document.getElementById('trans-btn').onclick=function() {
var dec_num=parseInt(document.getElementById('dec-number').value);
var bin_bit=parseInt(document.getElementById('bin-bit').value);
var binstr=dec2bin(dec_num,bin_bit);
document.getElementById('result').innerHTML='运算结果'+binstr;
}
function dec2bin(decNumber,bit) {
var binNum='';
if (decNumber>0) {
while(decNumber>0) {
binNum=(decNumber%2).toString()+binNum;
decNumber=parseInt(decNumber/2);
bit--;
}
while(bit>0){
binNum='0'+binNum;
bit--;
}
}
return binNum;
}
// 在这里实现你的转化方法，注意需要判断输入必须为一个非负整数
// 实现党点击转化按钮时，将输入的十进制数字转化为二进制，并显示在result的p标签内
</script>
</body>
</html>
这里要注意的是，从输入框获取的value是字符串格式，这里通过parseInt(String)转为数字，在dec2bin函数中，.toString()方法将数字转为字符串输出。
