javascript实战第一讲：聊天窗口

来源：互联网发布：算法导论如何编辑：程序博客网时间：2024/06/05 15:03

第一种方式：实现聊天功能的javascipt:
<script>
window.onload=function(){ //页面加载完毕后，执行下面代码
var osend=document.getElementById("send");//获取发送按钮对象
var otext=document.getElementById("text");//获取输入框对象
var ochat_show=document.getElementById("chat_show");//获取显示框div对象
var oclose=document.getElementById("close");//获取关闭按钮对象
var omianWindow=document.getElementById("mianWindow");//获取整个聊天窗口对象
osend.onclick=function(){//发送按钮点击事件
  if(otext.value==""){//如果输入框内容为空，给出提示内容！
   alert('请输入需要发送的内容！');
  }else{//否则输入框不为空，执行以下发送代码
  var str2=chat_time();//调用时间函数，讲返回值赋给该变量。
  ochat_show.innerHTML = ochat_show.innerHTML+"倾水折<img src='img/3.png'/><img src='img/2.png'/>已认证"+" "+" "+str2+"<br/>"+"<p>"+otext.value+"</p>";//赋值：输入框内容赋值给显示框，保留原有内容的前提下。
  otext.value="";//点击的时候，输入框内容清空
  };
//alert(ochat_show.innerHTML);
};

   oclose.onclick=function(){//点击关闭按钮事件执行函数
omianWindow.style.display="none";//函数内容为对聊天窗口的样式进行影藏设置。

   };

function chat_time(){//自定义函数通过时间对象，取得时间。
var newdate=new Date;//创建时间当前日期对象
var h=newdate.getHours();//取得当前时间日期对象的小时，并赋值给变量
var m=newdate.getMinutes();//取得当前时间日期对象的分钟，并赋值给变量
var s=newdate.getSeconds();//取得当前时间日期对象的秒数，并赋值给变量
var y=newdate.getFullYear();//取得当前时间日期对象的年份，并赋值给变量
var M=newdate.getMonth()+1;//取得当前时间日期对象的月份，并赋值给变量
var d=newdate.getDate();//取得当前时间日期对象的天，并赋值给变量
var str=""+y+"-"+M+"-"+d+" "+h+":"+m+":"+s;//讲获取的时间日期转换了字符串。
return str;//返回时间格式字符串给函数调用的地方。
};

//alert(chat_time());

};
</script>
页面布局：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{margin:0px;padding:0px;font-family:"微软雅黑";font-weight:bold;}
ul li{list-style:none;}
body{background:rgba(0,0,255,0.7);}
#mianWindow{width:920px;height:520px;background:#f8c0ad;margin:50px auto;opacity:0.5;box-shadow:2px 2px 3px #fff;border-top:2px solid #ccc;border-left:2px solid #ccc;}
   #mian_top{height:85px;width:100%;border-bottom:1px solid #ccc;}
   #mian_top ul li.pointer{font-size:16px;height:30px;line-height:30px;width:240px;text-indent:10px;}
   #mian_top ul li.pointer:hover{text-decoration:underline;cursor:pointer;}
   #mian_top ul li .position{width:30px;height:30px;display:inline-block;background:url('img/icenter.32-ocu150107203425.png') no-repeat top -4px left -62px;}
   #mian_top ul li img{margin-top:6px;line-height:20px;vertical-align:top;}
   #mian_top ul li span{width:70px;height:18px;display:inline-block;background:url("img/svip6.png") no-repeat left top,url("img/yearsvip.png") no-repeat right bottom;margin-left:5px;}
   #chat_show{width:782px;height:290px;border-bottom:1px solid #ccc;float:left;overflow:hidden;}
   #qq_show{width:135px;height:420px;background:blue;float:right;}
   #chat_input{width:780px;height:144px;background:green;float:left;position:relative;}
   #chat_input textarea{width:100%;height:100%;}
   #chat_input textarea:hover{border:1px solid red;overflow:hidden;resize:none;}

   #chat_input input{width:65px;height:25px;border:1px solid #000;background:#ffcc66}
   #chat_input input:hover{background:#ffff99}
   #chat_input input#send{position:absolute;right:25px;bottom:0px;cursor:pointer;}
   #chat_input input#close{position:absolute;right:95px;bottom:0px;cursor:pointer;}

</style>
</head>
<body>
<div id="mianWindow">
<div id="mian_top">
  <ul>
   <li class="pointer">倾水折<img src="img/3.png"/><img src="img/2.png"/>已认证<span title="年费超级会员成长阶段SVIP6" style="margin:0px 5px;"></span></li>
   <li ><span class="position" title="进入QQ空间"></span>改变：因为有一个跟现在环境不能吻合的心！群处守嘴，独处守心，有些话适合烂在心里。</li>
   <li>3</li>

  </ul>
