百度前端技术学院-基础-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春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
随机推荐
- 【xingorg1-ui】基于vue3.0从0-1搭建组件库（一）环境配置与目录规划
npm地址 github源码 开篇-环境配置 环境配置: 使用vue-cli搭建项目框架,需要用vue3的话,得先把vue-cli的版本升级到vue-cli@5以上 npm install -g @v ...
- 为什么人们总是认为epoll 效率比select高！！！！！！
今天看公司代码时,发现代码里面使用的事清一色的代码使用epoll, 所以就得说一说了:宏观看一看epoll 和select的实现: select原理概述 调用select时,会发生以下事情: 从用户空 ...
- linux netfilter rule match target 数据结构
对于netfilter 可以参考 https://netfilter.org/documentation/HOWTO/netfilter-hacking-HOWTO-3.html netfilter ...
- fork函数拓展
1.fork之后父子进程共享文件:文件引用计数的值改变,共享偏移. 在下面的例子中test.txt为parentchil.如果子进程没有睡眠,两个进程交叉执行,内容不可预测. 1 #include&l ...
- java的for循环中遇到异常抛出后继续循环执行
@Testpublic void loopTryCatchTest() throws Exception { Map<String, Object> a = new HashMap(); ...
- 配置Ceph的IPV6集群
前言 对于IPV6实在是非常的陌生,所以本篇开始会讲一下最基本的网络配置,首先让网络能通起来,最开始就是因为不熟悉IPV6,而直接使用了link local地址,造成了mon部署的时候进程无法绑定到I ...
- mysql主备切换canal出现的问题解析
通过配置VIP,在进行主备切换时,出现的报错信息: 1.当主备节点当前binlog文件名称相同时,原主节点的position小于主备切换后的position,出现如下报错: 2020-07-02 15 ...
- 通过一道CTF学习HTTP协议请求走私
HTTP请求走私 HTTP请求走私 HTTP请求走私是针对于服务端处理一个或者多个接收http请求序列的方式,进行绕过安全机制,实施未授权访问一种攻击手段,获取敏感信息,并直接危害其他用户. 请求走私 ...
- scala中的val，var和lazy
转自:https://yerias.github.io/2020/03/19/scala/3/#3%EF%BC%9Alazy%E4%BF%AE%E9%A5%B0%E7%AC%A6%E5%8F%AF%E ...
- 插件Spire.PDF帮你高效搞定PDF打印
Spire.PDF介绍 Spire.PDF是一个专业的PDF组件,能够独立地创建.编写.编辑.操作和阅读PDF文件,支持 .NET.Java.WPF和Silverlight.Spire.PDF的PDF ...