js 위챗 채팅 효과 실현

5453 단어 js위챗 채팅
본고의 실례는 여러분에게 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 프로그램 설계를 배우는 데 도움이 되기를 바랍니다.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.

좋은 웹페이지 즐겨찾기