js 给爱的人发个邮件吧

git作业地址

https://suyaru.github.io/Pre/Pre31/work01.html

原题

http://ife.baidu.com/course/detail/id/52

代码：

<html><head><script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script><link rel="stylesheet" href="work01.css"/></head><body><div class="wrapper"><input id="email-input" type="text" ><ul id="email-sug-wrapper" class="email-sug"></ul></div></body><script type="text/javascript">var emailInput=document.getElementById('email-input');var postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];var theUl=document.getElementById('email-sug-wrapper');var chooseIndex=0;// 页面加载时键盘获得焦点window.onload=function(){emailInput.focus();}// 键盘输入emailInput.onkeyup=function(event){//新增  如果按键不是上下及回车重置选中状态()  enter 13 上38 下40 esc 27if((event.keyCode==13||event.keyCode==38||event.keyCode==40)&&emailInput.value!=""){listenKeyWords();}else if(event.keyCode==27){emailInput.select();                // esc 内容全选}else{theUl.innerHTML="";                  // 增加一步，清空之前的所有内容var content=getInput();              // 获取用户输入var contentList=genarate(content);   // 生成提示框中的提示内容addContent(contentList);            //  将提示内容添加到email-sug-wrapper中 resetState();if(content==""){isHide();}else{isShow();} }}// 重置选中状态function resetState(){  var index=Number(findChoosed());if(index!=0){       // 当前选中状态Li不是第一个theUl.children[index].className="";setActive(theUl.children[0]);                       // 设置第一个Li为选中状态}}// 找到选中状态的 li的下标function findChoosed(){var k=0;for(var k in theUl.children){if(theUl.children[k].className=="active"){       // 当前选中状态Li不是第一个return k;}}if(k==0){return k;}}// 生成提示框中的提示内容function genarate(content){// 对于特殊字符进行转义编码content=transimite(content);var before="";var later;if(content.indexOf("@")!=-1){          // 存在@before=content.substr(0,content.indexOf("@"));later=content.substr(content.indexOf("@")+1,content.length-1);}if(later==undefined){before=content;}var theList=[];var count=0;for(var i in postfixList){if(postfixList[i].indexOf(later)==0){var p=document.createElement('p');p.innerHTML=before+"@"+postfixList[i];  theList.unshift(p.innerHTML);}else{count++;}}if(count==postfixList.length){for(var j in postfixList){var p=document.createElement('p');p.innerHTML=before+"@"+postfixList[j];  theList.unshift(p.innerHTML);}}return theList;}//  将提示内容添加到email-sug-wrapper中function addContent(contentList){for(var j in contentList){var li=document.createElement('li');li.innerHTML=contentList[j];li.setAttribute('class'," ");theUl.appendChild(li);}setActive(theUl.firstChild);}// 隐藏提示框function isHide(){theUl.style.visibility="hidden";}// 显示提示框function isShow(){theUl.style.visibility="visible";}// 监听鼠标点击theUl.onclick=function(e){e=e||window.event;e.target=e.target||e.srcElement;if(e.target.nodeName.toLowerCase()=='li'){  // 被点击的是不是提示框中的Li节点var choosing=e.target.innerHTML;        // 获取被点击Li对应的提示内容emailInput.value=choosing;              // 将内容放到input输入框中  isHide();                               // 隐藏输入框emailInput.focus();}}// 对于特殊字符进行转义编码function transimite(origin){var grex="";switch(origin){case '&':grex=origin.replace(/&/g,"&");break;case '<':grex=origin.replace(/</g,"<");break;case '>':grex=origin.replace(/>/g,"&rt;");break;case '<br>':grex=origin.replace(/<br>/g,"");break;case '\'':grex=origin.replace(/\'/g,"'");break;case '\"':grex=origin.replace(/\"/g,""");break;}if(grex==""){return origin;}else{return grex;}}// 默认第一个为选中状态function setActive(chooseNode){// 传入一个当前节点，先删除父节点下所有子节点的class=="active"var parent=chooseNode.parentNode;var children=parent.children;for(var i in children){if(children[i].className=="active"){removeClass(children[i]);}}chooseNode.className="active";}// 移除所有li 的class属性function removeClass(removeNode){removeNode.className="";}// 监听特殊3个键的键盘事件  enter 13 上38 下40function listenKeyWords(){             var index=Number(findChoosed());                // 找到当前为选中状态的Li  清除掉它的选中状态theUl.children[index].className="";if(event.keyCode==38){                  // 上键if(index!=0){setActive(theUl.children[index-1]);}else{setActive(theUl.lastChild);}}if(event.keyCode==40){                  // 下键if(index!=theUl.children.length-1){setActive(theUl.children[index+1]);}else{setActive(theUl.firstChild);}}if(event.keyCode==13){                  // 回车emailInput.value=theUl.children[index].innerHTML;emailInput.focus();isHide();}}// 获取用户输入function getInput(){var temp=emailInput.value.trim();return temp;}</script>
</html>

