fenix
/
sheishuoAPP


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
							<html>
<head>
    <meta charset="UTF-8">
    <title>JS模拟云信聊天界面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection"content="telephone=no, email=no" />
    <style>
        /**重置标签默认样式*/
        * {
        color: #000000;
        margin: 0;
        padding: 0;
        list-style: none;
        font-family: '微软雅黑'
        }
        html,body{
           height:100%;
        }
        #container {
        width: 100%;
        height: 100%;
        background: #e9ecf0;
        margin: 0;
        position: relative;
        box-sizing: border-box;
        box-shadow: 20px 20px 55px #777;
        }
        .footer {
        width: 100%;
        height: 60px;
        background: #FFFFFF;
        position: absolute;
        bottom: 0;
        padding: 10px;
        box-sizing:border-box;
        }
        .footer input {
        width: 60%;
        height: 40px;
        outline: none;
        font-size: 14px;
        text-indent: 10px;
        position: absolute;
        border-radius: 6px;
        right: 80px;
        box-sizing: border-box;
        }
        .footer span {
        display: inline-block;
        width: 60px;
        height: 40px;
        background: #ccc;
        font-weight: 900;
        line-height: 45px;
        cursor: pointer;
        text-align: center;
        position: absolute;
        right: 10px;
        border-radius: 6px;
        top: 10px;
        }
        .footer span:hover {
        color: #fff;
        background: #999;
        }
        #icon {
        width: 40px;
        height: 40px;
        background-color: red;
        border-radius: 30px;
        float: left
        }
        img {
        width: 40px;
        height: 40px;
        }
        .content {
        font-size: 14px;
        width: 100%;
        height:100%;
        overflow: auto;
        padding: 10px 20px 80px;
        box-sizing: border-box;
        }
        .content li {
        width: 100%;
        display: block;
        clear: both;
        overflow: hidden;
        margin-top: 10px;
        }
        .content li img {
        float: left;
        }
        .content li span{
        background: #7cfc00;
        padding: 10px;
        border-radius: 10px;
        float: left;
        margin: 3px 10px 3px 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: #3a9efb;
        }
    </style>
    <script>
        window.onload = function(){
            var arrIcon = new Array(2);//头像容器
            var num = 0;     //控制头像改变
            var iNow = -1;    //用来累加改变左右浮动
            var img = document.getElementById('img');
            arrIcon[0] = img.src;
            var btn = document.getElementById('btn');
            var text = document.getElementById('text');
            var content = document.getElementsByTagName('ul')[0];
            var span = content.getElementsByTagName('span');

            img.onclick = function(){
                    JsBridge.picture({},function(data) {
                        if (data.status == 200) {
                            var base64 = data.values.image.base64;
                            var width = data.values.image.width;
                            var height = data.values.image.height;
                            var w = 320.0;
                            var h = (1.0*w*height)/width;
                            // show
                            img.src = "data:image/jpg;base64," + base64;
                            img.width = w;
                            img.height = h;
                            if(num==0){
                                arrIcon[1] = img.src;
                                num = 1;
                            }else if(num==1){
                                arrIcon[0] = img.src;
                                num = 0;
                            }
                        }else{
                            console.log('"picture" bridge called failed; on response:' + JSON.stringify(data));
                        }
                    });
            }

            btn.onclick = function(){
                if(text.value ==''){
                    alert('文本不能为空');
                }else {
                    // js->java
                    JsBridge.notification(text.value);
                    content.innerHTML += '<li><img src="'+arrIcon[num]+'" class="imgTag"><span class="spanTag">'+text.value+'</span></li>';
                    iNow++;
                    var imgs = document.getElementsByClassName("imgTag");
                    var spans = document.getElementsByClassName("spanTag");
                    if(num==0){
                        imgs[iNow].className = 'imgTag imgright';
                        spans[iNow].className = 'spanTag spanright';
                    }
                    else {
                        imgs[iNow].className = 'imgTag imgleft';
                        spans[iNow].className = 'spanTag spanleft';
                    }
                    text.value ='';
                    // 内容过多时,将滚动条放置到最底端
                    contentcontent.scrollTop=content.scrollHeight;
                }
            }
        }
    </script>
    <script src="file:///android_asset/js/page.js"></script>
</head>
<body>
<div id="container">
    <ul class="content">
    </ul>
    <div class="footer">
        <div id="icon">
            <img id="img" class="imgTag" src="file:///android_res/drawable/nim_avatar_default.png">
        </div>
        <input id="text" type="text" placeholder="说点什么吧...">
        <span id="btn">发送</span>
    </div>
</div>
</body>
</html>