大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇内容主要讲解“js如何实现登录时记住密码”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“js如何实现登录时记住密码”吧!
建网站原本是网站策划师、网络程序员、网页设计师等,应用各种网络程序开发技术和网页设计技术配合操作的协同工作。创新互联专业提供网站建设、网站制作,网页设计,网站制作(企业站、成都响应式网站建设、电商门户网站)等服务,从网站深度策划、搜索引擎友好度优化到用户体验的提升,我们力求做到极致!
JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。
常见的很多网站登录,都有记住密码功能,下面是用js实现的记住密码功能(代码用的源生js,不用引入任何插件,大家如果引入了jQuery,可以进行修改,优化)
js部分
window.onload = function(){ var oForm = document.getElementById('myForm'); var oUser = document.getElementById('username'); var oPswd = document.getElementById('passwrod'); var oRemember = document.getElementById('remember'); //页面初始化时,如果帐号密码cookie存在则填充 if (getCookie('username') && getCookie('password')) { oUser.value = getCookie('username'); oPswd.value = getCookie('password'); oRemember.checked = true; } //复选框勾选状态发生改变时,如果未勾选则清除cookie oRemember.onchange = function() { if (!this.checked) { delCookie('username'); delCookie('password'); } }; //表单提交事件触发时,如果复选框是勾选状态则保存cookie oForm.onsubmit = function() { if (remember.checked) { setCookie('username', oUser.value, 7); //保存帐号到cookie,有效期7天 setCookie('password', oPswd.value, 7); //保存密码到cookie,有效期7天 } }; }; //设置cookie function setCookie(name, value, day) { var date = new Date(); date.setDate(date.getDate() + day); document.cookie = name + '=' + value + ';expires=' + date; }; //获取cookie function getCookie(name) { var reg = RegExp(name + '=([^;]+)'); var arr = document.cookie.match(reg); if (arr) { return arr[1]; } else { return ''; } }; //删除cookie function delCookie(name) { setCookie(name, null, -1); };
登录页面
注意js里边的id对应:
到此,相信大家对“js如何实现登录时记住密码”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!