百度前端技术学院-基础-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春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
随机推荐
- 查找数组中第k大的数
问题: 查找出一给定数组中第k大的数.例如[3,2,7,1,8,9,6,5,4],第1大的数是9,第2大的数是8-- 思考:1. 直接从大到小排序,排好序后,第k大的数就是arr[k-1]. 2. ...
- 一键SSH连接 = SSH密钥登陆 + WindowsTerminal
本文记录如何利用SSH密钥登录和WindowsTerminal/FluentTerminal实现一键SSH连接 目录 一.在本地生成SSH密钥对 二.在远程主机安装公钥 三.在远程主机打开密钥登陆功能 ...
- 【Java从入门到精通】day08-包机制-JavaDoc生成文档
1.包机制 为了更好地组织类,Java提供了包机制,用于区别类名的命名空间. 包语句的语法格式为: package pkg1[.pkg2[.pkg3...]]; 一般利用公司域名倒置作为包名(如www ...
- Spring源码之@Configuration原理
总结 @Configuration注解的Bean,在BeanDefinition加载注册到IOC容器之后,进行postProcessBeanFactory处理时会进行CGLIB动态代理 将@Prope ...
- day93:flask:
目录 1.HTTP的会话控制 2.Cookie 3.Session 4.请求钩子 5.捕获错误 6.上下文:context 7.Flask-Script 1.HTTP的会话控制 1.什么是会话控制? ...
- C# 简易的串口监视上位机实现
实现上位机和下位机之间的通信,通常使用的是串口通信,接下来实现一个通过上位机和串口调试助手来完成串口通信测试. 首先创建一个WInfrom窗体应用工程文件,创建过程可参考https://www.cnb ...
- oss文件上传删除（批量删除）处理
博主用的是阿里云的oss 首先先在阿里云下载安装sdk,相关的sdk下载请自行到阿里云下载 文档地址 https://help.aliyun.com/document_detail/85580.h ...
- Hadoop大数据平台搭建之前期配置（1）
环境:CentOS 7.4 (1708 DVD) 工具:VMware.MobaXterm 一. 网络配置 1. 在VMware中安装虚拟机,此步骤不作赘述. 2. 镜像文件保留在固定目录下,网络适配 ...
- pandas 生成html文档，支持可添加多个表
如何通过pandas生成html格式?如何通过pandas生成html文件文件中包含多个表单Balance_64_data = pd.read_sql(Balance_64_sql,engine)df ...
- Java 枚举 enum 详解
本文部分摘自 On Java 8 枚举类型 Java5 中添加了一个 enum 关键字,通过 enum 关键字,我们可以将一组拥有具名的值的有限集合创建为一种新的类型,这些具名的值可以作为常规的程序组 ...