基于B/S的在线交流系统的开发日记(2) 版本一

Posted on 2007-05-10 15:43 supersun-mo 阅读(1247) 评论(2) 收藏举报

基于AJAX 1.0组件，没有面向对象，代码冗余的一段粗糙代码，大家来对它进行精简，我会将它简化成基于prototype１.４的精简版本，下面把代码贴出来

/*系统初始变量区域*/
3

var contentArea;//主内容显示区域
4

var spPerson; //发言人
5

var spBodyFlag; //发言身份标志
6

var spTo="-1"; //所有客户服务人员
7

var spName; //发言人名字
8

var words; //发言内容
9

/*系统初始变量定义结束*/
10

/*系统函数定义区域*/
12

//发言功能函数
14

function sayToPerson()
15

{
16

//发言内容格式化以及合法性能验证
17

words = document.getElementById("iframeSpeak").contentWindow.document.body.innerHTML;
18

var rword="<P> </P>"
19

while(words.indexOf(rword)!=-1)
20

{
21

words=words.replace("<P> </P>","");
22

}
23

if(words=="")
24

{
25

alert("发言内容不能为空!");
26

return false;
27

}
28

else
29

{
30

spPerson=document.getElementById("UserID").value;
31

spBodyFlag=0;
32

spTo=document.getElementById("SpTo").value;
33

if(spTo=="-1")
34

{
35

alert("请先选择客服人员!");
36

return false;
37

}
38

spName=document.getElementById("SpToName").value;
39

var _Date= new Date();
40

spCsTime=_Date.getFullYear()+"-"+TimeFormat(parseFloat(_Date.getMonth()+1))+"-"+TimeFormat(_Date.getDate())+" "+TimeFormat(_Date.getHours())+":"+TimeFormat(_Date.getMinutes())+":"+TimeFormat(_Date.getSeconds());
41

ChatFrame.speakInsert(spPerson,spBodyFlag,spTo,words,spCsTime,sayTo_CallBack);
42

}
43

}
44

//发言功能回调函数
46

function sayTo_CallBack(res)
47

{
48

var sucflag=res.value;
49

contentArea=document.getElementById("MainContent");
50

var data= new Date();
51

if(sucflag.length>1)
52

{
53

contentArea.innerHTML+="<dl><dt><table style=\"width:100%\" cellpadding=\"0\" cellspacing=\"0\"><tr><td style=\"width:20%\" class=\"dtt\">我对<a href=\"javascript:SetSpToo('"+spTo+"','"+spName+"')\">"+spName+"</a></td><td align=\"left\" style=\"width:30%\" class=\"dtt1\">["+data.getFullYear()+"-"+TimeFormat(parseFloat(data.getMonth()+1))+"-"+TimeFormat(data.getDate())+"  "+TimeFormat(data.getHours())+":"+TimeFormat(data.getMinutes())+":"+TimeFormat(data.getSeconds())+"]</td><td align=\"right\" style=\"width:50%\" class=\"dtt1\">ShoesMKT时间  "+sucflag+"</td></tr></table></dt><dd>"+words+"</dd></dl>";
54

contentArea.scrollTop=contentArea.offsetHeight+window.document.body.scrollHeight+500;
55

document.getElementById("iframeSpeak").contentWindow.document.body.innerHTML="";
56

document.getElementById("iframeSpeak").contentWindow.document.focus();
57

}
58

else
59

{
60

contentArea.innerHTML+="发送失败，原因是："+sucflag+"<br>";
61

}
62

}
63

/*发言功能区域函数结束*/
64

/*编辑器问候语以及热键加载函数*/
66

function bindQj()
67

{
68

document.getElementById("iframeSpeak").contentWindow.document.write('<html><head></head><body style="font-size:10pt;" contenteditable="true" topmargin="5" leftmargin="5"></body></html>');
69

document.getElementById("iframeSpeak").contentWindow.document.onmousedown=function()
71

{
72

document.getElementById("div_Face").style.display="none";
73

document.getElementById("div_Upload").style.display="none";
74

}
75

document.getElementById("iframeSpeak").contentWindow.document.onkeydown=function()
76

{
77

e=document.getElementById("iframeSpeak").contentWindow.event;
78

if((e.ctrlKey && e.keyCode == 13)||(e.altKey && e.keyCode == 83))
79

{
80

document.getElementById("sendMes").click();
81

}
82

}
84

}
86

/*编辑器问候语以及热键加载函数结束*/
87

/*发言内容获取以及显示功能函数*/
89

var temp="";
90

var dt=null;
91

var _Date=null;
92

function getSerWords(IsFrist)
93

