百度前端技术学院-基础-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春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
随机推荐
- Centos7上一次War包的部署与运行
Centos7上一次War包的部署与运行 前言 由于前段时间第一次部署一个小型的项目,时间一长所以有些步骤有时候时间一长就忘了,在此做个简单的记录 一.原始系统开发环境 操作系统:Windows10: ...
- 设计模式之工厂模式(Factory模式）
在面向对象系统设计中经常遇到以下两类问题: 1)为了提高内聚(Cohesion)和松耦合(Coupling),我们经常会抽象出一些类的公共接口以形成抽象基类或者接口.这样我们可以通过声明一个指向基类的 ...
- 二：Tomcat与登录
在使用Tomcat部署服务器之前我们需要写一个页面登录的HTML文本 该文本如下 <!DOCTYPE html> <html> <head> <meta ch ...
- Ubuntu 12.10设置root用户登录图形界面
Ubuntu 12.04默认是不允许root登录的,在登录窗口只能看到普通用户和访客登录.以普通身份登陆Ubuntu后我们需要做一些修改,普通用户登录后,修改系统配置文件需要切换到超级用户模式,在终端 ...
- stm32串口的配置方案
最近老板要我去做控制方面的内容,所以买了一块正点原子的开发板,现在是研究了一下usart.c,函数的代码如下: void USART1_IRQHandler(void) { u8 Res; #ifde ...
- flink1.10版本StreamGraph生成过程分析
1.StreamGraph本质 本质就是按照用程序代码的执行顺序构建出来的用于向执行环境传输的流式图,并且可以支持可视化展示给用户的一种数据结构. 2.StreamGraph.StreamNode和S ...
- Linux权限位(含特殊权限位s s t) 及chown\chmod命令使用
1.普通权限位 ls –l查看文件的属性 [root@oldboy ~]# ls -l -rw-------. 1 root root 1073 Mar 4 22:08 anaconda-ks.cfg ...
- Python 调用接口添加头信息
import requests,jsonurl = 'http://47.108.115.193:9000/tb-store/store/getWechatAppHome'header={" ...
- [web安全原理分析]-文件上传漏洞基础
简介 前端JS过滤绕过 待更新... 文件名过滤绕过 待更新 Content-type过滤绕过 Content-Type用于定义网络文件的类型和网页编码,用来告诉文件接收方以什么形式.什么编码读取这个 ...
- 03python开发之流程控制
03 python开发之流程控制 目录 03 python开发之流程控制 3 流程控制 3.1 流程判断之if判断 3.1.1 代码块 3.1.2 if判断基础语法 3.1.3 案例 3.1.4 if ...