前端中switch语句（关于web前端的一个如何使按钮连接的方法）

本文目录

• 关于web前端的一个如何使按钮连接的方法
• 零基础如何学习前端
• 前端枚举
• 组合框选择不同选项列表框显示相关内容代码怎么写

关于web前端的一个如何使按钮连接的方法

《html》
《head》
《title》简易计算器《/title》
《script》
function display(val){
var display = document.getElementById("display");
display.value += val;
}
function result(){
var display = document.getElementById("display");
var res = eval(display.value);
display.value = res;
}
function toClear(){
document.getElementById("display").value = "";
} 
window.onload = function(){
  document.onkeydown = function(e){
     e = e || event;
     var keyCode = e.keyCode;
     //alert(keyCode);
    var shiftKey = e.shiftKey;
    if(shiftKey){ //shift + 按键
      switch(keyCode){
        case 56:
         display("*");
         break;
       case 187:
          display("+");
          break;
      }
    }else{ //普通按键
      switch(keyCode){
        case 48:
        case 49:
        case 50:
        case 51:
        case 52:
        case 53:
        case 54:
        case 55:
        case 56:
        case 57:
          display(keyCode - 48);
          break;
        case 67:
          toClear();
          break;
        case 106:
         display("*");
         break;
        case 107:
          display("+");
          break;
        case 109:
        case 189:
          display("-");
          break;
        case 111:
        case 191:
          display("/");
          break;
        case 187:
          result();
          break;
      }
    }
  }
}
《/script》
《style type="text/css"》
input {
height: 2.5em;
width: 5em;
}
input#display {
width:100%;
}
《/style》
《/head》
《body》  
《table border="1" align="center" frame="box" rules="all"》
《tr》
《td colspan="3"》《input type="text" id="display" disabled /》《/td》
《td》
《input name="按钮" type="button" onClick="result()" value="计算" /》 《/td》
《/tr》
《tr》
《td》《input type="button" value="7" onClick="display(this.value)" /》《/td》
《td》《input type="button" value="8" onClick="display(this.value)" /》《/td》
《td》《input type="button" value="9" onClick="display(this.value)" /》《/td》
《td》《input type="button" value="+" onClick="display(this.value)" /》《/td》
《/tr》
《tr》
《td》《input type="button" value="4" onClick="display(this.value)" /》《/td》
《td》《input type="button" value="5" onClick="display(this.value)" /》《/td》
《td》《input type="button" value="6" onClick="display(this.value)" /》《/td》
《td》《input type="button" value="-" onClick="display(this.value)" /》《/td》
《/tr》
《tr》
《td》《input type="button" value="1" onClick="display(this.value)" /》《/td》
《td》《input type="button" value="2" onClick="display(this.value)" /》《/td》
《td》《input type="button" value="3" onClick="display(this.value)" /》《/td》
《td》《input type="button" value="*" onClick="display(this.value)" /》《/td》
《/tr》
《tr》
《td》《input type="button" value="." onClick="display(this.value)" /》《/td》
《td》《input type="button" value="0" onClick="display(this.value)" /》《/td》
《td》《input type="button" value="C" onClick="toClear()" /》《/td》
《td》《input type="button" value="/" onClick="display(this.value)" /》《/td》
《/tr》
《/table》
《/body》
《/html》

其实主要就是加个键盘事件监听，这里用的keydown，改成keyup亦可，然后主要是了解思想，代码仅供参考

零基础如何学习前端

零基础学习前端的话，自学和培训两条路。

自主学习成本相对来说较低，可以从网上找到相关的书籍、视频进行学习。锻炼自己，能从生活总锻炼自己自主的能力、控制力、协调力，对自身有一个很大的提高。学习内容会很深刻，自己一步一步学来的，很多知识会牢牢记住在脑海中。

自学的话，你需要注意以下几点：

1、兴趣动力

俗话说得好，兴趣是最好的老师。不管是零基础还是有经验，想要学习某样知识就需要对它产生兴趣，带着探索求知的心态去接触、了解并学习它，会使自己更加容易接受新知识，而不是为了完成任务似的机械性学习，枯燥无味，重复内容，这样只会让自己对学习内容产生抵触和厌烦的心理。

2、学习规划

学习前端，资料必不可少，闲暇之余上网查查一些相关的前端书籍和视频教程都可以，两者结合着看。书籍补充基本知识，打好基础才是关键；视频教程提升技能操作度，让自己熟练掌握知识，可以看自己的实际情况决定。