{
94

var uN=document.getElementById("UserID").value;//改为用userid关联
95

if(IsFrist=="0")
96

{
97

setLast(uN);
98

window.setTimeout(getLeftWords,3000);
99

}
100

101

var maxID=document.getElementById("lastID").value;
102

ChatFrame.speakContent(uN,maxID,IsFrist,getW_CallBack);
103

}
104

105

function getLeftWords()
106

{
107

// var mxid=document.getElementById("lastID").value;
108

var uN=document.getElementById("UserID").value;//改为用userid关联
109

var mxid=ChatFrame.GetLastID(uN).value;
110

ChatFrame.leftLineWords(uN,mxid,setLeft_CallBack);
111

}
112

//发言内容获取回调函数
113

function getW_CallBack(res)
114

{
115

temp="";
116

dt=res.value;//得到回答的数据
117

_Date=new Date();
118

if(dt!=null)
119

{
120

for(var i=0;i<dt.Rows.length;i++)
121

{
122

if(dt.Rows[i].SpeakTo=="-2")//处理上线
123

{
124

document.getElementById("divSevicer_C"+dt.Rows[i].ConID).className="divOnline";
125

document.getElementById("lab_line"+dt.Rows[i].ConID).innerText="[状态:在线]";
126

document.getElementById("divSevicer_"+dt.Rows[i].ConID).nowP=dt.Rows[i].PerSonID;
127

document.getElementById("lab_line"+dt.Rows[i].ConID).parentElement.className="divOnlineLabel";
128

//系统消息,上线人员提醒
129

document.getElementById("MainContent").innerHTML+="<div class=\"divMesVote\">系统消息:客服"+document.getElementById("divSevicer_C"+dt.Rows[i].ConID).innerText+"上线了!</div>";
130

document.getElementById("MainContent").scrollTop=document.getElementById("MainContent").offsetHeight+window.document.body.scrollHeight+20;
131

document.getElementById("iframeSpeak").contentWindow.focus();
132

continue;
133

}
134

if(dt.Rows[i].SpeakTo=="-3")//处理下线
135

{
136

document.getElementById("divSevicer_C"+dt.Rows[i].ConID).className="divOffline";
137

document.getElementById("divSevicer_"+dt.Rows[i].ConID).nowP=dt.Rows[i].PerSonID;
138

document.getElementById("lab_line"+dt.Rows[i].ConID).innerText="[状态:离线]";
139

document.getElementById("lab_line"+dt.Rows[i].ConID).parentElement.className="divOfflineLabel";
140

//系统消息,下线人员提醒
141

document.getElementById("MainContent").innerHTML+="<div class=\"divMesVote\">系统消息:客服"+document.getElementById("divSevicer_C"+dt.Rows[i].ConID).innerText+"下线了!</div>";
142

document.getElementById("MainContent").scrollTop=document.getElementById("MainContent").offsetHeight+window.document.body.scrollHeight+20;
143

document.getElementById("iframeSpeak").contentWindow.focus();
144

continue;
145

}
146

if(dt.Rows[i].SpeakTo=="-4")//处理离线忙
147

{
148

document.getElementById("divSevicer_C"+dt.Rows[i].ConID).className="divBusy";
149

document.getElementById("divSevicer_"+dt.Rows[i].ConID).nowP=dt.Rows[i].PerSonID;
150

document.getElementById("lab_line"+dt.Rows[i].ConID).innerText="[状态:忙碌]";
151

document.getElementById("lab_line"+dt.Rows[i].ConID).parentElement.className="divBusyLabel";
152

//系统消息,忙线人员提醒
153

document.getElementById("MainContent").innerHTML+="<div class=\"divMesVote\">系统消息:客服"+document.getElementById("divSevicer_C"+dt.Rows[i].ConID).innerText+"忙碌中!</div>";
154

document.getElementById("MainContent").scrollTop=document.getElementById("MainContent").offsetHeight+window.document.body.scrollHeight+20;
155

document.getElementById("iframeSpeak").contentWindow.focus();
156

continue;
157

}
158

else
159

{
160

temp+="<dl><dt><table style=\"width:100%\" cellpadding=\"0\" cellspacing=\"0\"><tr><td style=\"width:20%\" class=\"dtt\"><a href=\"javascript:SetSpToo('"+dt.Rows[i].PerSonID+"','"+dt.Rows[i].PerSonName+"')\">"+dt.Rows[i].PerSonName+"</a>对我</td><td align=\"left\" style=\"width:30%\" class=\"dtt1\">["+_Date.getFullYear()+"-"+TimeFormat(parseFloat(_Date.getMonth()+1))+"-"+TimeFormat(_Date.getDate())+"  "+TimeFormat(_Date.getHours())+":"+TimeFormat(_Date.getMinutes())+":"+TimeFormat(_Date.getSeconds())+"]</td><td align=\"right\" style=\"width:50%\" class=\"dtt1\">ShoesMKT时间  ["+dt.Rows[i].cTime+"]</td></tr></table></dt><dd>"+dt.Rows[i].SpeakWords+"</dd></dl>";
161

}
162

163

}
164

if(dt.Rows.length>0)
165

{
166

document.getElementById("lastID").value=dt.Rows[dt.Rows.length-1].id;//更新最后的id值
167

document.getElementById("MainContent").innerHTML+=temp;
168

document.getElementById("MainContent").scrollTop= document.getElementById("MainContent").offsetHeight+window.document.body.scrollHeight+1000;
169

document.getElementById("iframeSpeak").contentWindow.focus();
170

}
171

172

}
173

174

window.setTimeout("getSerWords('1')",5000);
175

}
176

