第二十到第二十一天：让你和页面对话

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的更多相关文章

  1. 百度前端技术学院-基础-day1

    2020.9.14 今天我开始在百度前端技术学院学习基础课程. 先立一个Flag,希望我能在30天之内学完前四十天的课程,后续课程再一天一节. 第一天的内容主要是提供了很多基础学习的网页,比如W3sc ...

  2. 百度前端技术学院-基础-day2

    2020.9.15 今天是学习前端基础技术的第二天,今天制作了一个在线简历,纯html的那种.帮助我复习了以前的基础知识,也增加了新的知识点,比如制作列表可以用fieldset来整合数据. 我的在线简 ...

  3. 百度前端技术学院-基础-day17-18

    JavaScript小练习 task 1 基于上一个任务中,关于加减乘除的任务,加上对于特殊情况的判断,比如判断两个输入框是否都是正常输入了数字类型的内容,比如除法的时候除数是否为0,当判断到输入有异 ...

  4. 百度前端技术学院-基础-day22-24

    第二十二天到第二十四天:JavaScript里面的居民们 task1 题目: <div> <label>Number A:<input id="radio-a& ...

  5. 百度前端技术学院-基础-day25-27

    倒数开始 滴答滴 滴答滴 task1 题目: 我们现在来做一个最简单的时钟,通过小练习来学习 Date,复习定时,然后再练习一下函数的封装具体需求如下: 在页面中显示当前日期及时间,按秒更新 格式为 ...

  6. 百度前端技术学院-基础-day7.8

    任务:参考如下设计稿实现HTML页面及CSS样式 代码 点击预览 HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 & ...

  7. 百度前端技术学院-基础-day3

    2020.9.15 第三天的课程内容,复习了一些CSS的基础属性(果然不用就会忘). 学习了一些新的属性,比如text-shadow.text-indent(还不是很清楚).font-style等等. ...

  8. 百度前端技术学院-基础-day5.6

    今天学习了关于盒模型.浮动等页面布局的方法. 受到同学的启发,顺便学习了flex的布局. 还了解了一些编码的基本规则. 对我接下来的学习帮助很大. 交作业: HTML : https://github ...

  9. 百度前端技术学院（IFE）2016春季学期总结

    今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...

随机推荐

  1. Spring5.0源码学习系列之浅谈懒加载机制原理

    前言介绍 附录:Spring源码学习专栏 在上一章的学习中,我们对Bean的创建有了一个粗略的了解,接着本文挑一个比较重要的知识点Bean的懒加载进行学习 1.什么是懒加载? 懒加载(Lazy-ini ...

  2. 庐山真面目之四微服务架构Consul集群和Nginx版本实现

    庐山真面目之四微服务架构Consul集群和Nginx版本实现 一.简介      在上一篇文章<庐山真面目之三微服务架构Consul版本实现>中,我们已经探讨了如何搭建基于单节点Consu ...

  3. binary hacks读数笔记(nm命令)

    nm命令(names):输出包含三个部分:1 符号值.默认显示十六进制,也可以指定: 2 符号类型.小写表示是本地符号,大写表示全局符号(external); 3 符号名称. 例如:nm Simple ...

  4. BeatifulSoup在测试工作中的应用

    近期要做一个项目,重复性劳动比较多,小伙伴建议我用Jsoup,但是由于项目紧急,我直接选择了BeautifulSoup,关键原因是我Java语言不如Python掌握的熟练啊!所以,查了一圈它的中文文档 ...

  5. 一文解析TCP/UDP

    声明:本文部分内容来自互联网.书籍等渠道,表示感谢: 转载请注明出处:@热风.https://www.cnblogs.com/refeng/p/13996657.html 目录 TCP/UDP详解 1 ...

  6. Canvas实现放大镜效果完整案例

    本文主要记录 canvas 在图像.文字处理.离屏技术和放大镜特效的实现过程中使用到的API.先看下效果吧: 一张模糊的图片: 鼠标点击任意位置,产生放大效果: 哇塞~ 一个帅哥,哈哈哈哈~ 1.显示 ...

  7. 吉他指弹入门——贝斯（walking bass）

    在每一个乐队中都有一个神秘而低调的乐手,在现场演奏中你甚至感觉不到他的存在,但是他又异常重要.即是鼓手打拍的好伙伴,又是吉他手忘乎所以solo时的警报器.没错,这个人就是贝斯手.要是我们做了什么气跑了 ...

  8. MarkDown学习总结-2020.05.11

    1.使用工具 1.1Typora 官网地址:https://www.typora.io/ 下载链接 2.基础入门 注意: []中的内容则是对应格式的标记符,默认全部标识符后面需要多加一个空格才能生效. ...

  9. 一套标准的ASP.NET Core容器化应用日志收集分析方案

    讲故事 关注我公众号的朋友,应该知道我写了一些云原生应用收集和分析相关的文章,其中内容大多聚焦某个具体的组件: 超级有用的TraceId,快点用起来吧! 如何利用NLog输出结构化日志,并在Kiban ...

  10. vs2019 Com组件初探-简单的COM编写以及实现跨语言调用

    前提条件 1.掌握C++基础语法 2.平台安装 vs2019 3.本地平台为 windows 10 1909 X64 4.了解vbs基础语法 本次目标 1.掌握Com组件的概念及原理 2.编写一个简单 ...