模拟qq邮箱收件人效果

最新推荐文章于 2023-04-07 17:32:13 发布
最新推荐文章于 2023-04-07 17:32:13 发布
阅读量741 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanhx1993/article/details/83821000
版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>添加通知</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <link rel="stylesheet" href="css/style.css">
 
  <style>
    .layui-form-select .emaillist{display: block}
    #emailbox{display: inline-block;min-height: 38px;height: auto;padding-right: 10px;cursor:text }
    .emailinput{display: inline-block;float: left;width: 50px;height: 36px;line-height: 1.3}
    .email-selected{display: inline-block;float: left;height: 36px;line-height: 36px;}
  </style>
  <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->  
</head>
<body>
                <div class="layui-form-item">
                  <label class="layui-form-label">邮箱地址：</label>
                  <div class="layui-input-block layui-form-select">
                    <div class="layui-input" id="emailbox">
                      <input type="text" value="" class="emailinput">
                    </div>
                    <input type="hidden" id="code" name="code" />
                    <dl class="layui-anim layui-anim-upbit emaillist">
                      <dd οnclick="javascript:selected('张山&lt;office2@nuist.edu.cn&gt;','1001');">张山&lt;office2@nuist.edu.cn&gt;</dd>
                      <dd οnclick="javascript:selected('李斯','1002');">李斯</dd>
                      <dd οnclick="javascript:selected('王武','1003');">王武</dd>
                      <dd οnclick="javascript:selected('赵溜','1004');">赵溜</dd>
                      <dd οnclick="javascript:selected('张山','1005');">张山</dd>
                      <dd οnclick="javascript:selected('李斯','1006');">李斯</dd>
                      <dd οnclick="javascript:selected('王武','1007');">王武</dd>
                      <dd οnclick="javascript:selected('赵溜','1008');">赵溜</dd>
                      <dd οnclick="javascript:selected('张山','1009');">张山</dd>
                      <dd οnclick="javascript:selected('李斯','1010');">李斯</dd>
                      <dd οnclick="javascript:selected('王武','1011');">王武</dd>
                      <dd οnclick="javascript:selected('赵溜','1012');">赵溜</dd>
                      <dd οnclick="javascript:selected('张山','1013');">张山</dd>
                      <dd οnclick="javascript:selected('李斯','1014');">李斯</dd>
                      <dd οnclick="javascript:selected('王武','1015');">王武</dd>
                      <dd οnclick="javascript:selected('赵溜','1016');">赵溜</dd>
                    </dl>
                  </div>
                </div>               
             

 
  <script src="layui/layui.js"></script>
  <script src="js/index.js"></script>
<SCRIPT src="js/jquery-1.4.4.min.js"></SCRIPT>

  <script>
    $(document).ready(function() {
      $("#code").val('');
      $("#emailbox").click(function(){
        $('.emailinput').focus();
      })
    });

    function escapeHTML(a){  
        a = "" + a;  
        return a.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
    }
    function selected(name,code) {
      var ids = $("#code").val();
      if(ids.indexOf(code) == -1){
        $("#emailbox").append("<div class='email-selected' id="+code+">"+escapeHTML(name)+" <a href=# οnclick=javascript:deleteCode("+code+");><img src='../images/icon_c.png'/></a>；</div>");
        var t = $("#emailbox").height() + 5;
        $('.emaillist').css('top',t);
        $('.emailinput').appendTo("#emailbox");

        $("#"+code).hover(function(){  
          $(this).css("background","yellow");},function(){
          $(this).css("background","white");
        });
        //添加隐藏域的值
        ids += code + ",";
        $("#code").val(ids);
      }
    }
    function deleteCode(code){
      var ids = $("#code").val();
      $("#code").val(ids.replace(code+",",""));
      $("#"+code).remove();
      var t = $("#emailbox").height() + 5;
      $('.emaillist').css('top',t);
    }
    // 点击成绩弹出层其他区域隐藏
    $(document).bind("click", function (e) {
      var target = $(e.target);
      if (target.closest(".emaillist,#emailbox").length == 0) {
          $(".emaillist").hide();
      }
        
    })
  </script>
</body>
</html>

匿名用户123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
仿qq邮箱首页html,仿QQ邮箱收件人选择与搜索之简单js示例
weixin_33800919的博客
06-25 581
之前因为项目开发需要，对于收件人选择与搜索的js实现，整理如下：页面截图： 主要html代码：To:Subject:Message:'SearchContact...')this.value='';"onblur="if(this.value=='')this.value='SearchContact...';"name="txtsearch"/>ass="Catafood,S....
仿qq邮箱添加收件人效果
08-16
自己做完邮箱系统提取分享出来。html代码简单易读，js源码可方便修改扩展。仿qq邮箱效果实现收件人，抄送，密送等文本框块级操作，自动补全，邮箱格式校验。下载好用望留言、评论支持！
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果
anna19850927的博客
02-03 211
http://www.jb51.net/article/25922.htm 转载于:https://www.cnblogs.com/deepwishly/archive/2012/02/03/2551120.html
模拟登陆qq邮箱
12-17
模拟登陆qq邮箱,主要是学习使用python 模拟进行网页自动化登陆
模拟qq邮箱 网站一键发送邮件
06-04
该项目为自己用idea编辑器写的一个模拟邮箱发送的java web项目，借助qq邮箱的授权码，实现自动发邮件功能，适合于初学者，如果积分不够可以私信我。
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
10-28
今天要说的是用jquery的语法和组件dialog及Autocomplete来制作QQ邮箱的发件人操作功能，认为这个太过简单的可以离开了。
js仿QQ邮箱收件人选择与搜索功能
10-20
在本文中，我们将探讨如何使用JavaScript来实现一个类似于QQ邮箱的收件人选择与搜索功能。这个功能对于构建一个高效的邮件系统至关重要，因为它允许用户方便地选取和搜索联系人，提高用户体验。 首先，我们需要了解...
仿APP邮箱 多个收件人显示
08-21
"仿APP邮箱 多个收件人显示"的项目目标是实现一个类似邮箱客户端的收件人输入框，用户可以在这个输入框中添加、删除、选择或取消选择多个收件人。下面将详细解释这个功能涉及到的技术点和实现方法。 首先，我们需要...
jquery仿邮箱收件人
05-09
3. **Autocomplete（自动补全）**：仿QQ邮箱收件人的核心功能是自动补全。jQuery提供了`.autocomplete()`插件来实现这一功能。我们需要根据用户输入的关键字动态加载匹配的邮箱地址，并在下拉列表中展示。 4. **...
jquery实现仿邮箱收件人
让爱远航——当我们老去，该干点嘛！
08-21 469
      这些天我没什么事，一直都在聊天！趁着有空，我就整理以前做过的东西，顺便复习一下知识。无意中发现了这段代码，用jquery实现的仿QQ邮箱添加收件人形式的一个例子。只是一个例子，如果大家有需要，可以根据自己的需求修改一下。写的比较简陋，望大家见谅！ &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht...