177

//获取留言内容回调函数
178

function setLeft_CallBack(res)
179

{
180

var dt=res.value;
181

var _Date=new Date();
182

if(dt!=null)
183

{
184

if(dt.Rows.length>0)
185

{
186

var temp="";
187

for(var i=0;i<dt.Rows.length;i++)
188

{
189

//<a href=\"javascript:SetSpToo('"+dt.Rows[i].PerSonID+"','"+dt.Rows[i].PerSonName+"')\">去掉了留言的选人回复
190

temp+="<dl style=\"BACKGROUND-COLOR: #e0e0e0\"><dt><table style=\"width:100%\" cellpadding=\"0\" cellspacing=\"0\"><tr><td style=\"width:20%\" class=\"dtt\">"+dt.Rows[i].PerSonName+"对我留言</td><td align=\"left\" style=\"width:30%\" class=\"dtt1\">["+_Date.getFullYear()+"-"+TimeFormat(parseFloat(_Date.getMonth()+1))+"-"+TimeFormat(_Date.getDate())+"  "+TimeFormat(_Date.getHours())+":"+TimeFormat(_Date.getMinutes())+":"+TimeFormat(_Date.getSeconds())+"]</td><td align=\"right\" style=\"width:50%\" class=\"dtt1\">ShoesMKT时间  ["+dt.Rows[i].cTime+"]</td></tr></table></dt><dd>"+dt.Rows[i].SpeakWords+"</dd></dl>";
191

}
192

document.getElementById("MainContent").innerHTML+=temp;
193

}
194

}
195

}
196

/*发言内容功能函数结束*/
197

198

/*主内容显示区域清空函数*/
199

function Rf()
200

{
201

document.getElementById("MainContent").innerHTML="";
202

}
203

/*主内容显示区域清空函数结束*/
204

205

/*获得最后消息id函数*/
206

function setLast(name)
207

{
208

//将GetLastID方法改成GetLastWordsID,因为进系统后根据最大的id取自己的发言数据
209

ChatFrame.GetLastWordsID(name,_setLastCallBack);
210

}
211

//回调函数
212

function _setLastCallBack(res)
213

{
214

var mid = res.value;
215

document.getElementById("lastID").value=mid;
216

}
217

/*回调函数结束*/
218

219

var buttonHitFlag=0;
220

function exitSys(Flag)
221

{
222

if(buttonHitFlag==0)//说明非正常关闭
223

{
224

alert('谢谢您的光临,希望有机会合作,再见!');
225

exitPersonFlag();
226

}
227

　else//说明是点按纽关闭
228

　 {
229

　　
230

　 }
231

}
232

/*获得最后消息id函数结束*/
233

234

/*退出服务系统函数*/
235

function exitSysBut()
236

{
237

buttonHitFlag=1;
238

if(window.confirm('您真的要退出本服务系统吗？'))
239

{
240

alert('谢谢您的光临,希望有机会合作,再见!');
241

exitPersonFlag();
242

window.close();
243

}
244

else
245

{
246

buttonHitFlag=0;
247

}
248

}
249

function exitPersonFlag()
250

{
251

var UID=document.getElementById("UserID").value;
252

var MaxID=document.getElementById("lastID").value;
253

ChatFrame.LeftRoom(UID,MaxID);
254

}
255

/*退出服务系统函数结束*/
256

257

/*选中发言对象样式控制函数*/
258

var actived="-1";
259

function SetSpTo(_ID,_Name)
260

