百度前端技术学院-基础-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春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
随机推荐
- icmp port unreachable
端口不可达: client------>server 结果server回复端口不可达, 由于是icmp报文: 到达client内核协议栈后进入icmp_rcv处理: /* * Deal with ...
- nginx&http 第二章 ngx启动多进程
Nginx服务器使用 master/worker 多进程模式. 主进程(Master process)启动后,会接收和处理外部信号: 主进程启动后通过fork() 函数产生一个或多个子进程(work ...
- c++中的几种函数调用约定（转）
C++中的函数调用约定(调用惯例)主要针对三个问题: 1.参数传递的方式(是否采用寄存器传递参数.采用哪个寄存器传递参数.参数压桟的顺序等): 参数的传递方式,最常见的是通过栈传递.函数的调用方将参数 ...
- Linux_end
1.ps 查看进程 ps 查看进程 ps aux 查看所有进程 ps -ef 查看所有进程的详细信息 2.pstree 查看进程树 3.top 查看系统的健康状况 4.netstar 显示网络统计信息 ...
- Git-commit与回滚
# 提交-信息 git commit -m "message" git commit -a -m "message" // 等同于 git add . & ...
- [LeetCode题解]109. 有序链表转换二叉搜索树 | 快慢指针 + 递归
题目描述 给定一个单链表,其中的元素按升序排序,将其转换为高度平衡的二叉搜索树. 本题中,一个高度平衡二叉树是指一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1. 示例: 给定的有序链表: ...
- C# Random类的正确应用
Random类介绍 Random类一个用于产生伪随机数字的类.这里的伪随机表示有随机性但是可以基于算法模拟出随机规律. Random类的构造方式有两种. Random r= new Random(). ...
- zabbix的搭建及操作（3）监控 MySQL 及 HTTP 状态监控
书接上回 -- 详情点击 Server端以配置好 mariadb(MySQL) 及 http 服务 Zabbix实现监控 mysql 数据库 server服务器端配置 vim /usr/local/z ...
- Vim注释行的方法
目录 一.Visual block 加注释 去注释 二.正则表达式 加注释 去注释 一.Visual block 加注释 1.首先按键盘上的ESC进入命令行模式 2.再按Ctrl+V进入VISUAL ...
- Python判断是否为数字
前言 Python isdigit()方法检测字符串是否只由数字组成. isdigit()方法语法: str.isdigit() 如果字符串只包含数字则返回 True 否则返回 False. 示例 x ...