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

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. fcntl函数用法——复制文件描述符

    文件描述符复制和输出重定向dup() 用最小的文件描述符来复制,从0开始搜素.复制文件描述符后,最小文件描述符指向被复制描述符指向的文件.dup2(int oldfd,int newfd) 强制用ne ...

  2. 目录方式扩展swap分区大小

    1.查看swap大小:free  -m  (-k|m|g) --以k|m|g为单位用去尾法显示大小  [root@lbg tmp]# free -m total        used        ...

  3. Cephfs的快照功能

    前言 Cephfs的快照功能在官网都很少提及,因为即使开发了很多年,但是由于cephfs的复杂性,功能一直没能达到稳定,这里,只是介绍一下这个功能,怎么使用,并且建议不要在生产中使用,因为搞不好是会丢 ...

  4. Kafka高性能揭秘：sequence IO、PageCache、SendFile的应用详解

    大家都知道Kafka是将数据存储于磁盘的,而磁盘读写性能往往很差,但Kafka官方测试其数据读写速率能达到600M/s,那么为什么Kafka性能会这么高呢? 首先producer往broker发送消息 ...

  5. SQL Server 数据库开启日志CDC记录，导致SQL Server 数据库日志异常增大

    这几天单位的SQL Server业务数据生产库出现数据库日志增长迅速,导致最终数据无法写入数据库,业务系统提示"数据库事务日志已满",经过多方咨询和请教,终于将日志异常的数据库处理 ...

  6. C语言复习系列-转义字符

    C语言复习系列-转义字符 准备学习stm32单片机,感觉需要复习一下C语言,翻看了菜鸟教程,竟然有不少地方看不懂,真让人汗颜······ 转义字符大部分语言里面都有,至少我学过的里面都有,在这些语言中 ...

  7. [前端web安全]XSS漏洞基础入门

    前言 XSS漏洞 Xss(Cross-Site Scripting)意为跨站脚本攻击,为了不和层叠样式表(Cascading Style Sheets,CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS ...

  8. python-网络安全编程第六天(threading多线程模块&Queue模块&subprocess模块)

    前言 昨天晚上9点多就睡了 2点起来没睡意... 那就学习吧emmmm ,拿起闲置几天的python课程学习.学习到现在5.58了 总结下 继续开始学习新的内容 多多线程? 线程(英语:thread) ...

  9. 阿里面试官：小伙子，给我说一下Spring 和 Spring Boot 的区别吧

    前言 对于 Spring和 SpringBoot到底有什么区别,我听到了很多答案,刚开始迈入学习 SpringBoot的我当时也是一头雾水,随着经验的积累.我慢慢理解了这两个框架到底有什么区别,相信对 ...

  10. Guitar Pro小课堂——如何进行消音

    在我们弹吉他时,消音技术是必须掌握的一项吉他技能.在我们遇到休止符时.乐曲结束时.乐段,乐句中止时.吉他旋律的分句,呼吸处:变换和弦时的低音(尤其是空弦低音).断奏.弹奏强音时其他空弦被激起的共鸣音( ...