{
261

var obj=window.event.srcElement;
262

while(obj.nowP==undefined)
263

{
264

obj=obj.parentNode;
265

}
266

//加入状态功能提醒
267

var nowstate=obj.children[2].innerText;
268

switch(nowstate)
269

{
270

case "[状态:离线]":{document.getElementById("nowMes").innerText=" 当前离线,将在上线后会给您回复!";}
271

break;
272

case "[状态:在线]":{document.getElementById("nowMes").innerText=" 当前在线,请输入您的问题!";}
273

break;
274

case "[状态:忙碌]":{document.getElementById("nowMes").innerText=" 当前忙碌中,稍后给您答复!";}
275

break;
276

}
277

//提醒over
278

alert(actived);
279

if(actived != obj.id)
280

{
281

obj.style.backgroundColor="#cee9fe";
282

if(actived!="-1")
283

{
284

document.getElementById(actived).style.backgroundColor="";
285

}
286

actived=obj.id;
287

}
288

289

document.getElementById("SpTo").value=_ID;
290

document.getElementById("SpToName").value=_Name;
291

document.getElementById("lab_NowSpTo").innerText="●客服人员:"+_Name;
292

}
293

/*选中发言对象样式控制函数结束*/
294

295

/*选中发言对象参数设置函数*/
296

function SetSpToo(_ID,_Name)
297

{
298

299

document.getElementById("SpTo").value=_ID;
300

document.getElementById("SpToName").value=_Name;
301

document.getElementById("lab_NowSpTo").innerText="●客服人员:"+_Name;
302

}
303

/*选中发言对象参数设置函数结束*/
304

305

/*热键控制以及onload加载函数*/
306

/*避免出现重复提交的现象,屏蔽此热键设置
307

function ConviKey(event)
308

{
309

if((event.ctrlKey && event.keyCode == 13)||(event.altKey && event.keyCode == 83))
310

{
311

document.getElementById("sendMes").click();
312

}
313

}
314

window.document.onkeydown= function ConviKey()
315

{
316

if((event.ctrlKey && event.keyCode == 13)||(event.altKey && event.keyCode == 83))
317

{
318

document.getElementById("sendMes").click();
319

}
320

else if(event.keyCode == 13)
321

{
322

document.getElementById("iframeSpeak").contentWindow.document.innerHTML+="<br>";
323

}
324

}
325

*/
326

window.onload = function ()
327

{
328

getSerWords('0');//处理消息
329

}
330

/*热键控制以及onload加载函数结束*/
331

332

/*按钮样式控制函数*/
333

function showbt(obj)
334

{
335

obj.className="btn2";
336

}
337

function hidbt(obj)
338

{
339

obj.className="btn1";
340

}
341

/*按钮样式控制函数结束*/
342

343

/*表情样式及插入控制函数*/
344

function showFace()
345

{
346

document.getElementById("div_Face").style.display="block";
347

}
348

function insertFace()
349

{
350

document.getElementById("iframeSpeak").contentWindow.document.body.innerHTML+="<img src="+event.srcElement.src+">";
351

document.getElementById("div_Face").style.display="none";
352

}
353

function showCs(obj)
354

{
355

obj.className="dtOver";
356

}
357

function hidCs(obj)
358

{
359

obj.className="";
360

}
361

/*表情样式及插入控制函数结束*/
362

363

/*传送文件控制函数*/
364

function showUpload()
365

{
366

var obj=document.getElementById("div_Upload");
367

obj.style.display="block";
368

obj.style.top=event.clientY+10;
369

obj.style.left=event.clientY+10;
370

}
371

/*传送文件控制函数结束*/
372

373

/*历史记录查看函数*/
374

function showHis()
375

{
376

document.getElementById("hisChatRecord").src="ChatHistory.aspx";
377

document.getElementById("div_HisRec").style.display="block";
378

document.getElementById("btn_Back").disabled=false;
379

document.getElementById("btn_Send").disabled=true;
380

document.getElementById("btn_Clear").disabled=true;
381

}
382

function hidloading()
383

{
384

document.getElementById("div_Loading").style.display="none";
385

}
386

function hidhisf()
387

{
388

window.document.getElementById("div_HisRec").style.display="none";
389

document.getElementById("btn_Back").disabled=true;
390

document.getElementById("btn_Send").disabled=false;
391

document.getElementById("btn_Clear").disabled=false;
392

}
393

/*历史记录查看函数结束*/
394

395

/*时间格式化函数*/
396

function TimeFormat(_value)
397

{
398

var str=_value;
399

if(str.toString().length==1)
400

{
401

str="0"+str;
402

}
403

return str;
404

}
405

/*时间格式化函数结束*/
406

</script>

刷新页面返回顶部

SuperSun

导航

公告

基于B/S的在线交流系统的开发日记(2) 版本一