其次，不管你是学生还是上班族，想要学好某样技能就必须安排好学习它的时间，做好两全其美的准备，不要拆了东墙补西墙，最后只会两败俱伤，得不偿失。

3、坚持与指导

很多人刚开始都是信心满满豪情万丈的学习前端，但是过不了多久就都蔫了，临阵脱逃了，为什么？是学习内容枯燥无味还是知识越学越难学不下去？都不是，是你自己没有坚持学下去的勇气罢了；我可以告诉你，科技在进步，学习内容也会越来越多，难易程度也会随之提升，不仅实现在难，将来会更难，坚持不下去，那你就趁早放弃，别浪费时间和精力。

还有一点，你需要一位指引人，单单靠自己是学不下去的，尤其是小白。学习过程中会有很多问题，如果你没有一位帮助你解决问题的老师，只会死磕答案的话，不仅得不到对的答案，也走不了多远，只会半途而废。好的老师不仅学习上可以帮助你，还会在生活、心理上帮助你，为你排忧解难。

自学方法

1、作为一个初学者，你必须明确系统的学习方案，我建议一定有一个指导的人，全靠自己学，放弃的几率非常大，在你对于web前端还没有任何概念的时候，需要一个人领进门，之后就都靠自己钻研，第一步就是确定web前端都需要哪些内容，并且在多少时间内学完，建议时间6个月保底。

2、视频为主，书为辅。很多初学者在学习前端的时候非常喜欢去买书，但是最后的结果是什么？看来看去什么都不会写，所以在这里给大家提醒，书可以看，但是是在建立于你已经对于某个知识点有了具体操作的执行后，在用书去巩固概念，这样更加利于你对于知识的理解。

3、对于学习技术来讲，掌握一个学习方法是非常重要的，其实对于学习web前端来讲，学习方法确实很多都是相通的，一旦学习方法不对，可能就会造成“方法不对，努力白费”。其实关于这方面还是很多的，我就简单说个例子，有的人边听课边跟着敲代码，这样就不对，听课的时候就专心听，做题的时候就专心做题，这都是过来人的经验，一定要听。根据每个人的不同，可能学习方法也会有所出路，找到适合你自己的学习法方法是学习的前提。

4、不建议自己一个人瞎学，在我了解学习编程的这些人来看，从零基础开始学并且最后成功做这份工作的其实并没有几个，我觉得大部分原因就是因为他们都不了解web前端是干什么的，学什么的，就盲目的买书看，到处找视频看，最后看着看着就放弃了，所以我建议初学者在没有具体概念之前，还是找有经验的人请教一下，聊过之后你就会知道web前端具体是干什么的，该怎么学，这是我个人的小建议，可以不采纳。

学前端的话，书籍是必不可少的：

1、《JavaScript高级程序设计(第3版) 红皮书 》，适合有一定编程经验的Web应用开发人员阅读，也可作为高校及社会实用技术培训相关专业课程的教材。

2、《JavaScript权威指南(第6版)》 犀牛书，本书不仅适合初学者系统学习，也适合有经验的 JavaScript 开发者随手翻阅。

3、《JavaScript DOM编程艺术 (第2版)》，本书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践，并全面探讨了HTML5以及jQuery等JavaScript库。

4、《CSS权威指南(第三版)》，不管你是一个有经验的Web开发人员还是一个彻底的初学者，《CSS权威指南(第3版)》都是你的CSS学习源泉。

5、《JavaScript设计模式》，适合JavaScript初学者、前端设计者、JavaScript程序员学习，也可以作为大专院校相关专业师生的学习用书，以及培训学校的教材。

6、《你不知道的JavaScript(上中下卷) 》，本书既适合JavaScript语言初学者了解其精髓，又适合经验丰富的JavaScript开发人员深入学习。

7、《Vue.js权威指南》，该书内容全面，讲解细致，实例丰富，适用于各层次的开发者。

学习路线：

第1阶段：前端页面重构(4周)

内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)

第2阶段：JavaScript高级程序设计(5周)

内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)

第3阶段：PC端全栈项目开发(3周)

内容包含：(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)

第4阶段：移动端项目开发(6周)

内容包含：(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)

第5阶段：混合(Hybrid,ReactNative)开发(1周)

内容包含：(微信小程序开发、ReactNative、各类混合应用开发)

第6阶段：NodeJS全栈开发(1周)

内容包括：(WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库)

