2022版Java web跟学尚硅谷
B/S 软件的结构
HTML的基础标签
基础标签
<html>
<head>
<title>这是我的第一个网页</title>
<meta charset = "UTF-8">
</head>
<body>
hello world!<br/>
你好,html!
<p>这里是一个段落</p>
<p>这里是另一个段落</p>
<img src = "imgs/girl.jpg" width="57" high = "63" title = "这里是一张图片" alt = "假装这里有图片"></img>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<ol style="margin-left: 20px;" type = "i" start = "3">
<li>扫地僧</li>
<li>乔峰</li>
<li>慕容博</li>
<li>虚竹</li>
<li>阿紫</li>
</ol>
<ul type = "square">
<li>牛头</li>
<li>马面</li>
<li>金角</li>
<li>银角</li>
</ul>
疯狂<b>星期四</b>是<i>昨天</i>但是今天有<u>麦当劳</u><br/>
<b><i><u>我喜欢德克士</u></i></b><br/>
水分子的化学式: H<sub>2</sub>O<br/>
氧气的化学式:O<sub>2</sub><br/>
2<sup>2</sup> = 4<br/>
5<10<br/>
10>5<br/>
10≥10<br/>
注册商标®<br/>
版权符号©<br/>
<span >高圆圆和赵又廷</span><br/>
<a href = "https://www.baidu.com/" target = "_blank">百度一下</a><br/>
<div id = "div1">div1</div>
<div id = "div2">div2</div>
<div id = "div3">div3</div>
<style>
div{
width:200px;
height:200px;
position:absolute;
}
#div1{
background-color:#AF8;
}
#div2{
background-color:#BCA;
left:100px;
top:1100px;
}
#div3{
background-color:#FFB;
left:200px;
top:1200px;
}
</style>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<table border = "1" width = "600" cellspacing = "0" cellpadding = "4">
<tr align = "center">
<th>姓名</th>
<th>球队</th>
<th>身高</th>
<th>得分</th>
<th>篮板</th>
</tr>
<tr align = "center">
<td>库里</td>
<!--这里是跨行显示 -->
<td rowspan = "2">勇士</td>
<td>1.98</td>
<td>30.1</td>
<td>4.5</td>
</tr>
<tr align = "center">
<td>汤普森</td>
<td>2.01</td>
<td>18.7</td>
<td>6.7</td>
</tr>
<tr align = "center">
<td>詹姆斯</td>
<td>湖人</td>
<td>2.10</td>
<td>28.5</td>
<td>7.7</td>
</tr>
</table>
<br/>
<table border = "1" width = "700" cellspacing = "0" cellpadding = "4">
<tr align = "center">
<th>球队</th>
<th>半区</th>
<th>所在地</th>
<th>排名</th>
<th>当家球星</th>
<th>操作</th>
</tr>
<tr align = "center">
<td>勇士</td>
<td>西部</td>
<td>金州</td>
<td>8</td>
<td>库里</td>
<td><img src = "imgs/del.jpeg" width = "25" height = "25"></img></td>
</tr>
<tr align = "center">
<td>湖人</td>
<td>西部</td>
<td>洛杉矶</td>
<td>13</td>
<td>詹姆斯</td>
<td><img src = "imgs/del.jpeg" width = "25" height = "25"></img></td>
</tr>
<tr align = "center">
<td>总计</td>
<td colspan = "5">2</td>
</tr>
</table>
<br/>
<br/>
<br/>
<br/>
<!--发送方式 method 有 post和get -->
<form style = "border: 1px solid red;" action = "demo04.html" method = "post">
昵称: <input type = "text" name = "name" value = "请输入你的昵称"/><br/>
密码: <input type = "password" name = "pwd"/><br/>
<!-- 这里name 一样的话只能单选 -->
性别: <input type = "radio" name = "gender" value = "male" checked = "checked"/>男
<input type = "radio" name = "gender" value = "female"/>女<br/>
<!-- 这里name 不一样的话可以多选 当checked的属性名和属性值相等时，可以不写属性值 -->
职业: <input type = "radio" name = "job" value = "mainjob" checked />主职
<input type = "radio" name = "job2" value = "subjob"/>兼职<br/>
爱好: <input type = "checkbox" name = "hobby" value = "basketball"/>篮球
<input type = "checkbox" name = "hobby" value = "sing"/>唱
<input type = "checkbox" name = "hobby" value = "jump" checked = "checked"/>跳<br/>
星座: <select name = "star">
<option value = "1">白羊座</option>
<option value = "2">水瓶座</option>
<option value = "3">天蝎座</option>
<option value = "4">摩羯座</option>
<option value = "5">巨蟹座</option>
<option value = "6">狮子座</option>
<option value = "7">双子座</option>
<option value = "8" selected>处女座</option>
</select><br/>
备注: <textarea name = "remark" rows = "4" cols = "50"></textarea><br/>
<input type = "submit" name = "register" value = " 注 册 " >
<!-- 恢复到页面的默认状态-->
<input type = "reset" name = "default" value = " 重置 " >
<input type = "button" name = "btn1" value = " 普通按钮 " >
</form>
</body>
</html>
<!--
1.html是解释型的语言，不是编译型语言，浏览器是容错的
2.html页面中由一对标签组成:
<html> 开始标签
</html> 结束标签
3.标题 <title>
4.<meta charset = "UTF-8"> 可以设置编码格式
5.<br/>表示换行,br标签是一个单标签，开始标签和结束标签是同一个，斜杠放在单词的后面
6.<p></p>段落标签
7.<img>图片标签 src图片的路径 title鼠标悬停提示标签 alt 图片加载失败的时候，显示文字
8.路径:(1)相对路径 (2)绝对路径
9.标题:<h1>~<h6>
10.列表标签
<o1>有序列表 start 表示从哪儿开始, type表示格式可以写(A、I、i、1默认)
<ul>无序列表 type类型可以写(square方块 disc圆饼实心默认 circle圆圈空心)
11.<b>加粗 <u>下划线 <i>斜体
12.<sub>下方缩小 <sup>上方缩小
13.html中的实体:
<小于
>大于
≥大于等于
®注册商标
©版权符号
通过百度搜索"html实体"可以查看更多的API
14.<span>局部做特殊处理
15.超链接
<a> href链接的地址
target中设置:
_blank说明新开标签页打开
_self说明在当前窗口打开(默认)
_parent在父窗口打开
_top在顶层窗口打开
16.层<div>
17.表格 <table>
<tr>表示一行 属性有align (center,left,right)
<td>表示列
<th>表头列用这个
table的属性，虽然淘汰了但是最好了解一下:
border = "1" 表格边框的粗细
width = "600" 表格宽度
cellspacing = "0" 单元格间隙
cellpadding = "4"单元格填充
rowspan 行合并
colspan 列合并
18.表单 <form>
<input type = "text">表示文本框，其中必须要写name属性,否则数据不会发送至服务器
<input type = "password">表示密码框
<input type = "radio">表示选择按钮,name值保持一致是单选，可以通过checked设置默认值
<input type = "checkbox">表示复选框,name值建议保持一致，可以通过checked设置默认值
<select>表示下拉列表,每一个选项是option，其中value是发送给服务器的值,selected表示默认选择的值
textarea 表示多行文本框，或者文本域,它的值就是标签开始到结束位置之间的内容，所以轻易别换行
<input type = "submit">提交按钮
<input type = "reset">重置按钮:恢复到页面的默认状态
<input type = "button">普通按钮
-->
页面展示：
页面划分标签
frameset
<html>
<head>
<title>frameset练习</title>
</head>
<frameset rows = "20%,*" frameborder = "yes">
<frame src = "frames/top.html" ></frame>
<frameset cols = "15%,*">
<frame src = "frames/left.html"></frame>
<frameset rows = "80%,*">
<frame src = "frames/main.html"></frame>
<frame src = "frames/bottom.html"></frame>
</frameset>
<frameset cols = "85%,*">
<frame src = "frames/r.html"></frame>
</frameset>
</frameset>
</frameset>
</html>
<!--
frameset页面框架，这个标签已经淘汰，了解无需掌握
frame表示框架中的具体页面
-->
页面展示
iframe
<html>
<head>
<meta charset = "UTF-8">
<title>iframe练习</title>
</head>
<body>
这里是iframe页面<br/>
<iframe src = "frames/top.html"></iframe>
</body>
</html>
<!--
iframe嵌入子页面的部分
-->
页面展示
总结
总结
1.HTML是解释型的文本标记语言，不区分大小写
2.整理一下标签
2.1 html,head,title,meta,body,br,ol,ul,h1-h6,a,img,div,span,p
2.2 空格
2.3 table tr th td
2.4 form(action,method) imput type = “text,password,radio,checkbox,submit,reset,button” select textarea
CSS
基本样式介绍
<html>
<head>
<meta charset = "UTF-8">
<style type = "text/css">
/* 被style标签包裹的范围是css环境,可以写css代码 */
p{
color:red;
}
/* 类样式 */
.f20{
font-size:20px;
}
</style>
<link rel = "stylesheet" href= "style/demo01.css">
</head>
<body>
<!--
<p><font color = "red">这里是段落一</font></p>
<p><font color = "red">这里是段落二</font></p>
-->
<p>这里是段落一</font></p>
<p>这里是段落二</font></p>
<p class = "f20">这里是段落三</font></p>
/* id在整个html文档中尽量唯一 */
<p id = "p4">这里是段落四</font></p>
<div>
<!-- 嵌入式样式表 -->
<p><span style = "font-size:60px;font-weight:bolder;color:yellow;">Hello</span></p>
<span class = "f32">World</span>
<p class = "f32">!!!</p>
</div>
</body>
</html>
<!--
1.为什么需要css
2.css最基本的分类:标签样式表、类样式表、ID样式表
3.css从位置上的分类:嵌入式样式表、内部样式表、外部样式表
-->
超链接：
/* id样式 */
#p4{
background-color:pink;
font-size:24px;
font-weight:bolder;
font-family:"华文彩云";
}
div p{
color:blue;
}
div .f32{
font-size:32px;
font-family:"黑体";
}
样式展示
盒子模型
<html>
<head>
<meta charset = "UTF-8">
<style type = "text/css">
#div1{
width:400px;
height:400px;
background-color:greenyellow;
/* 1.border边框样式 */
border-width:1px; /*边框粗细 */
border-style:solid; /*边框样式:solid实线 dotted点状式 */
border-color:blue; /*边框颜色 */
/*border:4px double blue;*/
/*border-top: 4px dotted blue;*/
}
#div2{
width:150px;
height:150px;
background-color:gold;
/* 2.border边框距离内嵌 */
margin-top:100px;
margin-left:100px;
/*一个值 四个方向统一*/
/*两个值 上下 左右*/
/*三个值 上 左右 下*/
/*四个值 上 右 下 左*/
/*margin:100px 100px 150px 50px;*/
/* padding 填充*/
padding-top:50px;
padding-left:50px;
}
#div3{
width:100px;
height:100px;
background-color:aquamarine;
/*margin-top:50px;*/
/*margin-left:50px;*/
}
#div4{
width:200px;
height:200px;
background-color:greenyellow;
margin-left:100px;
}
/* 8像素问题 */
body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="div1">
<div id = "div2">
<div id = "div3"> </div>
</div>
</div>
<div id = "div4"></div>
</body>
</html>
<!--
盒子模型
IE浏览器中:实际尺寸 = width
chrome浏览器:实际尺寸 = width + 左右border的width + padding
盒子模型
1.border 边框样式
2.margin 间距
3.padding 填充
-->
样式展示
绝对定位与相对定位
<html>
<head>
<meta charset = "UTF-8">
<style type = "text/css">
#div1{
width:200px;
height:50px;
background-color:greenyellow;
/* 绝对定位 */
position:absolute;
left:100px;
top:100px;
}
#div2{
width:200px;
height:50px;
background-color:pink;
/* 相对定位 */
position:relative;
float:left;
margin-left:20px;
}
#div3{
height:50px;
background-color:purple;
}
#div4{
height:200px;
height:50px;
background-color:aqua;
float:left;
}
#div5{
height:200px;
height:50px;
background-color:olivedrab;
float:left;
}
div{
position:relative;
}
/* 8像素问题 */
body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<!--<div id = "div1"> </div>
<div id = "div2"> </div>
-->
<div id = "div3">
<div id = "div4"> </div>
<div id = "div5"> </div>
</div>
</body>
</html>
<!--
position:absolute绝对定位，需要配合使用left right top
relative:相对定位,一般会和float，margin，padding一起使用
float
-->
样式展示：
页面布局
<html>
<head>
<meta charset = "UTF-8">
<style type = "text/css">
div{
position:relative;
}
#div_top{
background-color:orange;
height:20%;
}
#div_left{
background-color:greenyellow;
height:80%;
width:15%;
float:left;
}
#div_main{
background-color:whitesmoke;
height:70%;
float:left;
width:85%;
}
#div_bottom{
background-color:blue;
height:10%;
width:85%;
float:left;
}
#div_container{
height:100%;
width:80%;
border:1px solid blue;
margin-left:10%;
float:left;
}
body{
margin:0;
padding:0;
background-color:gray;
}
</style>
</head>
<body>
<div id = "div_container">
<div id = "div_top">div_top</div>
<div id = "div_left">div_left</div>
<div id = "div_main">div_main</div>
<div id = "div_bottom">div_bottom</div>
</div>
</body>
</html>
<!--
position:absolute绝对定位，需要配合使用left right top
relative:相对定位,一般会和float，margin，padding一起使用
float
-->
水果库存界面绘制
界面布局
<html>
<head>
<meta charset = "UTF-8">
<link rel = "stylesheet" href = "style/fruit.css"></link>
</head>
<body>
<div id = "div_container">
<div id ="div_fruit_list">
<table id = "table_fruit">
<tr>
<th class = "w20">名称</th>
<th class = "w20">单价</th>
<th class = "w20">数量</th>
<th class = "w20">小计</th>
<th class = "w20">操作</th>
</tr>
<tr>
<td>苹果</td>
<td>5</td>
<td>20</td>
<td>100</td>
<td><img src = "imgs/del.jpeg" class = "delImg"> </img></td>
</tr>
<tr>
<td>西瓜</td>
<td>3</td>
<td>20</td>
<td>60</td>
<td><img src = "imgs/del.jpeg" class = "delImg"> </img></td>
</tr>
<tr>
<td>葡萄</td>
<td>4</td>
<td>25</td>
<td>100</td>
<td><img src = "imgs/del.jpeg" class = "delImg"> </img></td>
</tr>
<tr>
<td>香蕉</td>
<td>3</td>
<td>50</td>
<td>150</td>
<td><img src = "imgs/del.jpeg" class = "delImg"> </img></td>
</tr>
<tr>
<td>总计</td>
<td colspan = "4">999</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<!--
position:absolute绝对定位，需要配合使用left right top
relative:相对定位,一般会和float，margin，padding一起使用
float
-->
style文件
<style type = "text/css">
div{
position:relative;
float:left;
}
#div_container{
height:100%;
width:80%;
border:0px solid blue;
margin-left:10%;
background-color:honeydew;
float:left;
border-radius:8px;
}
#table_fruit{
width:60%;
/* 边框合并 */
border-collapse:collapse;
line-height:28px;
margin-top:120px;
margin-left:20%;
}
#table_fruit tr,#table_fruit td,#table_fruit th{
border:1px solid gray;
/* 边框合并 */
border-collapse:collapse;
text-align:center;
font-size:16px;
font-family:"黑体";
color:"black";
}
/* 表头字体大一号 */
#table_fruit th{
font-size:20px;
}
/* 表格每一列占比设置 */
.w20{
width:20%;
}
/* 删除图标样式设置 */
.delImg{
width:24px;
height:24px;
margin-top:5px;
}
body{
margin:0;
padding:0;
background-color:gray;
}
</style>
界面样式
javascript
数据类型
<html>
<head></head>
<meta charset = "UTF-8">
<script language = "javascript">
//String str = "hello wordl";
var str = "hello world";
/*
alert(typeof str);
str = 999;
alert(typeof str);
*/
/*
var person = new Object();
person.pid = "p001";
person.pname = "达摩";
alert(person.pid + " "+ person.pname);
*/
function hello(num1, num2, name){
if(num1 > num2){
return "hello" + name;
}else{
alert("Hello");
}
}
hello(2,1,"大哥");
</script>
<body>
</body>
</html>
<!--
JavaScript:客户端的一个脚本语言
js是一门弱类型的语言 变量数据类型由后面赋值的类型决定
-->
续写水果库存
<html>
<head>
<meta charset = "UTF-8">
<link rel = "stylesheet" href = "style/fruit.css"></link>
<script type = "text/javaScript" src = "js/demo01.js"></script>
</head>
<body>
<div id = "div_container">
<div id ="div_fruit_list">
<table id = "table_fruit">
<tr>
<th class = "w20">名称</th>
<th class = "w20">单价</th>
<th class = "w20">数量</th>
<th class = "w20">小计</th>
<th class = "w20">操作</th>
</tr>
<tr onmousemove = "showBGColor()" onmouseout = "clearBGColor()">
<td>苹果</td>
<td onmouseover = "showHand()">5</td>
<td>20</td>
<td>100</td>
<td><img src = "imgs/del.jpeg" class = "delImg"> </img></td>
</tr>
<tr onmousemove = "showBGColor()" onmouseout = "clearBGColor()">
<td>西瓜</td>
<td onmouseover = "showHand()">3</td>
<td>20</td>
<td>60</td>
<td><img src = "imgs/del.jpeg" class = "delImg"> </img></td>
</tr>
<tr onmousemove = "showBGColor()" onmouseout = "clearBGColor()">
<td>葡萄</td>
<td onmouseover = "showHand()">4</td>
<td>25</td>
<td>100</td>
<td><img src = "imgs/del.jpeg" class = "delImg"> </img></td>
</tr>
<tr onmousemove = "showBGColor()" onmouseout = "clearBGColor()">
<td>香蕉</td>
<td onmouseover = "showHand()">3</td>
<td>50</td>
<td>150</td>
<td><img src = "imgs/del.jpeg" class = "delImg"> </img></td>
</tr>
<tr>
<td>总计</td>
<td colspan = "4">999</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<!--
position:absolute绝对定位，需要配合使用left right top
relative:相对定位,一般会和float，margin，padding一起使用
float
-->
js事件
// 显示鼠标悬浮时，显示背景颜色
function showBGColor(){
// event : 当前发生的事件
// event.srcElement事件源
//alert(event.srcElement);
//alert(event.srcElement.tagName); -->TD
if(event && event.srcElement && event.srcElement.tagName == "TD"){
var td = event.srcElement;
// td.parentElement表示td的复元素TR
var tr = td.parentElement;
// 如果想要设置某节点的样式，需要加上.style
tr.style.backgroundColor = "navy";
// 表示获取tr中的每个单元格
var tds = tr.cells;
for(var i = 0; i < tds.length; i++){
tds[i].style.color = "yellow";
}
}
}
// 鼠标离开时，恢复原始样式
function clearBGColor(){
if(event && event.srcElement && event.srcElement.tagName == "TD"){
var td = event.srcElement;
var tr = td.parentElement;
tr.style.backgroundColor="transparent";
var tds = tr.cells;
for(var i = 0; i < tds.length; i++){
tds[i].style.color = "black";
}
}
}
// 当鼠标悬浮在单价单元格的时候，鼠标变成手势
function showHand(){
if(event && event.srcElement && event.srcElement.tagName == "TD"){
var td = event.srcElement;
td.style.cursor = "hand";
}
}
界面展示
水果库存添加事件[课后作业]
主界面
<html>
<head>
<meta charset = "UTF-8">
<link rel = "stylesheet" href = "style/fruitdemo03.css"></link>
<script type = "text/javaScript" src = "js/demo03.js"></script>
</head>
<body>
<div id = "div_container">
<div id ="div_fruit_list">
<table id = "table_fruit">
<tr>
<th class = "w20">名称</th>
<th class = "w20">单价</th>
<th class = "w20">数量</th>
<th class = "w20">小计</th>
<th class = "w20">操作</th>
</tr>
<tr>
<td>苹果</td>
<td>5</td>
<td>20</td>
<td>100</td>
<td><img src = "imgs/del.jpeg" class = "delImg"> </img></td>
</tr>
<tr>
<td>西瓜</td>
<td>3</td>
<td>20</td>
<td>60</td>
<td><img src = "imgs/del.jpeg" class = "delImg"> </img></td>
</tr>
<tr>
<td>葡萄</td>
<td>4</td>
<td>25</td>
<td>100</td>
<td><img src = "imgs/del.jpeg" class = "delImg"> </img></td>
</tr>
<tr>
<td>香蕉</td>
<td>3</td>
<td>50</td>
<td>150</td>
<td><img src = "imgs/del.jpeg" class = "delImg"> </img></td>
</tr>
<tr>
<td>总计</td>
<td colspan = "4">999</td>
</tr>
</table>
<!-- <hr/>是直线 -->
<!--<hr/>-->
<div id = "div_add_fruit">
<table id = "table_add_fruit">
<tr>
<td>名称</td>
<td><input type = "text" id = "fname"></input></td>
</tr>
<tr>
<td>单价</td>
<td><input type = "text" id = "fprice"></input></td>
</tr>
<tr>
<td>数量</td>
<td><input type = "text" id = "fcout"></input></td>
</tr>
<!--<tr>
<td>小计</td>
<td><input type = "text" id = "fxj"></input></td>
</tr>-->
<tr>
<th><input type = "button" id = "addBtn" value = "添加" class = "btn_add"></input></th>
<th><input type = "button" id = "resetBtn" value = "重置" class = "btn_reset"></input></th>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
<!--
position:absolute绝对定位，需要配合使用left right top
relative:相对定位,一般会和float，margin，padding一起使用
float
-->
事件
// window当前对象
window.onload=function(){
// alert("helloworld");
// 更新总价
updateZJ();
// 当页面加载完成，我们需要绑定各种事件
// 根据id获取table
var fruitTbl = document.getElementById("table_fruit");
// 获取表格中的所有的行
var rows = fruitTbl.rows;
for(var i = 1; i < rows.length - 1; i ++){
var tr = rows[i];
trBindEvent(tr);
}
// 调用鼠标单击事件,添加方法
$("addBtn").onclick = btnAdd;
// 调用鼠标单击事件,重置方法
$("resetBtn").onclick = btnReset;
}
function trBindEvent(tr){
// 1.绑定鼠标悬浮设置背景颜色事件
tr.onmouseover = showBGColor;
tr.onmouseout = clearBGColor;
// 获取tr这一行的所有单元格
var cells = tr.cells;
var priceTD = cells[1];
// 2.绑定鼠标悬浮在单元格变手势的事件
priceTD.onmouseover = showHand;
// 3.鼠标单击事件 更改价格
priceTD.onclick = editPrice;
// 7.绑定删除小图标的点击事件
var img = cells[4].firstChild;
if(img && img.tagName == "IMG"){
// 点击后删除当前行的水果信息
img.onclick = delFruit;
}
}
// 显示鼠标悬浮时，显示背景颜色
function showBGColor(){
// event : 当前发生的事件
// event.srcElement事件源
//alert(event.srcElement);
//alert(event.srcElement.tagName); -->TD
if(event && event.srcElement && event.srcElement.tagName == "TD"){
var td = event.srcElement;
// td.parentElement表示td的复元素TR
var tr = td.parentElement;
// 如果想要设置某节点的样式，需要加上.style
tr.style.backgroundColor = "navy";
// 表示获取tr中的每个单元格
var tds = tr.cells;
for(var i = 0; i < tds.length; i++){
tds[i].style.color = "yellow";
}
}
}
// 鼠标离开时，恢复原始样式
function clearBGColor(){
if(event && event.srcElement && event.srcElement.tagName == "TD"){
var td = event.srcElement;
var tr = td.parentElement;
tr.style.backgroundColor="transparent";
var tds = tr.cells;
for(var i = 0; i < tds.length; i++){
tds[i].style.color = "black";
}
}
}
// 当鼠标悬浮在单价单元格的时候，鼠标变成手势
function showHand(){
if(event && event.srcElement && event.srcElement.tagName == "TD"){
var td = event.srcElement;
td.style.cursor = "hand";
}
}
// 当鼠标单击单价的时候，更改单价
function editPrice(){
if(event && event.srcElement && event.srcElement.tagName == "TD"){
var priceTD = event.srcElement;
// 目的是判断当前priceTD有子节点，并且第一个子节点是文本节点，TextNode(文本节点) 3 ElementNode(元素节点)1
if(priceTD.firstChild && priceTD.firstChild.nodeType == "3"){
// 文本结点
// 表示设置或者获取当前节点的内部文本
var oldPrice = priceTD.innerText;
// innerHTML 表示设置当前节点内部的HTML
priceTD.innerHTML = "<input type = 'text' size = '4'/>";
var input = priceTD.firstChild;
if(input.tagName == "INPUT" ){
input.value = oldPrice;
// 选中输入框内部的文本
input.select();
// 4.绑定输入框失焦后，更新单价和总结
input.onblur = updatePrice;
// 8.绑定键盘按下的事件,此处需要保证按下的是数字
input.onkeydown = checkInput;
}
}
}
}
function updatePrice(){
if(event && event.srcElement && event.srcElement.tagName == "INPUT"){
var input = event.srcElement;
var newPrice = input.value;
// input结点的父结点是td
var priceTD = input.parentElement;
priceTD.innerText = newPrice;
//priceTD.parentElement是tr
// 5.更新当前行的小计
updateXj(priceTD.parentElement);
}
}
// 更新当前行的小计
function updateXj(tr){
if(tr && tr.cells){
var tds = tr.cells;
// 单价
var priceTD = tds[1].innerText;
// 数量
var numsTD = tds[2].innerText;
// innerText获取到的值是字符串类型，需要parseInt转换成数字类型
var xj = parseInt(priceTD) * parseInt(numsTD);
tds[3].innerText = xj;
//6.更新总计
updateZJ();
}
}
// 更新总计
function updateZJ(){
var fruitTable = document.getElementById("table_fruit");
var rows = fruitTable.rows;
var sum = 0;
for(var i = 1; i < rows.length - 1; i ++){
var tr = rows[i];
var xj = parseInt(tr.cells[3].innerText);
sum = sum + xj;
}
rows[rows.length - 1].cells[1].innerText = parseInt(sum);
// NAN not a number表示结果不是一个数字
}
// 删除当前所选行的库存
function delFruit(){
if(event && event.srcElement && event.srcElement.tagName == "IMG"){
// confirm表示对话框:确定/取消，点击确定返回true
if(confirm("是否要删除当前行的库存记录?")){
var img = event.srcElement;
var tr = img.parentElement.parentElement;
var fruitTable = document.getElementById("table_fruit");
fruitTable.deleteRow(tr.rowIndex);
updateZJ();
}
}
}
// 检验键盘按下的值的方法
function checkInput(){
var kc = event.keyCode;
console.log(kc);
// 数字(0 ~ 9) 对应ascii码 48~57
// backspace 对应ascii码值 8
// 回车 对应ascii码值 13
// 不符合的情况
if(!((kc >= 8 && kc <= 57) || kc == 8 || kc == 13)){
event.returnValue = false;
}
if (kc == 13){
event.srcElement.blur();
}
}
// 添加按钮
function btnAdd(){
var fruitaddTable = $("table_add_fruit");
var rows = fruitaddTable.rows;
var fname = $("fname").value;
if(fname == null || "" == fname){
alert("名称为空，请输入后添加");
return;
}
var fprice = $("fprice").value;
if(fprice == null || "" == fprice){
alert("单价为空，请输入后添加");
return;
}
var fcout = $("fcout").value;
if(fcout == null || "" == fcout){
alert("数量为空，请输入后添加");
return;
}
var table_fruit = $("table_fruit");
var tr = table_fruit.insertRow(rows.length + 1);
var fnameTD = tr.insertCell();
fnameTD.innerText = fname;
var fpriceTD = tr.insertCell();
fpriceTD.innerText = parseInt(fprice);
var fcoutTD = tr.insertCell();
fcoutTD.innerText = parseInt(fcout);
var xjTD = tr.insertCell();
xjTD.innerText = parseInt(fprice * fcout);
var delTD = tr.insertCell();
delTD.innerHTML = "<img src = 'imgs/del.jpeg' class = 'delImg'/>";
updateZJ();
trBindEvent(tr);
}
function $(id){
return document.getElementById(id);
}
// 鼠标单击后重置
function btnReset(){
$("fname").value = "";
$("fprice").value = "";
$("fcout").value = "";
}
样式
<style type = "text/css">
div{
position:relative;
float:left;
}
#div_container{
height:100%;
width:80%;
border:0px solid blue;
margin-left:10%;
background-color:honeydew;
float:left;
border-radius:8px;
}
#table_fruit{
width:60%;
/* 边框合并 */
border-collapse:collapse;
line-height:28px;
margin-top:120px;
margin-left:20%;
}
#table_fruit tr,#table_fruit td,#table_fruit th{
border:1px solid gray;
/* 边框合并 */
border-collapse:collapse;
text-align:center;
font-size:16px;
font-family:"黑体";
color:"black";
}
/* 表头字体大一号 */
#table_fruit th{
font-size:20px;
}
/* 表格每一列占比设置 */
.w20{
width:20%;
}
/* 删除图标样式设置 */
.delImg{
width:24px;
height:24px;
margin-top:5px;
}
body{
margin:0;
padding:0;
background-color:gray;
}
#table_add_fruit,#table_add_fruit td{
border:1px solid gray;
border-collapse:collapse;
text-align:center;
width:60%;
line-height:28px;
margin-top:30px;
margin-left:20%;
}
#table_add_fruit th{
text-align:center;
line-height:100px;
}
.btn_add{
width:60px;
}
.btn_reset{
width:60px;
}
</style>
界面展示
总结
1.CSS
(1)CSS的角色：页面显示的美观风格
(2)CSS的基本语法：标签样式：类样式：ID样式；组合样式；嵌入式样式表；内部样式表；外部样式表
(3)盒子模型 border margin padding
(4)定位和浮动 positon float div + css布局
2.JS
(1)JS是客户端(浏览器端)运行的脚本语言，语法风格和java比较类似
(2)JS是弱类型的语言 var 后面的数据类型是根据后面的值来确定的
(3)JS支持面向对象 new可以创建对象
(4)JS的函数 function hello(){}
(5)DOM技术：鼠标悬浮 onmouseover,event.srcElement,事件传递,parentElement,style.backgroundColor
鼠标离开 ommouseout
鼠标点击 onclick, td.innerText,td.innerHTML = “” td.firstChild.value = oldPrice
失去焦点 onblur, input.parentElement.innerText = newPrice
更新小计:input = event.srcElement,tr = input.parentElement; tr.cells;parseInt
更新总计:document.getElementById(“fruit_table”);fruitTable.rows
删除一行:img,img.parentElement.parentElement.rowIndex,table.deleteRow(rowIndex)
408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
