百度前端技术学院-基础-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>

巴特西