如果你资金允许，选择培训班，这几点你可以参考一下：

1、是否最懂前端

为什么要看重培训机构这一点呢?因为前端是一门衔接UI和后台开发的职位，这个机构只有同时懂前端设计和后台开发才能做出最全面、最专业的前端课程，我们才能学到高性价比的web前端课程。

2、web课程设置是否等于企业招聘要求

选择培训机构的时候要看该机构是否包含了全面的web系列课程，企业需求的技能是否在课程中都有相关的内容。另外，我们除了要看培训机构教不教这些内容，还要看培训机构的在这些技术领域是否专业，web前端工程师课程完全专注于前端知识，全面、深入的讲解HTML5、CSS3、Java、JQuery等内容，我们要看培训机构是否能将这些核心知识让我们学到极致。

3、妥善的就业保障

首先，这个培训机构是否有课程体系的保障，能让我们边学边练，并且能够分阶段的让我们学会前端所有的技能。

其次，这个培训机构是否有师资团队保障体系，是否有总监级讲师授课和上项目实战经验课，是否有技术最牛的行业老师，是否有完善的同步教学系统。

参加培训班的话，学习时间花费相对来说，较短。自学时间会长一点，因为自控力什么的都是非常考验的。讲师授课，可以随时请教老师，遇到问题能及时解决，技术提升也会很快。系统的学习web前端知识。一般培训都会有系统的课程，根据课程安排每天的学习，学习的内容很全面；管理严，培训机构管理很严；有伙伴，做起事情来更好，因为小伙伴的相互鼓励，共同探讨，不仅能让你收获一批朋友，还对学习有很大的帮助！

最后，欢迎加入我的前端qq交流群，里面也是一群学前端的小伙伴，我们可以一起学习，互相监督，互相交流学习经验，一起进行项目实践，还有很多学习资料哦~期待你的加入。

前端枚举

洗数据
deep(r): void {
const map = {
0: ’首页模块’,
1: ’营销模块’,
2: ’首页背景’,
3: ’首页模块’,
};
for (let i of r) {
let num = i.type;
i;
}
return r

switch (num) {
case 0:
i = ’首页模块’;
break;
case 1:
i = ’营销模块’;
break;
case 2:
i = ’首页头部’;
break;
case 3:
i = ’首页背景’;
break;
default:
i = ’首页模块’;
}

组合框选择不同选项列表框显示相关内容代码怎么写

要实现组合框选择不同选项列表框显示相关内容，可以使用JavaScript编写。具体的代码实现如下：
```javascript
《html》
《head》
《title》组合框选择不同选项列表框显示相关内容《/title》
《/head》
《body》
《select onchange="selectChange()"》
《option value="1"》选项1《/option》
《option value="2"》选项2《/option》
《option value="3"》选项3《/option》
《/select》
《select id="content"》
《/select》
《script type="text/javascript"》
function selectChange(){
var select = document.getElementsByTagName("select");
var index = select.selectedIndex;
var content = document.getElementById("content");
content.options.length = 0;
switch(index){
case 0:
content.options.add(new Option("选项1-1", "1-1"));
content.options.add(new Option("选项1-2", "1-2"));
break;
case 1:
content.options.add(new Option("选项2-1", "2-1"));
content.options.add(new Option("选项2-2", "2-2"));
break;
case 2:
content.options.add(new Option("选项3-1", "3-1"));
content.options.add(new Option("选项3-2", "3-2"));
break;
}
}
《/script》
《/body》
《/html》
```
在以上代码中，我们使用了HTML的select标签来创建组合框，使用onchange属性来监听组合框的选择变化。当组合框的选择发生变化时，会触发selectChange()函数。在这个函数中，我们获取到当前选中的选项，并根据选项的不同，动态生成相关的内容，即使用了JavaScript的switch语句来实现。
具体来说，我们在页面中使用了两个select标签，第一个是组合框，第二个是列表框。当组合框选择变化时，根据不同的选项，使用JavaScript的options.add()方法动态生成相应的选项，并添加到列表框中。而由于每次选择变化时都需要重新生成选项列表，因此我们需要在生成新的选项列表之前，先将原有的选项全部清空，即使用了options.length = 0来清空列表框。
需要注意的是，以上代码中的具体选项值仅供参考，实际应用时需要根据具体情况进行修改。此外，由于使用了JavaScript来实现动态生成选项列表，因此需要确保浏览器支持JavaScript。