<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>群聊</title>
<head>
<style>
*{margin:0px;padding:0px}
body{background:#ddd}
iframe{display:none}
ul{position:fixed;left:2.5%;top:40px;width:95%;height:75%;margin:0px;padding:0px;background:#bbb;border-radius:1px;overflow-y: auto;}
li{margin:2%;width:auto;list-style: none;display:flex;background:#bbb}
li img{width:50px;height:50px;border-radius:5px;background:#fff}
p{width:100%;margin-left:10px;border-radius:5px;background:#999;padding:13px;color:#fff;display:flex;align-items:center;}
a{font-size:10px}
.list{width:50px;border-radius:5px;text-align:center;color:#333}
.img{width:30%;background:#ddd;border-radius:5px;margin-top:10px}
.img:hover{
background: #4a9bfa;
padding:2px;
opacity:1;
}

</style>
</head>
<body>
<iframe width="100%" height="150px" id="myframe" src="https://jishiben.me/49swahg">
</iframe>
<div style='width:95%;height:31px;line-height:30px;margin:2.5%;text-align:center;position:fixed;align-items:center;background:#bbb'><a style="font-size:14px;float:left;margin-left:8px" onclick="document.getElementById('ck').style.visibility='visible';document.getElementById('nc').value=window.localStorage.name;">☴设置</a>咨询聊天群<a style="font-size:14px;float:right;margin-right:8px" onclick="alert('此为编程爱好者咨询群')">说明☴</a></div>
<ul id="ul">
</ul>
<div style='width:100%;height:30px;text-align:center;position:fixed;bottom:120px'>
<input type="text" id='nr' placeholder="输入聊天内容…" value="" style='margin-left:2.5%;width:80%;height:100%;font-size:18px;float:left'/>
<input type="button" onclick="changeSrc()" value="➪" style='margin-left:0.5%;width:14.5%;height:100%;font-size:18px;float:left;'/></div>
<div id="ck" style="opacity:0.96;background:#eee;visibility:hidden;position:fixed;width:100%;height:100%;z-index:2;display:flex;justify-content:center;align-items:center;text-decoration:none">
<div style="border-radius:5px;width:80%;height:auto;text-align:center;bottom:120px;background:#ccc;justify-content:center;align-items:center;text-decoration:none">
<a style="font-size:10px;color:blue">输入您在群里的昵称</a>
<input type="text" id="nc" placeholder="输入您在群里的昵称" style="width:93%;padding:5px;margin:3%;border-radius:2px;text-align:center;font-size:16px;color:red;margin-top:10px"><a style="font-size:10px">选择一张图用做头像</a><br>
<div>
<img src="https://hbimg.huabanimg.com/aca5ee0b84d52be3ebb861c08d9e07239ea6975ffab9-0ifnUT_fw320" class="img" onclick="img(this.src)">
<img src="https://hbimg.huabanimg.com/63f6e701edd47aea0794bbc499c5a527433fd1f222934-dhtokf_fw320" class="img" onclick="img(this.src)">
<img src="https://hbimg.huabanimg.com/a9aaa893aa7d61e97a86ac62846a415fb8254e2911780d-k2ZYmd_fw320" class="img" onclick="img(this.src)">
<img src="https://hbimg.huabanimg.com/8bb78ff78c21e65b3ccf6c52ca7361ea7cf53703177fc-QmltFr_fw320" class="img" onclick="img(this.src)">
<img src="https://hbimg.huabanimg.com/79bc3239c1f048abbc2d16292e8ff9e7b9eaf72ece41-ceEiK2_fw320" class="img" onclick="img(this.src)">
<img src="https://hbimg.huabanimg.com/a045dd4beeef0dc372f87a297ae00131795d478366cb-Z0eDWS_fw320" class="img" onclick="img(this.src)">
<img src="https://hbimg.huabanimg.com/b9ee8098bd1d657ec76120cf367ee354a53badab7dfc-hfobXN_fw320" class="img" onclick="img(this.src)">
<img src="https://hbimg.huabanimg.com/92714eaacb106277865566c5909abae5b31c4ac144f16-pykivm_fw320" class="img" onclick="img(this.src)">
<img src="https://hbimg.huabanimg.com/22741e3cfc1191dfba186ac9286ed15196fd0f648e2f-Tcnm7n_fw320" class="img" onclick="img(this.src)">

</div>
<button style="float:bottom;margin-top:15px;font-size:20px;width:93%;margin-bottom:10px" onclick="nc()">保存设置</button>
</div>
</div>


<script type="text/javascript">
window.onload=function()
{
var i=document.getElementById("myframe").contentWindow;
var txt=i.document.getElementById("txtare0");
txt.oninput=function()
{
}
}
</script>
<script>
if(window.localStorage.img==null||window.localStorage.name==null)
{
window.localStorage.img="https://hbimg.huabanimg.com/f7152e31b39f5df38280aea3700ef20b5ab5fc3544bc-f6qcWE_fw320";
window.localStorage.name="游客";
}
function changeSrc()
{
var ifr=document.getElementById("myframe").contentWindow;
//取得子页面的窗口
var nr=document.getElementById("nr").value;
if(nr=="")
{
}
else
{
var xx='<li><div class="list"><img src="'+window.localStorage.img+'"><a>'+window.localStorage.name+'</a></div><div style="background:#999;transform:rotate(45deg);width:25px;height:15px;margin-right:-21px;margin-top:15px;margin-left:10px"></div><p>'+nr+'</p></li>';
ifr.document.getElementById('txtare0').innerHTML+='\n'+xx;
document.getElementById("nr").value='';
}
}

function nc()
{
var v=document.getElementById("nc").value;
window.localStorage.name=v;
document.getElementById("ck").style.visibility="hidden";
}
function img(o)
{
window.localStorage.img=o;
}

</script>
<script>
setInterval("nr()",3000);
function nr()
{
var ifr=document.getElementById("myframe").contentWindow;
var nr=ifr.document.getElementById('txtare0').innerHTML;
var nr=nr.replace(/&lt;/g,"<") ;
var nr=nr.replace(/&gt;/g,">") ;
document.getElementById('ul').innerHTML=nr;
var message = document.getElementById('ul');
message.scrollTop = message.scrollHeight;
}
</script>
<script>
window.alert = function(name){
var iframe = document.createElement("IFRAME");
iframe.style.display="none";
iframe.setAttribute("src", 'data:text/plain,');
document.documentElement.appendChild(iframe);
window.frames[1].window.alert(name); iframe.parentNode.removeChild(iframe);
}
</script>
</body>
</html>