后端的猿类只需要通过js部分实现网页的效果精髓
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:600px;
height:500px;
border:1px solid #666;
margin:50px auto 0;
background:#f9f9f9;
}
.talk_show{
width:580px;
height:420px;
border:1px solid #666;
background:#fff;
margin:10px auto 0;
overflow:auto;
}
.talk_input{
width:580px;
margin:10px auto 0;
}
.whotalk{
width:80px;
height:30px;
float:left;
outline:none;
}
.talk_word{
width:420px;
height:26px;
padding:0px;
float:left;
margin-left:10px;
outline:none;
text-indent:10px;
}
.talk_sub{
width:56px;
height:30px;
float:left;
margin-left:10px;
}
.atalk{
margin:10px;
}
.atalk span{
display:inline-block;
background:#0181cc;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
.btalk{
margin:10px;
text-align:right;
}
.btalk span{
display:inline-block;
background:#ef8201;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
</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代码即可.
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. 运行结果