一、编码
阅读 通过除2取余的方法来把十进制整数转化为二进制,然后做一个小练习,基于下面代码,完成该转化算法,并实现页面交互
编码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
</head>
<body>
<input id="dec-number" type="number" placeholder="输入一个十进制非负整数">
<button id="trans-btn">转化为二进制</button>
<p id="result">运算结果</p>
<script>
function dec2bin(decNumber) {
// 在这里实现你的转化方法,注意需要判断输入必须为一个非负整数
}
// 实现党点击转化按钮时,将输入的十进制数字转化为二进制,并显示在result的p标签内
// Some coding
</script>
</body>
</html>
需求说明
- 实现党点击转化按钮时,将输入的十进制数字转化为二进制,并显示在result的p标签内
编码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
</head>
<body>
<input id="dec-number" type="number" placeholder="输入一个十进制非负整数">
<button id="trans-btn">转化为二进制</button>
<p id="result">运算结果</p>
<script>
function dec2bin(decNumber) {
// 在这里实现你的转化方法,注意需要判断输入必须为一个非负整数
var y="";
if(isNaN(decNumber)||decNumber<0){
console.log(decNumber);
alert("请输入合法数字");
return false;
}
else{
decNumber=parseInt(decNumber);
var num2 = decNumber.toString(2);
return num2;
}
}
// 实现党点击转化按钮时,将输入的十进制数字转化为二进制,并显示在result的p标签内
document.getElementById("trans-btn").onclick = function(){
var num = dec2bin(document.getElementById("dec-number").value);
document.getElementById("result").innerHTML = num;
}
// Some coding
</script>
</body>
</html>
二、编码
基于上一个任务,继续完成更多需求
<!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>
function dec2bin(decNumber) {
// 在这里实现你的转化方法,注意需要判断输入必须为一个非负整数
// 这里是上一个任务的实现
}
// 实现党点击转化按钮时,将输入的十进制数字转化为二进制,并显示在result的p标签内
// 新的需求是,转化显示后的二进制数为bin-bit中输入的数字宽度,例如
// dec-number为5,bin-bit为5,则转化后数字为00101
// 如果bin-bit小于转化后的二进制本身位数,则使用原本的位数,如dec-number为5,bin-bit为2,依然输出101,但同时在console中报个错
// Some coding
</script>
</body>
</html>
需求说明
- 新的需求是,转化显示后的二进制数为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>
function dec2bin(decNumber) {
// 在这里实现你的转化方法,注意需要判断输入必须为一个非负整数
// 这里是上一个任务的实现
var y="";
if(isNaN(decNumber)||decNumber<0){
console.log(decNumber);
alert("请输入合法数字");
return false;
}
else{
decNumber=parseInt(decNumber);
var num2 = decNumber.toString(2);
return num2;
}
}
// 实现党点击转化按钮时,将输入的十进制数字转化为二进制,并显示在result的p标签内
document.getElementById("trans-btn").onclick = function(){
var num = dec2bin(document.getElementById("dec-number").value);
//获取数字二进制长度
var numlength = num.length;
// 新的需求是,转化显示后的二进制数为bin-bit中输入的数字宽度,例如
// dec-number为5,bin-bit为5,则转化后数字为00101
var length = document.getElementById("bin-bit").value;
// 当二进制长度小于要求长度时,前面+0;
while(numlength<length){
num ="0"+num;
numlength++;
}
document.getElementById("result").innerHTML = num;
// 如果bin-bit小于转化后的二进制本身位数,则使用原本的位数,如dec-number为5,bin-bit为2,依然输出101,但同时在console中报个错
if(numlength>length){
console.log("警告!!!bin-bit小于转化后的二进制本身位数");
}
}
// Some coding
</script>
</body>
</html>
三、编码
3的小游戏,练习使用循环和条件语句,实现如下需求:
- 从1到100,以此在console输出各数字,但是,当数字为3的倍数或者含有3的时候,输出“PA”
- 比如:1,2,PA,4,5,PA,……,11,PA,PA,14,PA……
编码
<script>
function papa(){
var b=100;
for(var i=1;i<b;i++){
// i%3==0||String(i).indexOf("3")>=0
if(i%3==0||String(i).indexOf("3")>=0){
console.log("PA");
continue;
}
else{
console.log(i);
}
}
}
四、编码
小练习,练习使用循环实现一个九九乘法表
- 第一步,最低要求:在Console中按行输出 n * m = t
- 然后,尝试在网页中,使用table来实现一个九九乘法表
-
<body onload="a()"> <table id="table"> </table> <script> function a(){ var t = document.getElementById("table"); for(i=9;i>0;i--){ var tr = document.createElement("tr") for(j=1;j<i+1;j++){ var td = document.createElement("td"); var node = document.createTextNode(j+'*'+i+'='+j*i); td.appendChild(node); tr.appendChild(td); t.appendChild(tr); } } } </script> </body>
总结:
-
toString(2)可以将int类型转换二进制;
-
indexOf查找字符串是否在另一字符串中;
-
JavaScript HTML DOM 元素(节点)http://www.w3school.com.cn/js/js_htmldom_elements.asp