js怎么根据邮箱跳转到邮箱登录页面?

14 篇文章 0 订阅
13 篇文章 0 订阅

在使用邮箱作为注册验证时,发送了注册邮箱验证码后,为了让用户能快捷地登录邮箱查看邮件,这时需要我们根据接收验证码的邮箱给出对应的邮箱登录页url。

// 根据邮箱获取邮箱服务URL
// 示例:getEmailServerUrl('123456@qq.com') 
// 返回结果:'http://mail.qq.com'
function getEmailServerUrl(email) {
  var serverMap = {
    'qq.com': 'http://mail.qq.com',
    'vip.sina.com': 'http://mail.sina.com.cn',
    'sina.com': 'http://mail.sina.com.cn',
    '163.com': 'http://mail.163.com',
    '126.com': 'http://mail.126.com',
    'vip.163.com': 'http://vipmail.163.com/',
    'vip.126.com': 'http://vipmail.163.com/',
    'yeah.net': 'http://www.yeah.net/',
    'sohu.com': 'http://mail.sohu.com/',
    'tom.com': 'http://mail.tom.com/',
    '139.com': 'http://mail.10086.cn/',
    'live.com': 'http://login.live.com/',
    '189.com': 'http://webmail16.189.cn/',
    'eyou.com': 'http://www.eyou.com/',
    '21cn.com': 'http://mail.21cn.com/',
    '188.com': 'http://www.188.com/',
    'yahoo.com': 'http://login.yahoo.com'
  }
  var server = email.split('@')[1]
  return serverMap[server] || ''
}

// test
getEmailServerUrl('123456@qq.com') // 'http://mail.qq.com'

获取到邮箱登录页URL后,我们给出一个弹窗提示“立即前往邮箱查看验证码”,点击后跳转到该URL,用户不需要自己去搜邮箱登录页了。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现微信通讯录左右联动功能,需要使用锚点和JavaScript来控制页面滚动和显示。 1. 首先,在HTML中添加两个div,一个用于显示左侧联系人列表,一个用于显示右侧联系人详情。 ``` <div id="contact-list"></div> <div id="contact-detail"></div> ``` 2. 在JavaScript中,获取所有联系人数据并生成左侧列表。 ``` // 获取联系人数据 var contacts = [ { name: "张三", phone: "13811111111", email: "zhangsan@example.com" }, { name: "李四", phone: "13822222222", email: "lisi@example.com" }, { name: "王五", phone: "13833333333", email: "wangwu@example.com" }, // ... ]; // 生成左侧列表 var contactList = document.getElementById("contact-list"); for (var i = 0; i < contacts.length; i++) { var anchor = document.createElement("a"); anchor.href = "#" + i; anchor.innerText = contacts[i].name; contactList.appendChild(anchor); } ``` 3. 再添加一个事件监听器来响应左侧列表的点击,并在右侧显示相应的联系人详情。 ``` // 响应左侧列表的点击 contactList.addEventListener("click", function(event) { event.preventDefault(); // 阻止默认跳转行为 var index = parseInt(event.target.href.split("#")[1]); var contact = contacts[index]; var detail = document.getElementById("contact-detail"); detail.innerHTML = "<h2>" + contact.name + "</h2><p>电话:" + contact.phone + "</p><p>邮箱:" + contact.email + "</p>"; }); ``` 4. 最后,使用CSS样式美化页面,使左侧列表和右侧详情呈现出微信通讯录的样式。 ``` #contact-list { float: left; width: 200px; height: 100%; overflow-y: scroll; border-right: 1px solid #ddd; } #contact-list a { display: block; padding: 10px; border-bottom: 1px solid #ddd; } #contact-list a:hover { background-color: #f2f2f2; } #contact-list a.active { background-color: #f2f2f2; font-weight: bold; } #contact-detail { float: left; width: calc(100% - 200px); height: 100%; padding: 20px; } #contact-detail h2 { margin-top: 0; margin-bottom: 10px; } #contact-detail p { margin: 0; line-height: 1.5; } ``` 这样,就可以实现微信通讯录左右联动功能了。当点击左侧列表中的联系人时,页面会自动滚动到对应位置,并在右侧显示联系人的详细信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值