1. 了解常识
前端三大块:
(1)HTML: 页面结构
(2)CSS: 页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
(3)JavaScript:介绍
JavaScript 是运行在浏览器端的脚步语言
注意点
python与js都属于解释型语言
主要作用
JavaScript 主要解决的是前端与用户交互的问题，包括使用交互与数据交互
页面行为：部分动画效果、页面与用户的交互、页面功能
2. HTML和CSS部分前端猿类会提前写好,后端猿类只需要负责JS部分的代码即可,下面将通过一个简单的例子进行说明:
注意点:要求显示如图所示的动画效果.
第一步:前端准备号的HTML代码:
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0">
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge">
<
title>Document</
title>
<
style
type=
"text/css">
.talk_con{
width:
600
px;
height:
500
px;
border:
1
px
solid
#666;
margin:
50
px
auto
0;
background:
#f9f9f9;
}
.talk_show{
width:
580
px;
height:
420
px;
border:
1
px
solid
#666;
background:
#fff;
margin:
10
px
auto
0;
overflow:
auto;
}
.talk_input{
width:
580
px;
margin:
10
px
auto
0;
}
.whotalk{
width:
80
px;
height:
30
px;
float:
left;
outline:
none;
}
.talk_word{
width:
420
px;
height:
26
px;
padding:
0
px;
float:
left;
margin-left:
10
px;
outline:
none;
text-indent:
10
px;
}
.talk_sub{
width:
56
px;
height:
30
px;
float:
left;
margin-left:
10
px;
}
.atalk{
margin:
10
px;
}
.atalk
span{
display:
inline-block;
background:
#0181cc;
border-radius:
10
px;
color:
#fff;
padding:
5
px
10
px;
}
.btalk{
margin:
10
px;
text-align:
right;
}
.btalk
span{
display:
inline-block;
background:
#ef8201;
border-radius:
10
px;
color:
#fff;
padding:
5
px
10
px;
}
</
style>
<
script
type=
"text/javascript">
// 写出对应功能代码
</
script>
</
head>
<
body>
<
div
class=
"talk_con">
<
div
class=
"talk_show"
id=
"words">
<
div
class=
"atalk"><
span>A说：吃饭了吗？</
span></
div>
<
div
class=
"btalk"><
span>B说：还没呢，你呢？</
span></
div>
</
div>
<
div
class=
"talk_input">
<
select
class=
"whotalk"
id=
"who">
<
option
value=
"0">A说：</
option>
<
option
value=
"1">B说：</
option>
</
select>
<
input
type=
"text"
class=
"talk_word"
id=
"talkwords">
<
input
type=
"button"
value=
"发送"
class=
"talk_sub"
id=
"talksub">
</
div>
</
div>
</
body>
</
html>
第二步: 只需要在script部分写出js代码即可.
扫描二维码关注公众号，回复：
1741003 查看本文章
script代码:
<
script
type=
"text/javascript">
// 写出对应功能代码
window.
onload
=
function () {
var w1
= document.
getElementById(
'words')
/*获取到说话那个容器的标签*/
var w2
= document.
getElementById(
'who')
/*获取到选择谁说话那个标签*/
var t1
= document.
getElementById(
'talkwords')
/*获取到发送内容的那个标签*/
var t2
= document.
getElementById(
'talksub')
/*获取到发送按钮的标签*/
/*通过发送按钮的单机效果实现*/
t2.
onclick
=
function () {
var ww2
= w2.value
var tt1
= t1.value
var str
=
''
if (tt1
==
'') {
alert(
'输入的内容不能为空,请重新输入:')
}
if (ww2
==
0) {
str
=
'<div class="atalk"><span>A说：'
+ tt1
+
'</span></div>'
}
else {
str
=
'<div class="btalk"><span>B说：'
+ tt1
+
'</span></div>'
}
w1.innerHTML
= w1.innerHTML
+ str;
}
}
</
script>
分析点:
注意点
1. 获取A,B输入框; A,B选项; 输入内容框; 发送按钮的标签
2. 使用onclick触发单机效果,单机的时候要得到words和talkwords的内容
3. 判断talkwords的内容是否为空
1>如果为空.则提示重新输入
2>如果部位空,则进行字符串的拼接
4. 使用innerHML对文本内容进行替换
5. 运行结果
