Maison > Article > interface Web > Interface de chat WeChat pour téléphone portable imitation HTML5

Interface de chat WeChat pour téléphone portable imitation HTML5

不言original: 2018-05-08 15:31:094747parcourir

Cet article présente principalement en détail le code clé de l'interface de chat WeChat mobile imitation HTML5, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Ce que je vous apporte, c'est le chat WeChat imitation HTML5 sur téléphone mobile. interface, l'effet de capture d'écran est le suivant :

Le code source est le suivant :

Code XML/HTML Copier le contenu dans le presse-papiers

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>HTML5模拟微信聊天界面</title>  
    <style>  
  /**重置标签默认样式*/   
        * {   
            margin: 0;   
            padding: 0;   
            list-style: none;   
            font-family: &#39;微软雅黑&#39;   
        }   
        #container {   
            width: 450px;   
            height: 780px;   
            background: #eee;   
            margin: 80px auto 0;   
            position: relative;   
            box-shadow: 20px 20px 55px #777;   
        }   
        .header {   
            background: #000;   
            height: 40px;   
            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;   
        }   
        #user_face_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 = [&#39;http://www.xttblog.com/icons/favicon.ico&#39;,&#39;http://www.xttblog.com/wp-content/uploads/2016/03/123.png&#39;];   
            var num = 0;     //控制头像改变   
            var iNow = -1;    //用来累加改变左右浮动   
            var icon = document.getElementById(&#39;user_face_icon&#39;).getElementsByTagName(&#39;img&#39;);   
            var btn = document.getElementById(&#39;btn&#39;);   
            var text = document.getElementById(&#39;text&#39;);   
            var content = document.getElementsByTagName(&#39;ul&#39;)[0];   
            var img = content.getElementsByTagName(&#39;img&#39;);   
            var span = content.getElementsByTagName(&#39;span&#39;);   
  
            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 ==&#39;&#39;){   
                    alert(&#39;不能发送空消息&#39;);   
                }else {   
                    content.innerHTML += &#39;<li><img src="&#39;+arrIcon[num]+&#39;"><span>&#39;+text.value+&#39;</span></li>&#39;;   
                    iNow++;   
                    if(num==0){   
                        img[iNow].className += &#39;imgright&#39;;   
                        span[iNow].className += &#39;spanright&#39;;   
                    }else {   
                        img[iNow].className += &#39;imgleft&#39;;   
                        span[iNow].className += &#39;spanleft&#39;;   
                    }   
                    text.value = &#39;&#39;;   
     // 内容过多时,将滚动条放置到最底端   
     contentcontent.scrollTop=content.scrollHeight;     
                }   
            }   
        }   
    </script>  
</head>  
<body>  
    <p id="container">  
        <p class="header">  
            <span style="float: left;">业余草:模拟微信聊天界面</span>  
            <span style="float: right;">14:21</span>  
        </p>  
        <ul class="content">  
   <!-- 欢迎加入qq群：454796847、135430763 -->  
  </ul>  
        <p class="footer">  
            <p id="user_face_icon">  
                <img src="http://www.xttblog.com/icons/favicon.ico" alt="">  
            </p>  
            <input id="text" type="text" placeholder="说点什么吧...">  
            <span id="btn">发送</span>  
        </p>  
    </p>  
</body>  
</html>

Ce qui précède représente l'intégralité du contenu de cet article, n'est-ce pas excitant ? , j'espère que cela sera utile à l'étude de tout le monde.

Recommandations associées :

HTML5 implémente la fonction de partage avec les amis WeChat, les amis QQ, le code QR Weibo de l'espace QQ

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Plusieurs méthodes pour résoudre le problème selon lequel la compatibilité avec IE6\7\8 ne prend pas en charge les balises html5Article suivant：Plusieurs méthodes pour résoudre le problème selon lequel la compatibilité avec IE6\7\8 ne prend pas en charge les balises html5

Articles Liés

Voir plus