微信界面模拟 二

最新推荐文章于 2022-04-04 11:22:58 发布
最新推荐文章于 2022-04-04 11:22:58 发布
阅读量510 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56072688/article/details/116115760
版权

5修改了信息列表样式

<style>
*{box-sizing:border-box}
.mapp{width:270;height:400;border:1px solid;}
.mapp .ahome .ahwlf{border:1px solid;height:87%}
.mapp .ahome .ahbtn{border:1px solid;height:13%}
.mapp .ahome .ahbtn button{width:25%;height:100%}
.mapp .ahome .ahw{height:87%} .mapp .ahome .ahwlf .tb{height:13%;border:1px solid;}.mapp .ahome .ahwlf .tb .crtv{background:None;border:None;height:100%}
.mapp .ahome .ahwlf .wx{height:87%;border:1px solid;} .mapp .ahome .ahwlf .lxr{} .mapp .ahome .ahwlf .fx{}.mapp .ahome .ahwlf .wx .meslb{padding:3;border-bottom:1px solid #aaa}.mapp .ahome .ahwlf .wx .meslb .xx{background:None;border:None;text-align:left;font-size:10;display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mapp .ahome .ahwlf .wx .meslb .tx{height:45;width:45}.mapp .ahome .ahwlf .wx .meslb .mzxx{vertical-align:middle;width:80%;height:auto;border:0px solid;display:inline-block}.mapp .ahome .ahwlf .wx .meslb .mz{background:None;border:None;}  .mapp .adhk{}.mapp .adhk .tv{border:1px solid;height:12%}.mapp .adhk .tv button{height:100%}.mapp .adhk .bv *{height:100%}.mapp .adhk .mesv{overflow:scroll;border:1px solid;height:78%}.mapp .adhk .bv{border:1px solid;height:10%}.mapp .adhk .mesv .df{border:0px solid;}.mapp .adhk .mesv .tbox{padding:5;vertical-align:top;width:70%;border:0px solid;display:inline-block}.mapp .adhk .mesv .text{padding:8;border:1px solid;display:inline-block}.mapp .adhk .mesv .tx{width:45;height:45}.mapp .adhk .mesv .me{direction:rtl}.mapp .adhk .mesv .me .text{direction:ltr;text-align:right}
</style>
<body></body>
<script>
var mlxrs=['罗华','萝卜','曾宇','刁杰','青菜']
var mxxs=[{ty:'df',n:'罗华',m:'吃饭没'},{ty:'df',n:'青菜',m:'你在哪？'},{ty:'df',n:'罗华',m:'来我家玩游戏，夏天的时候回来了吗方法论坛大地震局长大衣服的时候有时间'}]
var vctl={},dcemt=function(n){return document.createElement(n)};
function wcstart(){document.body.append(appf())}wcstart()
function appf(){var mapp=dcemt('div');vctl.mapp=mapp;mapp.className='mapp';mapp.append(ahomef(),adhkf());return mapp}
function ahomef(){var ahome=dcemt('div');vctl.ahome=ahome;ahome.className='ahome';ahome.append(ahwlff(),ahwf(),ahbtnf());return ahome}
function adhkf(){let fs01=1,adhk=dcemt('div'),tv=dcemt('div'),mesv=dcemt('div'),bv=dcemt('div'),bbtn=dcemt('button'),py=dcemt('button'),inp=dcemt('input'),fsbtn=dcemt('button');
adhk.className='adhk';tv.className='tv';mesv.className='mesv';bv.className='bv';
bbtn.innerHTML='返回';py.innerHTML='H';fsbtn.innerHTML='发送'
adhk.cmv=0
vctl.adhk=adhk;disoff(adhk);tv.append(bbtn,py);bv.append(inp,fsbtn);adhk.append(tv,mesv,bv);
bbtn.onclick=function(){adhk.cmv.remove();disoff(adhk);dison(vctl.ahome);}
fsbtn.onclick=function(){let xx={ty:'me',m:inp.value,n:'我'};if(xx.m==''){xx.m='自动，我吃饭去了';fs01=0}else{};if(fs01){inp.value='';adhk.cmv.append( mesf(xx) )} }
inp.oninput=function(){if(inp.value==''){fs01=0}else{fs01=1}}
adhk.setmesv=function(v){py.innerHTML=v.n;adhk.cmv=v;mesv.append(v)}
return adhk}
function ahwlff(){let ahwlf=dcemt('div');ahwlf.className='ahwlf';let tb=ahwlf_tbf(),wx=ahwlf_wxf(),lxr=ahwlf_lxrf(),fx=ahwlf_fxf();ahwlf.append(tb,wx,lxr,fx);ahwlf.crtv=wx;vctl.ahwlf=ahwlf;ahwlf.scrtvtext=function(n){disoff(ahwlf.crtv);switch(n){case '微信':ahwlf.crtv=wx;dison(wx);break;case '联系人':ahwlf.crtv=lxr;dison(lxr);;break;case '发现':ahwlf.crtv=fx;dison(fx);;break;case '微信':;break;};tb.crtv.innerHTML=n};return ahwlf}
function ahwf(){let ahw=dcemt('div');vctl.ahw=ahw;ahw.innerHTML='我';ahw.className='ahw';ahw.style.display='None';return ahw}    
function ahbtnf(){var ahbtn=dcemt('div'),bwx=dcemt('button'),blxr=dcemt('button'),bfx=dcemt('button'),bw=dcemt('button'); ahbtn.className='ahbtn';bwx.innerHTML='微信';blxr.innerHTML='联系人';bfx.innerHTML='发现';bw.innerHTML='我';bwx.onclick=function(){disoff(vctl.ahw);dison(vctl.ahwlf);vctl.ahwlf.scrtvtext(this.innerHTML)};blxr.onclick=function(){disoff(vctl.ahw);dison(vctl.ahwlf);vctl.ahwlf.scrtvtext(this.innerHTML)};bfx.onclick=function(){disoff(vctl.ahw);dison(vctl.ahwlf);vctl.ahwlf.scrtvtext(this.innerHTML)};bw.onclick=function(){disoff(vctl.ahwlf);dison(vctl.ahw)};ahbtn.append(bwx,blxr,bfx,bw);return ahbtn}
function ahwlf_tbf(){let tb=dcemt('div'),crtv=dcemt('button');tb.crtv=crtv;crtv.innerHTML='微信';crtv.className='crtv';tb.className='tb';tb.append(crtv);return tb}
function ahwlf_wxf(){let wx=dcemt('div');vctl.wx=wx;wx.innerHTML='';wx.className='wx';return wx}
function ahwlf_lxrf(){let lxr=dcemt('div');vctl.lxr=lxr;lxr.innerHTML='LXR';disoff(lxr);lxr.className='lxr';return lxr}
function ahwlf_fxf(){let fx=dcemt('div');fx.innerHTML='FX';disoff(fx);fx.className='fx';return fx}
for(let a in mlxrs){vctl.lxr.append(lxrlbf(mlxrs[a]));}
for(let a in mxxs){mdcenter(mxxs[a])}
function mdcenter(mo){function lxrisinwx(n){let wxc=vctl.wx.children;for(let a in wxc){if(wxc[a].n==n){return wxc[a]}} return false}; var llb=lxrisinwx(mo.n);if(!llb){let meslb=meslbf(mo);vctl.wx.append(meslb);meslb.xxck.append( mesf(mo) )}else{llb.setxx( mo )} }
function lxrlbf(m){let lxrlb=dcemt('div'),tx=dcemt('button'),mz=dcemt('button');lxrlb.className='lxrlb';tx.innerHTML='H';mz.innerHTML=m;lxrlb.append(tx,mz);return lxrlb}
function meslbf(mo){let meslb=dcemt('div'),tx=dcemt('button'),mzxx=dcemt('div'),mz=dcemt('button'),xx=dcemt('button'),xxck=dcemt('div');meslb.className='meslb';mzxx.className='mzxx';tx.className='tx';mz.className='mz';xx.className='xx';tx.innerHTML='🙉';mz.innerHTML=mo.n;xx.innerHTML=mo.m;meslb.n=mo.n;xxck.n=mo.n;meslb.xxck=xxck;meslb.setxx=function(mo){xxck.append( mesf(mo) );xx.innerHTML=mo.m};meslb.onclick=function(){disoff(vctl.ahome);vctl.adhk.setmesv(xxck);dison(vctl.adhk);};mzxx.append(mz,xx);meslb.append(tx,mzxx);return meslb}
function mesf(m){let mes=dcemt('div'),tx=dcemt('button'),tbox=dcemt('div'),text=dcemt('div');mes.className=m.ty;tx.className='tx';tbox.className='tbox';text.className='text';tx.innerHTML='🙈';text.innerHTML=m.m;tbox.append(text);mes.append(tx,tbox);return mes}
function dison(emt){emt.style.display=''};function disoff(emt){emt.style.display='None'}
</script>

4

<style>
*{box-sizing:border-box}
.mapp{width:270;height:400;border:1px solid;}
.mapp .ahome .ahwlf{border:1px solid;height:87%}
.mapp .ahome .ahbtn{border:1px solid;height:13%}
.mapp .ahome .ahbtn button{width:25%;height:100%}
.mapp .ahome .ahw{height:87%} .mapp .ahome .ahwlf .tb{border:1px solid;}
.mapp .ahome .ahwlf .wx{} .mapp .ahome .ahwlf .lxr{} .mapp .ahome .ahwlf .fx{}.mapp .ahome .ahwlf .wx .meslb{border:1px solid red}.mapp .ahome .ahwlf .wx .meslb .xx{width:50%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mapp .ahome .ahwlf .wx .meslb .tx{height:45}.mapp .adhk{}.mapp .adhk .tv{border:1px solid;height:12%}.mapp .adhk .tv button{height:100%}.mapp .adhk .bv *{height:100%}.mapp .adhk .mesv{overflow:scroll;border:1px solid;height:78%}.mapp .adhk .bv{border:1px solid;height:10%}.mapp .adhk .mesv .df{border:0px solid;}.mapp .adhk .mesv .tbox{padding:5;vertical-align:top;width:70%;border:0px solid;display:inline-block}.mapp .adhk .mesv .text{padding:8;border:1px solid;display:inline-block}.mapp .adhk .mesv .tx{width:45;height:45}.mapp .adhk .mesv .me{direction:rtl}.mapp .adhk .mesv .me .text{direction:ltr;text-align:right}
</style>
<body></body>
<script>
var mlxrs=['罗华','萝卜','曾宇','刁杰','青菜']
var mxxs=[{ty:'df',n:'罗华',m:'吃饭没'},{ty:'df',n:'青菜',m:'你在哪？'},{ty:'df',n:'罗华',m:'来我家玩游戏，夏天的时候回来了吗方法论坛大地震局长大衣服的时候有时间'}]
var vctl={},dcemt=function(n){return document.createElement(n)};
function wcstart(){document.body.append(appf())}wcstart()
function appf(){var mapp=dcemt('div');vctl.mapp=mapp;mapp.className='mapp';mapp.append(ahomef(),adhkf());return mapp}
function ahomef(){var ahome=dcemt('div');vctl.ahome=ahome;ahome.className='ahome';ahome.append(ahwlff(),ahwf(),ahbtnf());return ahome}
function adhkf(){let fs01=1,adhk=dcemt('div'),tv=dcemt('div'),mesv=dcemt('div'),bv=dcemt('div'),bbtn=dcemt('button'),py=dcemt('button'),inp=dcemt('input'),fsbtn=dcemt('button');
adhk.className='adhk';tv.className='tv';mesv.className='mesv';bv.className='bv';
bbtn.innerHTML='返回';py.innerHTML='H';fsbtn.innerHTML='发送'
adhk.cmv=0
vctl.adhk=adhk;disoff(adhk);tv.append(bbtn,py);bv.append(inp,fsbtn);adhk.append(tv,mesv,bv);
bbtn.onclick=function(){adhk.cmv.remove();disoff(adhk);dison(vctl.ahome);}
fsbtn.onclick=function(){let xx={ty:'me',m:inp.value,n:'我'};if(xx.m==''){xx.m='自动，我吃饭去了';fs01=0}else{};if(fs01){inp.value='';adhk.cmv.append( mesf(xx) )} }
inp.oninput=function(){if(inp.value==''){fs01=0}else{fs01=1}}
adhk.setmesv=function(v){py.innerHTML=v.n;adhk.cmv=v;mesv.append(v)}
return adhk}
function ahwlff(){let ahwlf=dcemt('div');ahwlf.className='ahwlf';let tb=ahwlf_tbf(),wx=ahwlf_wxf(),lxr=ahwlf_lxrf(),fx=ahwlf_fxf();ahwlf.append(tb,wx,lxr,fx);ahwlf.crtv=wx;vctl.ahwlf=ahwlf;ahwlf.scrtvtext=function(n){disoff(ahwlf.crtv);switch(n){case '微信':ahwlf.crtv=wx;dison(wx);break;case '联系人':ahwlf.crtv=lxr;dison(lxr);;break;case '发现':ahwlf.crtv=fx;dison(fx);;break;case '微信':;break;};tb.crtv.innerHTML=n};return ahwlf}
function ahwf(){let ahw=dcemt('div');vctl.ahw=ahw;ahw.innerHTML='我';ahw.className='ahw';ahw.style.display='None';return ahw}    
function ahbtnf(){var ahbtn=dcemt('div'),bwx=dcemt('button'),blxr=dcemt('button'),bfx=dcemt('button'),bw=dcemt('button'); ahbtn.className='ahbtn';bwx.innerHTML='微信';blxr.innerHTML='联系人';bfx.innerHTML='发现';bw.innerHTML='我';bwx.onclick=function(){disoff(vctl.ahw);dison(vctl.ahwlf);vctl.ahwlf.scrtvtext(this.innerHTML)};blxr.onclick=function(){disoff(vctl.ahw);dison(vctl.ahwlf);vctl.ahwlf.scrtvtext(this.innerHTML)};bfx.onclick=function(){disoff(vctl.ahw);dison(vctl.ahwlf);vctl.ahwlf.scrtvtext(this.innerHTML)};bw.onclick=function(){disoff(vctl.ahwlf);dison(vctl.ahw)};ahbtn.append(bwx,blxr,bfx,bw);return ahbtn}
function ahwlf_tbf(){let tb=dcemt('div'),crtv=dcemt('button');tb.crtv=crtv;crtv.innerHTML='微信';tb.className='tb';tb.append(crtv);return tb}
function ahwlf_wxf(){let wx=dcemt('div');vctl.wx=wx;wx.innerHTML='WX';wx.className='wx';return wx}
function ahwlf_lxrf(){let lxr=dcemt('div');vctl.lxr=lxr;lxr.innerHTML='LXR';disoff(lxr);lxr.className='lxr';return lxr}
function ahwlf_fxf(){let fx=dcemt('div');fx.innerHTML='FX';disoff(fx);fx.className='fx';return fx}
for(let a in mlxrs){vctl.lxr.append(lxrlbf(mlxrs[a]));}
for(let a in mxxs){mdcenter(mxxs[a])}
function mdcenter(mo){function lxrisinwx(n){let wxc=vctl.wx.children;for(let a in wxc){if(wxc[a].n==n){return wxc[a]}} return false}; var llb=lxrisinwx(mo.n);if(!llb){let meslb=meslbf(mo);vctl.wx.append(meslb);meslb.xxck.append( mesf(mo) )}else{llb.setxx( mo )} }
function lxrlbf(m){let lxrlb=dcemt('div'),tx=dcemt('button'),mz=dcemt('button');lxrlb.className='lxrlb';tx.innerHTML='H';mz.innerHTML=m;lxrlb.append(tx,mz);return lxrlb}
function meslbf(mo){let meslb=dcemt('div'),tx=dcemt('button'),mz=dcemt('button'),xx=dcemt('button'),xxck=dcemt('div');meslb.className='meslb';tx.className='tx';xx.className='xx';tx.innerHTML='H';mz.innerHTML=mo.n;xx.innerHTML=mo.m;meslb.n=mo.n;xxck.n=mo.n;meslb.xxck=xxck;meslb.setxx=function(mo){xxck.append( mesf(mo) );xx.innerHTML=mo.m};meslb.onclick=function(){disoff(vctl.ahome);vctl.adhk.setmesv(xxck);dison(vctl.adhk);};meslb.append(tx,mz,xx);return meslb}
function mesf(m){let mes=dcemt('div'),tx=dcemt('button'),tbox=dcemt('div'),text=dcemt('div');mes.className=m.ty;tx.className='tx';tbox.className='tbox';text.className='text';tx.innerHTML='🙈';text.innerHTML=m.m;tbox.append(text);mes.append(tx,tbox);return mes}
function dison(emt){emt.style.display=''};function disoff(emt){emt.style.display='None'}
</script>

3

<style>
*{box-sizing:border-box}
.mapp{width:270;height:400;border:1px solid;}
.mapp .ahome .ahwlf{border:1px solid;height:87%}
.mapp .ahome .ahbtn{border:1px solid;height:13%}
.mapp .ahome .ahbtn button{width:25%;height:100%}
.mapp .ahome .ahw{height:87%} .mapp .ahome .ahwlf .tb{border:1px solid;}
.mapp .ahome .ahwlf .wx{} .mapp .ahome .ahwlf .lxr{} .mapp .ahome .ahwlf .fx{}.mapp .ahome .ahwlf .wx .meslb{border:1px solid red}.mapp .adhk{}.mapp .adhk .tv{border:1px solid;height:12%}.mapp .adhk .mesv{border:1px solid;height:78%}.mapp .adhk .bv{border:1px solid;height:10%}.mapp .adhk .mesv .df{border:1px solid;}.mapp .adhk .mesv .tbox{display:inline-block}.mapp .adhk .mesv .me{direction:rtl}.mapp .adhk .mesv .me .text{direction:ltr}
</style>
<body></body>
<script>
var mlxrs=['罗华','萝卜','曾宇','刁杰','青菜']
var mxxs=[{ty:'df',n:'罗华',m:'吃饭没'},{ty:'df',n:'青菜',m:'你在哪？'},{ty:'df',n:'罗华',m:'来我家玩游戏'}]
var vctl={}
var dcemt=function(n){return document.createElement(n)};
function wcstart(){document.body.append(appf())}wcstart()
function appf(){var mapp=dcemt('div');vctl.mapp=mapp;mapp.className='mapp';mapp.append(ahomef(),adhkf());return mapp}
function ahomef(){var ahome=dcemt('div');vctl.ahome=ahome;ahome.className='ahome';ahome.append(ahwlff(),ahwf(),ahbtnf());return ahome}
function adhkf(){let fs01=1,adhk=dcemt('div'),tv=dcemt('div'),mesv=dcemt('div'),bv=dcemt('div'),bbtn=dcemt('button'),py=dcemt('button'),inp=dcemt('input'),fsbtn=dcemt('button');
adhk.className='adhk';tv.className='tv';mesv.className='mesv';bv.className='bv';
bbtn.innerHTML='返回';py.innerHTML='H';fsbtn.innerHTML='发送'
adhk.cmv=0
vctl.adhk=adhk;disoff(adhk);tv.append(bbtn,py);bv.append(inp,fsbtn);adhk.append(tv,mesv,bv);
bbtn.onclick=function(){adhk.cmv.remove();disoff(adhk);dison(vctl.ahome);}
fsbtn.onclick=function(){let xx={ty:'me',m:inp.value,n:'我'};if(xx.m==''){xx.m='自动，我吃饭去了';fs01=0}else{};if(fs01){inp.value='';adhk.cmv.append( mesf(xx) )} }
inp.oninput=function(){if(inp.value==''){fs01=0}else{fs01=1}}
adhk.setmesv=function(v){py.innerHTML=v.n;adhk.cmv=v;mesv.append(v)}
return adhk}
function ahwlff(){let ahwlf=dcemt('div');ahwlf.className='ahwlf';let tb=ahwlf_tbf(),wx=ahwlf_wxf(),lxr=ahwlf_lxrf(),fx=ahwlf_fxf();ahwlf.append(tb,wx,lxr,fx);ahwlf.crtv=wx;vctl.ahwlf=ahwlf;ahwlf.scrtvtext=function(n){disoff(ahwlf.crtv);switch(n){case '微信':ahwlf.crtv=wx;dison(wx);break;case '联系人':ahwlf.crtv=lxr;dison(lxr);;break;case '发现':ahwlf.crtv=fx;dison(fx);;break;case '微信':;break;};tb.crtv.innerHTML=n};return ahwlf}
function ahwf(){let ahw=dcemt('div');vctl.ahw=ahw;ahw.innerHTML='我';ahw.className='ahw';ahw.style.display='None';return ahw}    
function ahbtnf(){var ahbtn=dcemt('div'),bwx=dcemt('button'),blxr=dcemt('button'),bfx=dcemt('button'),bw=dcemt('button'); ahbtn.className='ahbtn';bwx.innerHTML='微信';blxr.innerHTML='联系人';bfx.innerHTML='发现';bw.innerHTML='我';bwx.onclick=function(){disoff(vctl.ahw);dison(vctl.ahwlf);vctl.ahwlf.scrtvtext(this.innerHTML)};blxr.onclick=function(){disoff(vctl.ahw);dison(vctl.ahwlf);vctl.ahwlf.scrtvtext(this.innerHTML)};bfx.onclick=function(){disoff(vctl.ahw);dison(vctl.ahwlf);vctl.ahwlf.scrtvtext(this.innerHTML)};bw.onclick=function(){disoff(vctl.ahwlf);dison(vctl.ahw)};ahbtn.append(bwx,blxr,bfx,bw);return ahbtn}
function ahwlf_tbf(){let tb=dcemt('div'),crtv=dcemt('button');tb.crtv=crtv;crtv.innerHTML='微信';tb.className='tb';tb.append(crtv);return tb}
function ahwlf_wxf(){let wx=dcemt('div');vctl.wx=wx;wx.innerHTML='WX';wx.className='wx';return wx}
function ahwlf_lxrf(){let lxr=dcemt('div');vctl.lxr=lxr;lxr.innerHTML='LXR';disoff(lxr);lxr.className='lxr';return lxr}
function ahwlf_fxf(){let fx=dcemt('div');fx.innerHTML='FX';disoff(fx);fx.className='fx';return fx}
for(let a in mlxrs){vctl.lxr.append(lxrlbf(mlxrs[a]));}
for(let a in mxxs){mdcenter(mxxs[a])}
function mdcenter(mo){function lxrisinwx(n){let wxc=vctl.wx.children;for(let a in wxc){if(wxc[a].n==n){return wxc[a]}} return false}; var llb=lxrisinwx(mo.n);if(!llb){let meslb=meslbf(mo);vctl.wx.append(meslb);meslb.xxck.append( mesf(mo) )}else{llb.setxx( mo )} }
function lxrlbf(m){let lxrlb=dcemt('div'),tx=dcemt('button'),mz=dcemt('button');lxrlb.className='lxrlb';tx.innerHTML='H';mz.innerHTML=m;lxrlb.append(tx,mz);return lxrlb}
function meslbf(mo){let meslb=dcemt('div'),tx=dcemt('button'),mz=dcemt('button'),xx=dcemt('button'),xxck=dcemt('div');meslb.className='meslb';tx.innerHTML='H';mz.innerHTML=mo.n;xx.innerHTML=mo.m;meslb.n=mo.n;xxck.n=mo.n;meslb.xxck=xxck;meslb.setxx=function(mo){xxck.append( mesf(mo) );xx.innerHTML=mo.m};meslb.onclick=function(){disoff(vctl.ahome);vctl.adhk.setmesv(xxck);dison(vctl.adhk);};meslb.append(tx,mz,xx);return meslb}
function mesf(m){let mes=dcemt('div'),tx=dcemt('button'),tbox=dcemt('div'),text=dcemt('div');mes.className=m.ty;tx.className='tx';tbox.className='tbox';text.className='text';tx.innerHTML='🙈';text.innerHTML=m.m;tbox.append(text);mes.append(tx,tbox);return mes}
function dison(emt){emt.style.display=''};function disoff(emt){emt.style.display='None'}
</script>

2重新构造

<style>
*{box-sizing:border-box}
.mapp{width:270;height:400;border:1px solid;}
.mapp .ahome .ahwlf{border:1px solid;height:87%}
.mapp .ahome .ahbtn{border:1px solid;height:13%}
.mapp .ahome .ahbtn button{width:25%;height:100%}
.mapp .ahome .ahw{height:87%} .mapp .ahome .ahwlf .tb{border:1px solid;}
.mapp .ahome .ahwlf .wx{} .mapp .ahome .ahwlf .lxr{} .mapp .ahome .ahwlf .fx{}
.mapp .ahome .ahwlf .wx .meslb{border:1px solid red}
</style>
<body></body>
<script>
var mlxrs=['罗华','萝卜','曾宇','刁杰','青菜']
var mxxs=[{n:'罗华',m:'吃饭没'},{n:'青菜',m:'你在哪？'},{n:'罗华',m:'来我家玩游戏'}]
var vctl={}
var dcemt=function(n){return document.createElement(n)};
function wcstart(){document.body.append(appf())}wcstart()
function appf(){var mapp=dcemt('div');vctl.mapp=mapp;mapp.className='mapp';mapp.append(ahomef(),adhkf());return mapp}
function ahomef(){var ahome=dcemt('div');vctl.ahome=ahome;ahome.className='ahome';ahome.append(ahwlff(),ahwf(),ahbtnf());return ahome}
function adhkf(){let adhk=dcemt('div');vctl.adhk=adhk;disoff(adhk);adhk.className='adhk';adhk.innerHTML='Adhk';return adhk}
function ahwlff(){let ahwlf=dcemt('div');ahwlf.className='ahwlf';let tb=ahwlf_tbf(),wx=ahwlf_wxf(),lxr=ahwlf_lxrf(),fx=ahwlf_fxf();ahwlf.append(tb,wx,lxr,fx);ahwlf.crtv=wx;vctl.ahwlf=ahwlf;ahwlf.scrtvtext=function(n){disoff(ahwlf.crtv);switch(n){case '微信':ahwlf.crtv=wx;dison(wx);break;case '联系人':ahwlf.crtv=lxr;dison(lxr);;break;case '发现':ahwlf.crtv=fx;dison(fx);;break;case '微信':;break;};tb.crtv.innerHTML=n};return ahwlf}
function ahwf(){let ahw=dcemt('div');vctl.ahw=ahw;ahw.innerHTML='我';ahw.className='ahw';ahw.style.display='None';return ahw}    
function ahbtnf(){var ahbtn=dcemt('div'),bwx=dcemt('button'),blxr=dcemt('button'),bfx=dcemt('button'),bw=dcemt('button'); ahbtn.className='ahbtn';bwx.innerHTML='微信';blxr.innerHTML='联系人';bfx.innerHTML='发现';bw.innerHTML='我';bwx.onclick=function(){disoff(vctl.ahw);dison(vctl.ahwlf);vctl.ahwlf.scrtvtext(this.innerHTML)};blxr.onclick=function(){disoff(vctl.ahw);dison(vctl.ahwlf);vctl.ahwlf.scrtvtext(this.innerHTML)};bfx.onclick=function(){disoff(vctl.ahw);dison(vctl.ahwlf);vctl.ahwlf.scrtvtext(this.innerHTML)};bw.onclick=function(){disoff(vctl.ahwlf);dison(vctl.ahw)};ahbtn.append(bwx,blxr,bfx,bw);return ahbtn}
function ahwlf_tbf(){let tb=dcemt('div'),crtv=dcemt('button');tb.crtv=crtv;crtv.innerHTML='微信';tb.className='tb';tb.append(crtv);return tb}
function ahwlf_wxf(){let wx=dcemt('div');vctl.wx=wx;wx.innerHTML='WX';wx.className='wx';return wx}
function ahwlf_lxrf(){let lxr=dcemt('div');vctl.lxr=lxr;lxr.innerHTML='LXR';disoff(lxr);lxr.className='lxr';return lxr}
function ahwlf_fxf(){let fx=dcemt('div');fx.innerHTML='FX';disoff(fx);fx.className='fx';return fx}
for(let a in mlxrs){vctl.lxr.append(lxrlbf(mlxrs[a]));}
for(let a in mxxs){mdcenter(mxxs[a])}
function mdcenter(mo){function lxrisinwx(n){let wxc=vctl.wx.children;for(let a in wxc){if(wxc[a].n==n){return wxc[a]}} return false}; var llb=lxrisinwx(mo.n);if(!llb){let meslb=meslbf(mo);vctl.wx.append(meslb);meslb.xxck.append(mo.m)}else{llb.setxx(mo.m)} }
function lxrlbf(m){let lxrlb=dcemt('div'),tx=dcemt('button'),mz=dcemt('button');lxrlb.className='lxrlb';tx.innerHTML='H';mz.innerHTML=m;lxrlb.append(tx,mz);return lxrlb}
function meslbf(mo){let meslb=dcemt('div'),tx=dcemt('button'),mz=dcemt('button'),xx=dcemt('button'),xxck=dcemt('div');meslb.className='meslb';tx.innerHTML='H';mz.innerHTML=mo.n;xx.innerHTML=mo.m;meslb.n=mo.n;meslb.xxck=xxck;meslb.setxx=function(n){xxck.append(n);xx.innerHTML=n};meslb.onclick=function(){disoff(vctl.ahome);dison(vctl.adhk);};meslb.append(tx,mz,xx,xxck);return meslb}
function dison(emt){emt.style.display=''};function disoff(emt){emt.style.display='None'}
</script>
善待366
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Mstar方案软件运行基本原理
USB_ABC的博客
03-07 1550
1、 MApp_Main.c里有个while(1)循环； 2、 通过 while(1)循环MApp_MultiTasks 里面的 MApp_ProcessUserInput 可以 得到 当前的 u8KeyCode 3、 while(1)循环 里面的MApp_TopStateMachine的作用： 3.1、在刚开机时，首先 enTopState = STATE_TOP_DIGITALINPUTS 等待用户输入; 3.2、再次调用：MApp_TopStateMachine时，switch ( enTopStat
Kotlin学习记录
芝士味椒盐的博客
01-14 6992
常见的数据类型 Byte 存储值范围整数-128-127 Short 存储值范围整数-32768-32767 Int 存储值范围整数-2147483648-2147483647 Long 存储值范围整数-9223372036854775807-9223372036854775807 Foat 存储值范围小数，小数点可以精确到6位 Double 存储值范围小数，小数点可以精确到15-16位 String
HDU 2433 Travel （最短路，BFS，变形）
weixin_30443813的博客
06-30 88
题意： 　　给出一个图的所有边，每次从图中删除一条边，求任意点对的路径总和（求完了就将边给补回去）。（有重边） 思路： 1 #include <bits/stdc++.h> 2 using namespace std; 3 const int N=105, INF=0x7f7f7f7f; 4 int m...
Mil学习之Mapp
Thomas会写字
05-29 1917
一、什么是Mapp 以Mapp为前缀的函数构成了应用程序模块。应用程序模块允许您初始化和控制MIL应用程序的执行环境。除其他外，该模块还提供集成调试服务、用于基准测试的高性能计时器、可移植线程和事件处理，以及用于处理和内存操作的自动系统资源补偿。 二、Mapp常用功能 1. 初始化Mil环境 使用MappAlloc 和MappFree C++写法1。 MIL_ID MilApplication = M_NULL; MappAlloc(M_NULL, M_DEFAULT, &Mil..
模拟微信主界面H5
01-15
超仿真微信主界面，各项功能齐全，界面美观，适合微信平台多场景二次开发！
微信界面的模拟
weixin_56072688的博客
04-22 406
1 <style> #myapp{position:relative;border:1px solid red;width:270;height:400} .btns{position:absolute;bottom:0px;border:1px solid red;width:100%;height:13%} .btns button{width:25%;height:100%;float:left} .topbtns{border:1px solid red;width:100%;heigh
模仿微信界面
09-21
在Android应用开发中，模仿微信界面是一个常见的需求，这涉及到对用户界面（UI）的设计和实现，特别是如何利用布局管理器来构建一个直观且功能丰富的交互界面。在本项目中，我们将聚焦于使用`FrameLayout`来实现这一...
html实现微信界面
02-06
3. **响应式设计**：微信界面在手机和平板电脑上的表现都需要一致，因此项目可能采用了媒体查询（Media Queries）来实现不同屏幕尺寸下的适配。 4. **JavaScript交互**：虽然描述中没有明确提到JavaScript，但实现...
html5仿微信聊天界面
03-08
在仿微信聊天界面中，CSS3用于美化界面，如圆角边框、阴影、渐变色、过渡效果和动画。例如，使用Flexbox或Grid布局可以实现灵活的界面布局，而`@keyframes`规则则可创建自定义动画。 3. **JavaScript**: JavaScript...
模拟微信界面2
08-21
在使用ViewPager + Fragment 的时候报错：The specified child already has a parent. You must call removeView() on the child’s parent first.
前端小项目——模拟微信界面对话框
miao_599的博客
05-30 2327
最近看网课做了个小项目，用到了前端很多知识点 用到的知识点： HTML知识点： div大盒子，id为contentALL：包含所有的内容 div头部小盒子，id为header：包含整个对话框的头部信息 div中间对话内容，id为content：初始化是空的，动态载入 div尾部小盒子，id为footer：内容是头像图片，输入框，发送按钮 对于内容区是ul包含的li标签，这点很巧妙。 以下是完整代...
模拟微信界面
play_science的博客
05-13 581
MainActivity类 //fragment 是用来创建静态的fragment //FrameLayout 是用来创建动态的fragment package com.example.administrator.touxiang; import android.app.FragmentTransaction; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.wid
HTML5仿手机微信聊天界面
热门推荐
叶落无痕的博客
06-03 2万+
HTML5仿手机微信聊天界面，截图效果如下： 源代码如下： HTML5模拟微信聊天界面 /**重置标签默认样式*/ * { margin: 0; padding: 0; list-style: none; font-family: '微软雅黑
CSS模拟微信对话框
aganliang的专栏
02-22 3743
通过border来实现小三角形，模拟微信的对话框： &lt;div class="left"&gt; &lt;p&gt;你好，我是卖茶叶的&lt;/p&gt; &lt;/div&gt; &lt;div class="right"&gt; &lt;p&gt;你好，我是种茶的&lt;/p&gt; &lt;/div&gt; 其
ConcurrentHashMap 源码分析08函数篇之 forEach、 search详解
weixin_44245828的博客
12-09 2157
1. forEach(BiConsumer<? super K, ? super V> action) 使用 Traverser 类的 advance 方法获取下一元素，遍历直至获取到 null public void forEach(BiConsumer<? super K, ? super V> action) { if(action == null) throw new NullPointerException(); Node<K,V>[] t;
Android 实战之模拟微信首页界面 (java实现)
程序猿追的博客
04-04 1万+
Android 实战之模拟微信首页界面 (java实现)
web仿微信支付界面，自定义模拟键盘
weixin_43193877的博客
11-05 6380
web仿微信支付界面，自定义模拟键盘 可谓是煞费苦心 还是自己技能不足，不过还是出来了 第一板块是html界面 微信支付 <link rel="stylesheet" type="text/css" href="css/animate.css"> <link rel="stylesheet" type="text/css" href="...
vue+nodejs模拟微信界面实现简单的聊天室
code_tang
12-18 4987
模拟微信界面实现一个简单的聊天室，后端服务采用nodejs+ws模块搭建websocket服务。前端简介采用vue.js+vuex,less,pug等编写。 上完成效果图 源码传送门： github源码传送门 在线体验： 在线体验地址 详情查看仓库下’readme.md’。 ...
canvas绘图_erciyuanfulitu
weixin_56072688的博客
05-19 9382
<canvas id='mcvs' width=300 height=300></canvas> <img id='img' src="https://img5.51tietu.net/pic/2019-080802/xr0s03fp520xr0s03fp520.jpg" alt="20160418_193134_007" width="777" height="808" /> <script> img.onload=function(){ img.widt
用数据库完成微信通讯模拟
最新发布
05-18
最后，我们可以使用界面库（如Tkinter、Qt等）来编写界面，将用户操作与后台数据库交互的代码结合起来，实现一个完整的微信通讯模拟系统。 总之，使用数据库来完成微信通讯模拟需要设计合适的表结构，并编写对应的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值