vue邮件系统
09-27
使用vue搭建的一个邮件群发系统，功能不全 前期只是为了学习，项目结构全面，使用了vue-cli搭建的，包含vue-router
android邮件收件人控件，类似腾冲QQ邮箱收件人输入框功能
07-28
1、在网上都没找到的android邮箱收件人控件，找了几天都没人写此类的控件，后面自己仿照相关控件写的， 2、控件支持从外部直接设置邮件地址和手动输入邮件地址功能，以分号结束区分，文件中有APP，自己可以安装试试看效果再来评价。 3、 效果和功能不差于腾讯手机上的QQ邮箱收件人输入框功能
仿留言的vue代码，不亏
09-21
使用ASP.NET Web应用程序，创建空网站形式的项目。通过Vue和插件axios.min.js的使用完成异步请求，将留言数据放入数据库。完成留言的访问和显示。
telnet模拟QQ邮箱进行邮件发送
weixin_43327191的博客
09-04 1367
在cmd中利用telnet连接QQ邮箱服务器模拟邮件的发送 在cmd中利用telnet连接QQ邮箱服务器:telnet smtp.qq.com 25 和服务器进行交互，申明身份 配置登陆方式： auth login 输入自己的账号和对应的授权码 授权码：邮箱设置–>>账户–>>POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务–>>开启***POP3/SMTP***服务 账号和授权码必须是Base64编码形式：
简单qq邮箱（jsp）
qq_44701181的博客
09-22 718
1.创建你需要的页面和文件 2.在首页 3.request.getRequestDispatcher().forward(request.response)这个语句意思是将客户端的请求转向（forward）到getRequestDispatcher（）方法中参数定义的页面或者链接。 说通俗点就是，当一个客户端的请求到这个页面后，不做处理或者不处理完，将请求转给另一个页面处理，然后再响应给客户...
Android仿qq邮箱账号邮件账号输入框交互
weixin_37496178的博客
07-28 595
Android自定义ViewGroup仿qq邮箱发件人、收件人输入交互
vue el-select 实现邮件系统收件人效果
qq_38595000的博客
04-07 1047
开发邮箱项目时，需要实现类似qq邮箱收件人的效果，其中包含：可添加多个收件人，输入时匹配通讯录，输入框失去焦点时自动添加输入的内容等功能。根据需求项目，使用element的el-select插件，该插件已包含多选，输入匹配功能，但默认功能输入数据后，只有按Enter键时，才会自动添加，不符合需求，所以，本文完善下相关功能。vue版本：2.6.12不是专业前端的，如果有些描述存在问题，自行理解哈。
仿QQ邮箱收件人搜索及简单删除功能
风动我不动的博客
12-15 1817
主要实现文本框多选。 在这里说明 ：文本框搜索js实现是网上拿下来的，自己在上面做了更改，实现了文本框多选并按块删除。 （还有很多不足，希望有改进的能再分享。Thanks(･ω･)ﾉ） 效果图： 鼠标移入颜色： 鼠标点击及键盘键确认是否删除颜色： 主要代码： 资源下载地址： https://download.csdn.ne...
python发邮件用qq邮箱怎么设置收件人
最新发布
06-08
要使用Python发送电子邮件，您需要使用SMTP库。以下是如何使用SMTP库将电子邮件发送到QQ邮箱的步骤： 1. 登录您的QQ邮箱，然后打开SMTP服务并获取授权码。 2. 在Python中导入SMTP库： ```python import smtplib ``` 3. 创建SMTP对象并连接到QQ邮件服务器： ```python smtpObj = smtplib.SMTP_SSL('smtp.qq.com', 465) ``` 4. 登录到您的QQ邮箱： ```python smtpObj.login('您的QQ邮箱地址', '您的QQ邮箱授权码') ``` 5. 构造邮件内容： ```python from email.mime.text import MIMEText msg = MIMEText('邮件正文') msg['Subject'] = '邮件主题' msg['From'] = '您的QQ邮箱地址' msg['To'] = '收件人的邮箱地址' ``` 6. 发送邮件： ```python smtpObj.sendmail('您的QQ邮箱地址', ['收件人的邮箱地址'], msg.as_string()) ``` 7. 关闭SMTP连接： ```python smtpObj.quit() ``` 这样，您就可以使用Python将电子邮件发送到QQ邮箱并设置收件人了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值