踩的坑

1、经常有说子节点或者父节点 undefined，主要原因是容易把 jquery和js 混用，比如 setAttribute 、className等，而往往是Jquery能用，Js 要自己写方法

2、有个坑纠结了一个小时，原来是index 没有强制转换成 Number 数据，所以每次报错都是子节点undefined

3、代码耦合性还是有点高，有时间再重写一遍

js 给爱的人发个邮件吧相关推荐

百度前端技术学院：第二十八天到第三十天给爱的人发个邮件吧
基于数据,我们设置一个变量,来保存当前选择的index(即当前选中的是第几行,从0开始计数),当发生上下键操作的时候,直接改变index值,然后重新渲染提示框中的所有html内容,根据index设置来 ...
初识angular.js之爱恨情仇
angular.js Angular.JS 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小, ...
爱思华宝邮件服务器协同工作服务功能介绍及其实现方法
伴随移动互联网浪潮的到来,移动办公已经成为当前企业办公环境不可或缺的重要组成部分,时时在线.随时随地办公的需求会越来越迫切.那如何借助移动互联,让我们的工作和生活变得更加轻松和智能,成为众多企业越来越 ...
用原生JS实现爱奇艺首页导航栏
最近接到领导的任务,要给外面的学生上几节前端课,备课的时候准备了一些小项目,在此记录一下. 以下是爱奇艺首页的一个导航栏,用原生js写的,静态页面效果如下: 代码如下: 1 <html> ...
爱思华宝邮件服务器技术规范
功能模块功能邮件系统引擎远程管理 – RCP (SSL) 通用数据库支持,支持 MySQL, MS SQL, Oracle, Firebird, SQLite 数据库迁移工具 DNS 工具,域信 ...
ES6读书笔记--对js对象爱的深沉
1.尾调用优化允许某些函数的调用被优化,以保持更小的调用栈.使用更少的内存,并防止堆栈溢出.当能进行安全优化时,它会由引擎自动应用.不过你可以考虑重写递归函数,以便能够利用这种优化 // 尾调用 ...
在春节来临之际使用 javascript + Node.js 实现邮件传输功能给远方的朋友发封邮件拜个早年
目录: 一.引言二.Nodemailer 模块 1.简介 2.特点 3.使用三.可重用的邮件发送模块(以服务器挂载路由函数为例) 四.总结一.引言电子邮件,是互联网应用最广泛使用的服务之一,通 ...
爱奇艺RND框架之JS Framework解析
背景介绍 RND,全称React Node Desktop,起源于RN在爱奇艺PC端的实现,采用React JS framework + node.JS runtime + native UI eng ...
使用 ThinkJS + Vue.js 开发博客系统
编者注:ThinkJS 作为一款 Node.js 高性能企业级 Web 框架,收到了越来越多的用户的喜爱.今天我们请来了 ThinkJS 用户 @lscho 同学为我们分享他基于 ThinkJS 开发 ...

js 给爱的人发个邮件吧

js 给爱的人发个邮件吧相关推荐

最新文章

热门文章