百度前端技术学院-基础-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春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
随机推荐
- 查找数组中第k大的数
问题: 查找出一给定数组中第k大的数.例如[3,2,7,1,8,9,6,5,4],第1大的数是9,第2大的数是8-- 思考:1. 直接从大到小排序,排好序后,第k大的数就是arr[k-1]. 2. ...
- one-wallhaven 一个壁纸程序
one-wallhaven 一款基于 Electron 壁纸客户端 . gitee:https://gitee.com/ml13/wallhaven-electron github:https://g ...
- spring中的数据库操作类
例子一: package cn.itcast.service.impl; import java.util.List; import javax.sql.DataSource; import org. ...
- linux用户的增删改查(useradd/id/usermod/userdel)
与用户(user)相关的配置文件: /etc/passwd 注:用户(user)的配置文件: /etc/shadow 注:用户(user)影子口令文件: 与用户组(group)相关的配置文件: / ...
- vdbench测试实时可视化显示
前言 前一段时间碰到一个系统,用rados bench 去跑都还比较正常,但是一跑数据库就非常慢,测试工具会抛出延时过大的提示,经过排查发现,云平台中有一台虚拟机还运行着备份数据库的服务,而这个备份软 ...
- 修改ssh的默认22端口，并使用scp的方法
修改默认的22的ssh端口只需要修改 /etc/ssh/sshd_config 中的 port 字段为你想要的端口就可以了 以后用其他机器ssh登录这台机器只需要: ssh -p (port) (ip ...
- mysql数据库新增、修改、删除字段和修改表名
Mysql 删除,添加或修改表字段 删除 ALTER TABLE testalter_tbl DROP i; 新增 ALTER TABLE testalter_tbl ADD i INT; 指定位置新 ...
- Javaer 进阶必看的 RocketMQ ，就这篇了
每个时代,都不会亏待会学习的人. 大家好,我是 yes. 继上一篇 头条终面:写个消息中间件 ,我提到实现消息中间件的一些关键点,今天就和大家一起深入生产级别消息中间件 - RocketMQ 的内核实 ...
- SpringCloud Alibaba+New搭建企业级开发框架（三）：创建New工程
1.创建父工程:File > New > Project...,选择Maven,Create from archetype不要勾选,点击Next进入下一步,填写工程信息. image. ...
- 怎么用MindManager2019去做一个好的网络图
大家知道网络图吗?是由作业(箭线).事件(又称节点)和路线三个因素组成的.它是一种图解模型,形状如同网络,故称为网络图.运用网络图能够使步骤简洁明了,今天我我们就说一说网络图软件MindManager ...