![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
总结：写代码时一定要细心，标点符号和括号千万不能写成中文的，思路要清晰，声明的变量是什么自己心里要有谱，不能懵逼
收获：1.parseFloat()是把字符串转成数字；
2.通过名字获取操作数：document.getElementsByName()[0]
通过标签名获取：document.getElementsTagByName()[0]
通过ID获取：document.getElementByID()
3.给按钮添加点击事件：button.onclick=function(){
}
下面是相册效果图：
相册代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>游戏角色相册</title>
<style type="text/css">
/*1.先给整个大的div设置宽高以及其他属性*/
.box{
width: 500px;
height: 700px;
/*设置居中*/
margin: auto;
/*设置背景颜色*/
background-color: #B5B5B3;
/*设置文本居中*/
text-align: center;
}
h1{
padding: 20px;
}
ul{
/*去掉外边距和内边距*/
margin: 0;
padding: 0;
margin-top: -20px;
}
li{
list-style-type: none;
float: left;
margin-left:20px;
}
a{
display: block;
width: 100px;
height: 30px;
/*设置行高，让文本垂直居中*/
line-height: 30px;
background-color: #89CEEB;
color: white;
text-decoration:none;
}
a:hover{
background-color: orange;
/*鼠标移动上去变成手型*/
cursor: pointer;
}
.img img{
width: 450px;
height: 500px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box">
<h1>DNF游戏角色相册</h1>
<ul>
<li><a href="image/sqs.jpg" title="以枪械作为主要武器的战士" onclick="show(this); return false">神枪手</a></li>
<li><a href="image/gjs.jpg" title="以剑作为主要武器的战士" onclick="show(this);return false">鬼剑士</a></li>
<li><a href="image/mfs.jpg" title="以辊作为主要武器的战士" onclick="show(this);return false">魔法师</a></li>
<li><a href="image/ck.jpg" title="以刺刀作为主要武器的战士" onclick="show(this);return false">刺客</a></li>
</ul>
<div class="img"><img src="image/demo.jpg" id="img"></div>
<p id="info"></p>
</div>
<script type="text/javascript">
function show(pic){
// 1.获得图片地址和title属性
var picUrl=pic.href
var picTitle=pic.title
var name=pic.innerHTML
// 2.获得要显示图片的位置和文字位置
var img=document.getElementById('img')
var p=document.getElementById('info')
// 3.将两者替换
img.src=picUrl
p.innerHTML='<span style="color:red">'+name+':'+picTitle+'</span>'
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
简单计算器效果图如下：
简单计算器代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style type="text/css">
.box{
width: 500px;
height: 200px;
/*设置居中*/
margin:auto;
/*设置背景颜色*/
background-color: #B5B5B3;
/*设置文本居中*/
text-align: center;
/*设置圆角*/
border-radius: 15px;
}
td input{
width: 100px;
height: 30px;
}
td select{
width: 100px;
height: 30px;
}
td button{
width: 105px;
height: 35px;
background-color: #89CEEB;
border:0;
color: white;
}
td button:hover{
background-color: orange;
/*鼠标移动上去变成手*/
cursor: pointer;
}
td{
padding: 5px 10px;
}
h1{
padding-top: 20px;
}
</style>
</head>
<body>
<div class="box">
<h1>简易计算器</h1>
<table>
<tr>
<td><input type="text" name="opt1" placeholder="操作数1" value=""></td>
<td>
<select name="option">
<option value="null">请输入运算符</option>
<option value="add">+</option>
<option value="sub">-</option>
<option value="mul">*</option>
<option value="div">/</option>
</select>
</td>
<td><input type="text" name="opt2" placeholder="操作数2" value=""></td>
<td><button onclick="">计算</button></td>
</tr>
<tr>
<td colspan="2" align="right"><h2>结果:</h2></td>
<td colspan="2" align="left"><h2 id="res"></h2></td>
</tr>
</table>
</div>
<script type="text/javascript">
// 1.获得操作数，按钮和结果运算符
var opt1=document.getElementsByName('opt1')[0]
var opt2=document.getElementsByName('opt2')[0]
// 获得运算符
var opt=document.getElementsByName('option')[0]
// 获得计算按钮
var button=document.getElementsByTagName('button')[0]
var p=document.getElementById('res')
// 2.给按钮添加点击事件
button.onclick=function(){
// 判断数字是否为空和是否为非数字
if (opt1.value.length==0) {
alert('第一个操作数不能为空')
opt1.focus()
return false
}else if(isNaN(opt1.value)){
alert('第一个操作数必须为数字')
opt1.focus()
return false
}else if (opt2.value.length==0) {
alert('第二个操作数不能为空')
opt1.focus()
return false
}else if(isNaN(opt2.value)){
alert('第一个操作数必须为数字')
opt2.focus()
return false
}else{
var data1=parseFloat(opt1.value)
var data2=parseFloat(opt2.value)
}
var option=opt.value
// 声明一个结果变量
var temp=0
// 声明一个运算符变量
var flag=''
// 用循环语句判断操作符号
switch(option){
case'null':
alert('请选择操作符')
opt.focus()
return false
case'add':
flag='+'
temp=data1+data2
break
case'sub':
flag='-'
temp=data1-data2
break
case'mul':
flag='*'
temp=data1*data2
break
case'div':
flag='/'
if (data2==0) {
alert('除数不能为0')
opt2.focus()
return false
}else{
temp=data1/data2
}
break
}
var str = '<span style="color:red">'
str += data1+' '+flag+' '+data2+ ' = ' +temp
str += '</span>'
p.innerHTML= str
// var str = '<span style="color:coral">'
// str += data1+' '+flag+' '+data2 + ' = ' + temp
// str += '</span>'
// p.innerHTML = str
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手写代码如下（一定要多写代码，写多了就能明白其中的一些道理）：
