网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 基于javascript制作微信聊天面板
内容
    本文实例分享了javascript制作微信聊天面板的相关代码，具体内容如下
    点击头像更换说话对象，简单说下实现原理，html中创建一个ul用于存放所有说话的内容，对话内容是有javascript 动态生成，
    主要难点：先布局好css，当时奥巴马发送时候，让这个li有浮动，当是小胖时候，让这个li左浮动。
    代码：
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>模拟短信发送</title>
      <style>
        * {
          margin: 0;
          padding: 0;
          list-style: none;
          font-family: '微软雅黑'
        }
        #container {
          width: 450px;
          height: 780px;
          background: #eee;
          margin: 80px auto 0;
          position: relative;
          box-shadow: 20px 20px 55px #777;
        }
        .header {
          background: #000;
          height: 34px;
          color: #fff;
          line-height: 34px;
          font-size: 20px;
          padding: 0 10px;
        }
        .footer {
          width: 430px;
          height: 50px;
          background: #666;
          position: absolute;
          bottom: 0;
          padding: 10px;
        }
        .footer input {
          width: 275px;
          height: 45px;
          outline: none;
          font-size: 20px;
          text-indent: 10px;
          position: absolute;
          border-radius: 6px;
          right: 80px;
        }
        .footer span {
          display: inline-block;
          width: 62px;
          height: 48px;
          background: #ccc;
          font-weight: 900;
          line-height: 45px;
          cursor: pointer;
          text-align: center;
          position: absolute;
          right: 10px;
          border-radius: 6px;
        }
        .footer span:hover {
          color: #fff;
          background: #999;
        }
        #icon {
          display: inline-block;
          background: red;
          width: 60px;
          height: 60px;
          border-radius: 30px;
          position: absolute;
          bottom: 6px;
          left: 14px;
          cursor: pointer;
          overflow: hidden;
        }
        img {
          width: 60px;
          height: 60px;
        }
        .content {
          font-size: 20px;
          width: 435px;
          height: 662px;
          overflow: auto;
          padding: 5px;
        }
        .content li {
          margin-top: 10px;
          padding-left: 10px;
          width: 412px;
          display: block;
          clear: both;
          overflow: hidden;
        }
        .content li img {
          float: left;
        }
        .content li span{
          background: #7cfc00;
          padding: 10px;
          border-radius: 10px;
          float: left;
          margin: 6px 10px 0 10px;
          max-width: 310px;
          border: 1px solid #ccc;
          box-shadow: 0 0 3px #ccc;
        }
        .content li img.imgleft { 
          float: left; 
        }
        .content li img.imgright { 
          float: right; 
        }
        .content li span.spanleft { 
          float: left;
          background: #fff;
        }
        .content li span.spanright { 
          float: right;
          background: #7cfc00;
        }
      </style>
      <script>
        window.onload = function(){
          var arrIcon = ['img/1.jpg','img/2.jpg'];
          var num = 0;   //控制头像改变
          var iNow = -1;  //用来累加改变左右浮动
          var icon = document.getElementById('icon').getElementsByTagName('img');
          var btn = document.getElementById('btn');
          var text = document.getElementById('text');
          var content = document.getElementsByTagName('ul')[0];
          var img = content.getElementsByTagName('img');
          var span = content.getElementsByTagName('span');
          icon[0].onclick = function(){
            if(num==0){
              this.src = arrIcon[1];
              num = 1;
            }else if(num==1){
              this.src = arrIcon[0];
              num = 0;
            }        
          }
          btn.onclick = function(){
            if(text.value ==''){
              alert('发送内容不能为空');
            }else {
              content.innerHTML += '<li><img src="'+arrIcon[num]+'"><span>'+text.value+'</span></li>';
              iNow++;
              if(num==0){
                img[iNow].className += 'imgright';
                span[iNow].className += 'spanright';
              }else {
                img[iNow].className += 'imgleft';
                span[iNow].className += 'spanleft';
              }
              text.value = '';
            }
          }
        }
      </script>
    </head>
    <body>
      <div id="container">
        <div>
          <span>白超华-博客园</span>
          <span>20:30</span>
        </div>
        <ul></ul>
        <div>
          <div id="icon">
            <img src="img/1.jpg">
          </div>
          <input id="text" type="text" placeholder="说点什么吧...">
          <span id="btn">发送</span>
        </div>
      </div>
    </body>
    </html>
    希望本文所述对大家学习javascript程序设计有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/19 13:04:44