靜語培訓第十七天
阿新 • • 發佈：2018-08-26
head utf-8 ray while 進制數 asc 存在 demo 計算
<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> window.onload = function(){ var arr = document.getElementsByTagName(‘button‘); var getid; for(var i = 0;i<arr.length;i++) { arr[i].onclick = function() { var x = parseFloat(document.getElementById("first-number").value), y = parseFloat(document.getElementById("second-number").value); if(isNaN(x) || isNaN(y)){ console.log("輸入存在非數字"); } getid = this.id; if(getid === "divide-btn" && y=== 0){ alert("除數不能為0"); console.log("除數為0");} switch(getid) { case "add-btn":result.innerHTML = x + y;break; case "minus-btn":result.innerHTML = x - y;break; case "times-btn":result.innerHTML = x * y;break; case "divide-btn":result.innerHTML = x / y;break; } } } } </script>
</body>
</html> 二進制轉換代碼：
<!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) { // 在這裏實現你的轉化方法，註意需要判斷輸入必須為一個非負整數 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) { // 在這裏實現你的轉化方法，註意需要判斷輸入必須為一個非負整數 // 這裏是上一個任務的實現 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的遊戲： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>判斷3的倍數或者含3</title> </head> <body> <p id="result">運算結果</p> <script> function judgeThree(){ var num = new Array(); for(var i=0;i<100;i++){ num[i] = i+1; } for(var i=0;i<num.length;i++){ if(num[i]%3 == 0 || (num[i].toString()).indexOf(‘3‘) ==1){ num[i] = ‘PA‘; document.getElementById("result").innerHTML = num; } } console.log(num.join()); } judgeThree(); </script> </body> </html> 小九九代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>九九乘法表</title> </head> <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> </html> 根據系統生成時間問候語： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>根據系統時間生成問候語</title> </head> <body> <button id="time">點擊這裏看時間</button> <p id="demo"></p> <script> document.getElementById("time").onclick = function(){ var x =""; var time = new Date().getHours(); if(time>20){ x = "現在是晚上了呢親，早點睡覺哦"; } if(time<12){ x = "早上好啊"; } if(time>12 && time<14){ x = "中午好啊"; }if(time>14 && time<20){ x = "下午好啊"; } document.getElementById("demo").innerHTML = x; } </script> </body> </html>
2018年8月24日 晴
學習時長：n個小時
媽呀好冷啊最近，不能穿短袖了，不過這天氣挺適合學習。
上代碼，計算器加強版：
<!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> window.onload = function(){ var arr = document.getElementsByTagName(‘button‘); var getid; for(var i = 0;i<arr.length;i++) { arr[i].onclick = function() { var x = parseFloat(document.getElementById("first-number").value), y = parseFloat(document.getElementById("second-number").value); if(isNaN(x) || isNaN(y)){ console.log("輸入存在非數字"); } getid = this.id; if(getid === "divide-btn" && y=== 0){ alert("除數不能為0"); console.log("除數為0");} switch(getid) { case "add-btn":result.innerHTML = x + y;break; case "minus-btn":result.innerHTML = x - y;break; case "times-btn":result.innerHTML = x * y;break; case "divide-btn":result.innerHTML = x / y;break; } } } } </script>
</body>
</html> 二進制轉換代碼：
<!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) { // 在這裏實現你的轉化方法，註意需要判斷輸入必須為一個非負整數 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) { // 在這裏實現你的轉化方法，註意需要判斷輸入必須為一個非負整數 // 這裏是上一個任務的實現 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的遊戲： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>判斷3的倍數或者含3</title> </head> <body> <p id="result">運算結果</p> <script> function judgeThree(){ var num = new Array(); for(var i=0;i<100;i++){ num[i] = i+1; } for(var i=0;i<num.length;i++){ if(num[i]%3 == 0 || (num[i].toString()).indexOf(‘3‘) ==1){ num[i] = ‘PA‘; document.getElementById("result").innerHTML = num; } } console.log(num.join()); } judgeThree(); </script> </body> </html> 小九九代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>九九乘法表</title> </head> <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> </html> 根據系統生成時間問候語： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>根據系統時間生成問候語</title> </head> <body> <button id="time">點擊這裏看時間</button> <p id="demo"></p> <script> document.getElementById("time").onclick = function(){ var x =""; var time = new Date().getHours(); if(time>20){ x = "現在是晚上了呢親，早點睡覺哦"; } if(time<12){ x = "早上好啊"; } if(time>12 && time<14){ x = "中午好啊"; }if(time>14 && time<20){ x = "下午好啊"; } document.getElementById("demo").innerHTML = x; } </script> </body> </html>
靜語培訓第十七天