let
otext=document.
getElementsByClassName
(
"textInput"
)
; //找到两个输入文本框
let
contBar=document.
getElementsByClassName
(
"contentBar"
)
; //找到两个输出文本框
let
oclick=document.
getElementsByClassName
(
"buttonInput"
)
; //找到两个发送按钮
for
(
let
i=
0
;
i<oclick.length
;
i++){ //遍历两个按钮,并输出时间和对话文字 oclick[i].
index
=i
; //传参
oclick[i].
addEventListener
(
"click"
,
function
() { //给两个按钮赋点击事件
if
(otext[
this
.
index
].
value
!=
""
){ //判断对于的文本框是不是为空,不为空进入判断
let
myDate=
new
Date()
;
let
year=myDate.
getFullYear
()
;
let
month=myDate.
getMonth
()
;
let
date=myDate.
getDate
()
;
let
h=myDate.
getHours
()
;
let
m=myDate.
getMinutes
()
;
let
s=myDate.
getSeconds
()
; //以上创建时间对象并赋值
let
p1=document.
createElement
(
"p"
)
;
let
p2=document.
createElement
(
"p"
)
;
if
(h<
10
){h=
"0"
+h}
if
(m<
10
){m=
"0"
+m}
if
(s<
10
){s=
"0"
+s} //以上判断是否为个位数,是则在前加0 p1.classList.
add
(
"p_css1"
)
;
p1.innerText=year+
"年"
+month+
"月"
+date+
"日 "
+h+
":"
+m+
":"
+s
;
if
(h>=
12
){ p1.innerText+=
"pm"
;
}
else
{ p1.innerText+=
"am"
;
} contBar[
0
].
appendChild
(p1)
;
let
cp1=p1.
cloneNode
(
true
)
;
contBar[
1
].
appendChild
(cp1)
; //以上将时间变成符合条件的字符串,并创建两个对象赋值,打印到不同的输出文本框
p2.innerText=otext[
this
.
index
].
value
;
p2.style.margin=
"10px"
;
p2.style.width=
"200px"
;
let
cp2=p2.
cloneNode
(
true
)
;
p2.style.textAlign=
"left"
;
cp2.style.textAlign=
"right"
;
p2.style.cssFloat=
"left"
;
cp2.style.cssFloat=
"right"
; //以上为输入文字的左右样式设置
if
(
this
.
index
==
0
){ contBar[
0
].
appendChild
(cp2)
;
contBar[
1
].
appendChild
(p2)
;
otext[
0
].
value
=
""
;
}
else
{ contBar[
0
].
appendChild
(p2)
;
contBar[
1
].
appendChild
(cp2)
;
otext[
1
].
value
=
""
;
} //以上为整理好的数据打印的位置 } })}document.onkeydown=
function
(e){ //判断回车是否被按下,并通过开关来实现不同的效果
if
(!e){ e=window.event
;
}
if
((e.keyCode||e.which)==
13
){
if
(sucs==
true
){ oclick[
0
].
click
()
;
}
else if
(sucs==
false
){ oclick[
1
].
click
()
;
} }}
;
otext[
0
].
addEventListener
(
"focus"
,
function
() { //第一个输入文本框被选中时,改变开关 sucs=
true
;
})
;
otext[
1
].
addEventListener
(
"focus"
,
function
() { //第二个输入文本框被选中时,改变开关 sucs=
false
;
})
;
聊天框
猜你喜欢
转载自blog.csdn.net/lh95lbw/article/details/80889353
今日推荐
周排行