百度前端技术学院-基础-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>
百度前端技术学院-基础-day17-18的更多相关文章
- 百度前端技术学院-基础-day1
2020.9.14 今天我开始在百度前端技术学院学习基础课程. 先立一个Flag,希望我能在30天之内学完前四十天的课程,后续课程再一天一节. 第一天的内容主要是提供了很多基础学习的网页,比如W3sc ...
- 百度前端技术学院-基础-day2
2020.9.15 今天是学习前端基础技术的第二天,今天制作了一个在线简历,纯html的那种.帮助我复习了以前的基础知识,也增加了新的知识点,比如制作列表可以用fieldset来整合数据. 我的在线简 ...
- 百度前端技术学院-基础-day20-21
第二十到第二十一天:让你和页面对话 task1 控制元素的显示及隐藏 实现以下功能: 当用户选择了 School 的单选框时,显示 School 的下拉选项,隐藏 Company 的下拉选项 当用户选 ...
- 百度前端技术学院-基础-day22-24
第二十二天到第二十四天:JavaScript里面的居民们 task1 题目: <div> <label>Number A:<input id="radio-a& ...
- 百度前端技术学院-基础-day25-27
倒数开始 滴答滴 滴答滴 task1 题目: 我们现在来做一个最简单的时钟,通过小练习来学习 Date,复习定时,然后再练习一下函数的封装具体需求如下: 在页面中显示当前日期及时间,按秒更新 格式为 ...
- 百度前端技术学院-基础-day7.8
任务:参考如下设计稿实现HTML页面及CSS样式 代码 点击预览 HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 & ...
- 百度前端技术学院-基础-day3
2020.9.15 第三天的课程内容,复习了一些CSS的基础属性(果然不用就会忘). 学习了一些新的属性,比如text-shadow.text-indent(还不是很清楚).font-style等等. ...
- 百度前端技术学院-基础-day5.6
今天学习了关于盒模型.浮动等页面布局的方法. 受到同学的启发,顺便学习了flex的布局. 还了解了一些编码的基本规则. 对我接下来的学习帮助很大. 交作业: HTML : https://github ...
- 百度前端技术学院（IFE）2016春季学期总结
今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
随机推荐
- QQ群web前端分析二——第一印象
对QQ群WEB进行前端分析 入口是 http://qun.qzone.qq.com/ 以下为第一印象,主要是从我的理解上找问题. ----------------------------------- ...
- linux之DNS服务
1.DNS (Domain Name Service 域名解析) DNS是因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网而不需要记忆能够直接被机器识别的IP. BI ...
- 利用火焰图分析ceph pg分布
前言 性能优化大神Brendan Gregg发明了火焰图来定位性能问题,通过图表就可以发现问题出在哪里,通过svg矢量图来查看性能卡在哪个点,哪个操作占用的资源最多 在查看了原始数据后,这个分析的原理 ...
- 设计模式(一)--工厂模式(Go实现)
package Factory import "fmt" type Restaurant interface { GetFood() } type Donglaishun stru ...
- 免费|申请谷歌云服务器|msf安装
apt-get install -y wget 参考链接 知乎-免费|申请谷歌云服务器 知乎-免费|申请谷歌云服务器 cnblogs-debian.ubuntu安装metasploit通用方法 谷歌云 ...
- 数据恢复当选EasyRecovery，设备不再受限
我们在逐渐适应信息电子化的同时,也有一些潜在的麻烦接踵而来,其中较为常见的就是文件和数据的保存问题. 显然,设备的存储空间是有限的,这就不可避免地会出现数据被删除.覆盖或丢失的现象,如果丢失的是重要数 ...
- 从维基百科等网站复制数据和公式到MathType里编辑
在我们写论文的时候,经常会需要用一些实际案例以及数据,而这些数据和案例有很大一部分可以直接在网络上找到.但是有时候也会发现我们想要的内容和公式,从网页上复制粘贴后太模糊,不适合打印和投影.就需要我们将 ...
- C++ cout格式化输出完全攻略
写算法题的时候突然发现自己忘记基本的C++:cout格式化输出了,赶紧拉出以前的C++学习笔记重新看一看. 部分内容来自教程:C语言中文网(一个很棒的网站) 有时希望按照一定的格式进行输出,如按十六进 ...
- AFNetWorking 丢失数据
问题描述: 使用AFNetWorking请求数据,请求成功,但是拿不到所需要的数据,但是使用其他平台都可以拿到数据. 原因分析: AFNetWorking无法解析. 解决方式: AFJSONRespo ...
- So Easy! HDU - 4565
易知,有\(S_n = \lceil{a + \sqrt{b}}\rceil ^ n\) \(\because a ^ 2 - 1 < b < a ^ 2\) \(\therefore a ...