百度前端技术学院-基础-day20-21
第二十到第二十一天：让你和页面对话
task1 控制元素的显示及隐藏
实现以下功能：
- 当用户选择了 School 的单选框时，显示 School 的下拉选项，隐藏 Company 的下拉选项
- 当用户选择了 School 的单选框时，显示 Company 的下拉选项，隐藏 School 的下拉选项
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>IFE ECMAScript</title>
6 <style>
7 select {
8 display: none;
9 }
10 </style>
11 </head>
12 <body>
13 <label>
14 <input id="school" name="status" type="radio">
15 School
16 </label>
17 <label>
18 <input id="company" name="status" type="radio">
19 Company
20 </label>
21
22 <select id="school-select">
23 <option>北京邮电大学</option>
24 <option>黑龙江大学</option>
25 <option>华中科技大学</option>
26 </select>
27
28 <select id="company-select">
29 <option>百度</option>
30 <option>爱奇艺</option>
31 </select>
32 <script>
33 var d1 = document.querySelector('#school');
34 var d2 = document.querySelector('#company');
35 var s1 = document.querySelector('#school-select');
36 var s2 = document.querySelector('#company-select');
37 d1.addEventListener('click', function(){
38 if (d1.checked == true){
39 s1.style.display = 'inline';
40 s2.style.display = 'none';
41 }
42 })
43 d2.onclick = function(){
44 s2.style.display = 'inline';
45 s1.style.display = 'none';
46 }
47 </script>
48 </body>
49 </html>
task2
百度前端技术学院-基础-day20-21的更多相关文章
- 百度前端技术学院-基础-day1
2020.9.14 今天我开始在百度前端技术学院学习基础课程. 先立一个Flag,希望我能在30天之内学完前四十天的课程,后续课程再一天一节. 第一天的内容主要是提供了很多基础学习的网页,比如W3sc ...
- 百度前端技术学院-基础-day2
2020.9.15 今天是学习前端基础技术的第二天,今天制作了一个在线简历,纯html的那种.帮助我复习了以前的基础知识,也增加了新的知识点,比如制作列表可以用fieldset来整合数据. 我的在线简 ...
- 百度前端技术学院-基础-day17-18
JavaScript小练习 task 1 基于上一个任务中,关于加减乘除的任务,加上对于特殊情况的判断,比如判断两个输入框是否都是正常输入了数字类型的内容,比如除法的时候除数是否为0,当判断到输入有异 ...
- 百度前端技术学院-基础-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春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
随机推荐
- [MIT6.006] 6. AVL Trees, AVL Sort AVL树，AVL排序
之前第5节课留了个疑问,是关于"时间t被安排进R"的时间复杂度能不能为Ο(log2n)?"和BST时间复杂度Ο(h)的关系.第6节对此继续了深入的探讨.首先我们知道BST ...
- MyBatis 中 @Param 注解的四种使用场景
https://juejin.im/post/6844903894997270536 第一种:方法有多个参数,需要 @Param 注解 第二种:方法参数要取别名,需要 @Param 注解 第三种:XM ...
- fork函数拓展
1.fork之后父子进程共享文件:文件引用计数的值改变,共享偏移. 在下面的例子中test.txt为parentchil.如果子进程没有睡眠,两个进程交叉执行,内容不可预测. 1 #include&l ...
- Notepad++安装教程
1.官网下载 官方网站:https://notepad-plus-plus.org/downloads/ 上面有历史版本,一般就选择最新版下载 2.安装 [3]打开记事本进行设置: 设置--& ...
- 关于多线程--网络编程 -- 注解反射的一点笔记（JAVA篇）
一 . 线程 java开启一个线程的方法(三种) 方法一:继承Thread类并New一个线程对象 步骤: 1):定义一个类A继承于Java.lang.Thread类. class TestThread ...
- Boost命令行解释器的简单使用：Boost.Program_options
简介 如果使用比较多的命令行程序的话,对于命令行参数的输入肯定不会陌生,大部分的程序都是通过类似下面的形式进行输入的,比如熟悉的ls ls --all -l --color=auto 这里面包含了三种 ...
- javascript——什么是解释型语言？
摘要:<JavaScript基础与案例开发详解>(张孝祥,徐明华)第2章JavaScript环境,本章力求让读者了解JavaScript的开发环境.运行环境,和开发中会遇见的一些问题,做好 ...
- 给PDF文件创建书签，实现快速导航
当文档中的页码比较多的情况下,使用目录进行导航是一个很好用的方法,为文档内容制作目录,方便快速查找目标内容.除了内容的快速导航,书签还能指明不同书签的层级关系,展现文档的结构. 图1:书签的功能 一. ...
- guitar pro系列教程（一）：Guitar Pro主界面之记谱功能的详细解析【上】
相信弹吉他的朋友们对guitar pro这款软件并不陌生,也有很多朋友用它来看谱制谱.而GP有很多实用功能,能够使我们看谱更清晰,制谱更便捷,所以让我们一起来看看吧 Guitar Pro对初学作曲,特 ...
- locust使用小技巧（v0.13.5）
Windows下载: pip install locustio==0.13.5; 以下基于locust的0.13.5,写文章时时2019年,没想到2020年就大变样了 locust是基于python的 ...