</div>
<div id="chat_window">
  <div id="chat_show">

  </div>
  <div id="qq_show">
   <img src="img/1.jpg">
  </div>
  <div id="chat_input">
   
   <textarea id="text" value="">


   </textarea>
   <input id="close" type="button" value="关闭"/>
   <input id="send" type="button" value="发送"/>
  </div>
</div>


</div>
</body>
</html>

第二种：供参考
window.onload=function(){
var Txt = document.getElementById("txt");
var QQ = document.getElementById("qq");
var But = document.getElementById("but");
var Del = document.getElementById("del");

//alert(Time)

Time()
setInterval(Time,1000)
function Time(){
var myDate = new Date();
var H = myDate.getHours();
var M = myDate.getMinutes();
var S = myDate.getSeconds();
var Times= H+":"+M+":"+S;
//alert(Times)
//添加
But.onclick=Butclick;
function Butclick(){
  if(Txt.value==""){
   //alert("请输入需要发送的内容！")
  But.innerHTML="<span id='butBug'>请输入需要发送的内容！</span>";
  }else{
  QQ.innerHTML=QQ.innerHTML+"<li>"+"<p>大开小资(<a href='#'>592534</a>)   "+Times+"</p>"+"<p class='txt'>"+"&nbsp"+Txt.value+"</p>"+"</li>";
  Txt.value="";
  }
}
}
//清除
Del.onclick=function(){
  if(QQ.innerHTML==""){
   //alert("没有您需要清除的内容！")
  Del.innerHTML="<span id='butBug'>没有您需要清除的内容！</span>";
  }else{
   QQ.innerHTML="";
  }
}
//自动隐藏提示
DelTime()
setInterval(DelTime,2000)
function DelTime(){
  //alert("sss")
  Del.innerHTML="";
  But.innerHTML="";
}
//Enter键盘事件
function keyUp(e){
var DowKey=0,e=e||event;
var DowKey=e.keyCode||e.which||e.charCode;
var myDate = new Date();
var H = myDate.getHours();
var M = myDate.getMinutes();
var S = myDate.getSeconds();
var Times= H+":"+M+":"+S;
if(DowKey==13){
  QQ.innerHTML=QQ.innerHTML+"<li>"+"<p>大开小资(<a href='#'>592534</a>)   "+Times+"</p>"+"<p class='txt'>"+"&nbsp"+Txt.value+"</p>"+"</li>";
  Txt.value="";
}
}
document.onkeyup = keyUp;

}
</script>

第二种的布局样式：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
<title>模版</title>
<ment name="Keywords" content="大开小资-作业,小资QQ:592534,QQ群:52640411，客服QQ:52640411.客服QQ:52640412">
<ment name="description" content="大开小资，来自潭州学院的web前端攻城狮！">
</head>
<style type="text/css">
*{margin:0;padding:0;}
body,html{width:100%;height:100%;-background:#59908c;}
#msg{width:755px;height:623px;margin:0 auto;background:url("img/bg.png") no-repeat;box-shadow:0 0 20px #CCC;position:relative;}
#but{width:86px;height:25px;position:absolute;left:525px;bottom:5px;cursor:pointer}
#del{width:67px;height:25px;position:absolute;left:450px;bottom:5px;cursor:pointer}
#txt{width:600px;height:80px;position:absolute;left:2px;bottom:30px;font-size:14px;line-height:30px;color:#cc00ff;padding-left:10px;background:none;border:none;overflow:hidden; resize:none;}
#qq{width:590px;height:380px;position:absolute;left:2px;top:85px;overflow:auto;padding:10px;}
#qq ul li{width:550px;height:30px;border:1px solid red;margin:10px 0;}
#qq p{color:#008040;font-size:12px;}
#qq p a{color:#0066ff;font-size:12px;}
#qq p.txt{color:#cc66ff;font-size:12px;width:550px;margin-left:5px;line-height:15px;word-break:break-all;}
#butBug{position:absolute;padding:5px;width:200px;height:20px;border:1px solid ##ccffcc;background:#FFF;top:-35px;left:-50px;text-align:center;border-radius:10px;box-shadow:0 0 10px #ccffff;}
</style>
<body>
<div id="msg">
  <ul id="qq"></ul>
  <textarea id="txt"></textarea>
  <p id="but"></p>
  <p id="del"></p>
</div>
</body>

0 0