百度前端技术学院-基础-day17-18
JavaScript小练习
task 1
基于上一个任务中，关于加减乘除的任务，加上对于特殊情况的判断，比如判断两个输入框是否都是正常输入了数字类型的内容，比如除法的时候除数是否为0，当判断到输入有异常的时候，把错误信息提示到Console中。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>IFE ECMAScript</title> 6 </head> 7 <body> 8 <input id="first-number" placeholder="第一个数字"> 9 <input id="second-number" placeholder="第二个数字"> 10 <button id="add-btn">加</button> 11 <button id="minus-btn">减</button> 12 <button id="times-btn">乘</button> 13 <button id="divide-btn">除</button> 14 <p id="result">运算结果</p> 15 <script> 16 var first_number = document.querySelector('#first-number'); 17 var second_number = document.querySelector('#second-number'); 18 var add = document.querySelector('#add-btn'); 19 var minus = document.querySelector('#minus-btn'); 20 var times = document.querySelector('#times-btn'); 21 var divide = document.querySelector('#divide-btn'); 22 var result = document.querySelector('#result'); 23 add.onclick = function(){ 24 if (first_number.value == "" || second_number.value == ""){ 25 console.log('请正确输入数字') 26 } 27 else{ 28 result.innerHTML = "运算结果：" + (parseInt(first_number.value) + parseInt(second_number.value)); 29 } 30 } 31 minus.onclick = function(){ 32 if (first_number.value == "" || second_number.value == ""){ 33 console.log('请正确输入数字') 34 } 35 else{ 36 result.innerHTML = "运算结果：" + (first_number.value - second_number.value); 37 }} 38 times.onclick = function(){ 39 if (first_number.value == "" || second_number.value == ""){ 40 console.log('请正确输入数字') 41 } 42 else{ 43 result.innerHTML = "运算结果：" + (first_number.value * second_number.value); 44 }} 45 divide.onclick = function(){ 46 if (second_number.value == '0'){ 47 console.log("除数不得为零"); 48 } 49 else if(first_number.value == "" || second_number.value == ""){ 50 console.log("请正确输入数字"); 51 } 52 else{ 53 result.innerHTML = "运算结果：" + (first_number.value / second_number.value); 54 }} 55 </script> 56 </body> 57 </html>
task2
阅读 通过除2取余的方法来把十进制整数转化为二进制，然后做一个小练习，基于下面代码，完成该转化算法，并实现页面交互
1 <body> 2 <input id="dec-number" type="number" placeholder="输入一个十进制非负整数"> 3 <button id="trans-btn">转化为二进制</button> 4 <p id="result">运算结果</p> 5 <script> 6 function dec2bin(decNumber) { 7 if (decNumber < 0) { 8 console.log("请输入一个非负整数") 9 return 10 } 11 // 十进制转二进制，并存于数组 12 var binNumber = new Array() 13 while (decNumber >= 1) { 14 binNumber.push(decNumber % 2) 15 decNumber = Math.floor(decNumber / 2) 16 } 17 binNumber = binNumber.reverse() 18 // 将数组转为一个数字 19 var bin = 0 20 for (var i = 0; i < binNumber.length; i++) { 21 bin = bin * 10 + binNumber[i] 22 } 23 return bin 24 } 25 26 var dec = document.querySelector("#dec-number") 27 var transBtn = document.querySelector("#trans-btn") 28 var result = document.querySelector("#result") 29 30 transBtn.addEventListener("click", function () { 31 var bin = dec2bin(dec.value) 32 if (bin != null) { 33 result.innerHTML = "运算结果：" + bin 34 } else { 35 result.innerHTML = "请输入一个非负整数" 36 } 37 }) 38 39 </script> 40 </body>
task3
在task2的基础上添加新的需求：
- 转化显示后的二进制数为bin-bit中输入的数字宽度，例如，dec-number为5，bin-bit为5，则转化后数字为00101
- 如果bin-bit小于转化后的二进制本身位数，则使用原本的位数，如dec-number为5，bin-bit为2，依然输出101，但同时在console中报个错
1 <body> 2 <input id="dividend" type="text" placeholder="输入十进制数字"> 3 <input id="bin-bit" type="number" placeholder="输入转化后二进制数字位数"> 4 <button id="btn">转换为二进制数</button> 5 <p id="result"></p> 6 <script> 7 var dividend = document.getElementById('dividend'); 8 var bin_bit = document.getElementById('bin-bit'); 9 var result = document.getElementById('result'); 10 var btn = document.getElementById('btn'); 11 function dev2bin(dividend, bin_bit){ 12 let res = new Array; 13 let num = 0; 14 while (dividend > 0) { 15 res.push(dividend % 2); 16 dividend = Math.floor(dividend / 2); 17 } 18 res = res.reverse(); 19 console.log(res); 20 for (i=0; i<res.length; i++){ 21 num = num*10 + res[i]; 22 } 23 if (bin_bit <= res.length){ 24 console.log("要求的二进制位数小于实际位数啦！") 25 return num; 26 }else { 27 for(i=res.length; i<bin_bit; i++){ 28 num = '0' + String(num); 29 } 30 return num; 31 } 32 } 33 34 btn.onclick = function(){ 35 if (dividend.value < 0){ 36 console.log("请输入非负整数"); 37 } 38 else { 39 result.innerHTML = "二进制为：" + dev2bin(dividend.value, bin_bit.value); 40 }} 41 42 </script> 43 </body>
task4
1 <body> 2 <button id="begin">点击开始</button> 3 <script> 4 let begin = document.getElementById('begin'); 5 begin.onclick = function(){ 6 for(i=0; i<100; i++){ 7 if (i % 3 ==0){ 8 console.log('PA'); 9 }else{ 10 console.log(i); 11 } 12 } 13 } 14 </script> 15 </body>
task5
使用循环实现一个九九乘法表
- 第一步，最低要求：在Console中按行输出 n * m = t
- 然后，尝试在网页中，使用table来实现一个九九乘法表
1 <head> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4 <title>Document</title> 5 <style> 6 .table{ 7 border: 1px black solid; 8 text-align: center; 9 font-size: 20px; 10 } 11 td{ 12 border: 1px black solid; 13 width: max-content; 14 padding: 5px 10px; 15 } 16 </style> 17 </head> 18 <body> 19 <p>建立一个九九乘法表</p> 20 <button id="begin">点击开始</button> 21 <script> 22 var tableNode; 23 var btn = document.getElementById('begin'); 24 function createTable(){ 25 tableNode = document.createElement("table");//获得对象 26 tbody = document.createElement("tbody"); 27 tableNode.setAttribute("id","table"); 28 let row = 9, cols = 9; 29 for(var x=1;x <= row; x++){ 30 var trNode = tbody.insertRow(); 31 for(var y=1; y <= cols; y++){ 32 var tdNode = trNode.insertCell(); 33 tdNode.innerHTML = x + '*'+y + '=' + (x*y); 34 }} 35 tableNode.appendChild(tbody); 36 document.body.appendChild(tableNode); 37 38 } 39 btn.onclick = function(){ 40 createTable(); 41 console.log("finished!"); 42 } 43 44 </script> 45 </body>
task6
在你的简历中，实现一个，当用户访问页面的时候，根据当前时间，在页面中输出不同的问候语。
比如早上的时候，输出早上好，晚上的时候是晚上好。
1 <script> 2 let myTime = new Date(); 3 let greeting = document.getElementById('greeting'); 4 if (myTime.getHours < 11){ 5 greeting.innerHTML = "早上好呀！"; 6 } 7 else if((myTime.getHours) < 13){ 8 greeting.innerHTML = "中午好呀！"; 9 } 10 else if((myTime.getHours) < 17){ 11 greeting.innerHTML = "下午好呀！"; 12 } 13 else { 14 greeting.innerHTML = "晚上好呀！"; 15 } 16 </script>
