百度前端技术学院-基础-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春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
随机推荐
- 聊聊Spark的分区、并行度 —— 前奏篇
通过之前的文章[Spark RDD详解],大家应该了解到Spark会通过DAG将一个Spark job中用到的所有RDD划分为不同的stage,每个stage内部都会有很多子任务处理数据,而每个sta ...
- binary hacks读数笔记(堆、栈 VMA的分布)
一.首先看一个简单的程序: #include<stdlib.h> int main() { while(1) { sleep(1000); } return 0; } gcc -stati ...
- com.aliyun.oss.ClientException: Connection error due to: Connection pool shut down
com.aliyun.oss.ClientException: Connection error due to: Connection pool shut down[ErrorCode]: Unkno ...
- 利用分块传输绕WAF
分块传输原理介绍 背景 HTTP Connection有两种连接方式:短连接和长连接: 短连接即一次请求对应一次TCP连接的建立和销毁过程. 长连接是多个请求共用同一个连接这样可以节省大量连接建立时间 ...
- [web安全原理分析]-文件上传漏洞基础
简介 前端JS过滤绕过 待更新... 文件名过滤绕过 待更新 Content-type过滤绕过 Content-Type用于定义网络文件的类型和网页编码,用来告诉文件接收方以什么形式.什么编码读取这个 ...
- centos8 mysql8遇到的问题
1.装了第一遍,连接没遇到问题,没注意是怎么装的:本机连,外部连都没碰到问题: 遇到了表名大小写的问题,改了配置文件my.cnf或/etc/my.cnf.d/mysql-server.cnf的文件 在 ...
- Ubuntu14.04下安装Composer
下载Composer: curl -sS https://getcomposer.org/installer | php 安装Composer: /usr/bin/php composer.phar ...
- yii2.0 中数据查询中 or、in、between 及session的使用
1 HTML: 2 3 <div> 4 <form class="form-inline " method="get" action=&quo ...
- 企业安全05-Fastjson <=1.2.47反序列化RCE漏洞（CNVD-2019-22238）
Fastjson <=1.2.47反序列化RCE漏洞(CNVD-2019-22238) 一.漏洞描述 Fastjson 是阿里巴巴的开源JSON解析库,它可以解析 JSON 格式的字符串,支持将 ...
- Appium上下文和H5测试(二)
坚持原创输出,点击蓝字关注我吧 作者:清菡 博客:oschina.云+社区.知乎等各大平台都有. 文章总览图 一.往期回顾 loc='new UiSelector().text("全程班&q ...