javascript实战第一讲:聊天窗口
第一种方式:实现聊天功能的javascipt:
<script>
window.οnlοad=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.οnclick=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);
};
<script>
window.οnlοad=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.οnclick=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.οnclick=function(){//点击关闭按钮事件执行函数
omianWindow.style.display="none";//函数内容为对聊天窗口的样式进行影藏设置。
};
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;}
#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">
<!-- <input type="text" value="" /> -->
<textarea id="text" value="">
</textarea>
<input id="close" type="button" value="关闭"/>
<input id="send" type="button" value="发送"/>
</div>
</div>
</div>
</body>
</html>
第二种:供参考
window.οnlοad=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.οnclick=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'>"+" "+Txt.value+"</p>"+"</li>";
Txt.value="";
}
}
}
//清除
Del.οnclick=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'>"+" "+Txt.value+"</p>"+"</li>";
Txt.value="";
}
}
document.onkeyup = keyUp;
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.οnclick=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'>"+" "+Txt.value+"</p>"+"</li>";
Txt.value="";
}
}
}
//清除
Del.οnclick=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'>"+" "+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>
</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>