百度前端技术学院-基础-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春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
随机推荐
- Socket accept 简要分析
accept 用于从指定套接字的连接队列中取出第一个连接,并返回一个新的套接字用于与客户端进行通信,示例代码如下 #include <sys/types.h> /* See NOTES * ...
- TIP/Collision-Free Video Synopsis Incorporating Object Speed and Size Changes Code
代码地址 https://github.com/scutlzk/Collision-Free-Video-Synopsis-Incorporating-Object-Speed-and-Size-C ...
- vue 使用中的小技巧 （一）
在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发.下面有一些我在日常开发的时候用到的小技巧 data 和 Object.freeze 每个Vue实 ...
- 练习启动各种浏览器的同时加载插件：Firefox， Chrome， IE
# -*- coding:utf-8 -*-import osimport seleniumfrom selenium import webdriverfrom selenium.webdriver. ...
- MindManager教程：高中数学函数思维导图怎么画
说起函数,大家应该都不陌生吧,函数不论是在初中还是在高中都是需要重点学习的知识点,不仅仅是重点,更是作为难点曾出现在高考最后一道大题中.那今天我们就来做一个函数思维导图,来简单地了解一下关于函数的一些 ...
- 【MathType教学】表示分类的大括号怎么打
大括号是一种常见的数学符号,可以用于集合.分段函数中,其实大括号还可以用来总结数学知识,比如对三角形进行分类,此时用的大括号可以称为表示分类的大括号.MathType作为专业的数学公式编辑器,可以快速 ...
- 面试题59 - II. 队列的最大值
请定义一个队列并实现函数 max_value 得到队列里的最大值,要求函数max_value.push_back 和 pop_front 的时间复杂度都是O(1). 若队列为空,pop_front 和 ...
- leetcode116. 填充每个节点的下一个右侧指针
给定一个完美二叉树,其所有叶子节点都在同一层,每个父节点都有两个子节点.二叉树定义如下:struct Node { int val; Node *left; Node *right; Node ...
- centos8 安装lnmp
1. 最小化安装 2. 配置基本信息 hostnamectl set-hostname aaa_name 为了每次系统重新启动时,都可以获取更大的ulimit值,将ulimit 加入到/etc/pro ...
- Linux 系统故障排查，这里看过来
来源:https://www.jianshu.com/p/0bbac570fa4c 导读 有时候会遇到一些疑难杂症,并且监控插件并不能一眼立马发现问题的根源.这时候就需要登录服务器进一步深入分析问题的 ...