圆月山庄资源网 Design By www.vgjia.com
本文实例为大家分享了js实现微信聊天效果的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } .box{ width: 250px; height: 400px; border: 1px solid #cccccc; float: left; margin-left: 200px; position: relative; } .fox{ width: 250px; height: 400px; border: 1px solid #cccccc; float: left; margin-left: 200px; position: relative; } .box1{ width: 250px; height: 20px; background: #cdcdcd; line-height: 20px ; text-align: center; } .fox1{ width: 250px; height: 20px; background: #cdcdcd; line-height: 20px ; text-align: center; } .box3{ width: 250px; height: 30px; bottom: 0px ; position: absolute; } .fox3{ width: 250px; height: 30px; bottom: 0px ; position: absolute; } .input1{ width: 200px; height: 28px; } .input2{ width: 40px; height: 30px; } .input3{ width: 200px; height: 28px; } .input4{ width: 40px; height: 30px; } .text1{ overflow: scroll; overflow-x: hidden; overflow-y: visible; height: 350px; } .text2{ overflow: scroll; overflow-x: hidden; overflow-y: visible; height: 350px; } </style> </head> <body> <div class="box"> <div class="box1">AAAAAAAA</div> <div class="text1"></div> <div class="box3"> <input class="input1" type="text"> <input class="input2" type="button" value="发送"> </div> </div> <div class="fox"> <div class="fox1">BBBBBBBB</div> <div class="text2"></div> <div class="fox3"> <input class="input3" type="text"> <input class="input4" type="button" value="发送"> </div> </div> <script> var oIpt1=document.getElementsByClassName("input1")[0]; var oIpt3=document.getElementsByClassName("input3")[0]; var oIpt2=document.getElementsByClassName("input2")[0]; var oIpt4=document.getElementsByClassName("input4")[0]; var oText1=document.getElementsByClassName("text1")[0]; var oText2=document.getElementsByClassName("text2")[0]; oIpt2.onclick=function () { var newDate=new Date(); var oHouer=newDate.getHours(); var oMinutes=newDate.getMinutes(); var oSecond=newDate.getSeconds(); var oDiv1=document.createElement("div") var oDiv2=document.createElement("div") var oDiv3=document.createElement("div") var oDiv4=document.createElement("div") oDiv1.style.textAlign="right" oDiv2.style.textAlign="left" oDiv3.style.textAlign="center" oDiv4.style.textAlign="center" oText1.appendChild(oDiv3); oText1.appendChild(oDiv1); oText2.appendChild(oDiv4) oText2.appendChild(oDiv2); oDiv3.innerHTML=oHouer+"时"+oMinutes+"分"+oSecond+"秒" oDiv4.innerHTML=oHouer+"时"+oMinutes+"分"+oSecond+"秒" oDiv1.innerHTML=oIpt1.value; oDiv2.innerHTML=oIpt1.value; oIpt1.value="" } oIpt4.onclick=function () { var newDate=new Date(); var oHouer=newDate.getHours(); var oMinutes=newDate.getMinutes(); var oSecond=newDate.getSeconds(); var oDiv1=document.createElement("div") var oDiv2=document.createElement("div") var oDiv3=document.createElement("div") var oDiv4=document.createElement("div") oDiv1.style.textAlign="center" oDiv2.style.textAlign="center" oDiv3.style.textAlign="right" oDiv4.style.textAlign="left" oText2.appendChild(oDiv1); oText1.appendChild(oDiv2); oText2.appendChild(oDiv3); oText1.appendChild(oDiv4); oDiv1.innerHTML=oHouer+"时"+oMinutes+"分"+oSecond+"秒" oDiv2.innerHTML=oHouer+"时"+oMinutes+"分"+oSecond+"秒" oDiv3.innerHTML=oIpt3.value; oDiv4.innerHTML=oIpt3.value; oIpt3.value="" } </script> </body> </html>
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
希望本文所述对大家学习javascript程序设计有所帮助。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,微信聊天
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]