收藏
批改状态：合格
老师批语：
相册作业演示：http://111.231.88.20/front/html/0329/1.html
通过这个作业的练习，了解了JS变量声明的基本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水果图册</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 750px;
height: 600px;
margin: 50px auto;
padding-top: 20px;
overflow: hidden;
border: 1px solid #666;
border-radius: 10px;
text-align: center;
background-color: #ffffe0;
box-shadow: 3px 3px 3px #666;
}
.box ul{
width: 100px;
float: left;
margin: 90px 0 0 30px;
}
.box ul li{
width: 100px;
height: 45px;
list-style-type: none;
background-color: #87cefa;
margin: 30px auto;
border-radius: 5px;
}
.box ul li a{
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: #fff;
line-height: 45px;
}
.box ul li:hover{
font-size: 1.3em;
background-color: #90ee90;
}
.pic{
width: 430px;
height: 430px;
float: left;
margin: 30px 0 0 95px;
border-radius: 10px;
border: 1px solid #00ced1;
}
.pic img{
width: 100%;
height: 100%;
border-radius: 10px;
}
p{
clear: both;
width: 430px;
position: relative;
top: 30px;
left: 225px;
}
</style>
</head>
<body>
<div class="box">
<h2>水果图册</h2>
<ul>
<li>
<a href="images/xg.jpg" title="为夏季之水果，果肉味甜，能降温去暑" onclick="changePic(this);return false">西瓜</a>
</li><li>
<a href="images/cm.jpg" title="营养价值高，含有多种营养物质 ，且有保健功效。" onclick="changePic(this);return false">草莓</a>
</li><li>
<a href="images/cz.jpg" title="是一种柑果，有很高的食用，药用价值。" onclick="changePic(this);return false">橙子</a>
</li><li>
<a href="images/pg.jpg" title="的果实富含矿物质和维生素，是人们经常食用的水果之一" onclick="changePic(this);return false">苹果</a>
</li>
</ul>
<div class="pic">
<img src="images/timg.jpg" id="img">
</div>
<p id="info">点击左边水果名称，查看水果图片</p>
</div>
<script type="text/javascript">
function changePic(pic){
// 1、获取图片地址和信息
var picUrl = pic.href
var picInfo = pic.title
var picName = pic.innerHTML
// 2、在页面中找到被替换的目标元素
var img = document.getElementById('img')
var p = document.getElementById('info')
// 3、在点击事件完成后，进行图片和信息的替换
img.src = picUrl
p.innerHTML = '<span style="color:#f08080;">'+picName+'：'+picInfo+'</span>'
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
计算器作业演示：http://111.231.88.20/front/html/0329/2.html
通过这个作业的练习，了解了JS里面的一些if判断语句的基本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>迷你计算器作业</title>
<style type="text/css">
.box{
width: 550px;
height: 300px;
background-color: #dcdcdc;
margin: 50px auto;
text-align: center;
border: 1px solid #999;
border-radius: 10px;
box-shadow: 0 0 5px #000;
}
table{
margin: 0 auto;
}
td{
width: 130px;
height: 40px;
}
input,select{
width: 100%;
height: 100%;
border: none;
text-align: center;
}
button{
width: 100%;
height: 100%;
border: none;
background-color: #00ced1;
color: #fff;
}
button:hover{
width: 103%;
height: 103%;
background-color: #ff8c00;
font-size: 1.1em;
}
</style>
</head>
<body>
<div class="box">
<h2>迷你计算器</h2>
<form>
<table>
<tr>
<td>
<input type="text" name="nb1" placeholder="请填写数字">
</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="nb2" placeholder="请填写数字">
</td>
<td>
<button type="button">点击计算</button>
</td>
</tr>
<tr>
<td colspan="2" align="right"><h3>计算结果：</h3></td>
<td colspan="2" align="left"><h3 id="fruit" style="color: #f08080"></h3></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
// 1、获取需要用到的操作数，按钮和结果
var nb1 = document.getElementsByName('nb1')[0]
//由于name获取到的是一组数据，所以后面需要使用数组样式
var nb2 = document.getElementsByName('nb2')[0]
var opt = document.getElementsByName('option')[0]
var btn = document.getElementsByTagName('button')[0]
var fruit = document.getElementById('fruit')
//2、给按钮添加点击事件，进行运算
btn.onclick = function(){
//对操作数进行判断
if (nb1.value.length == 0) {
alert('第一个操作数不能为空')
nb1.focus()
return false
} else if (isNaN(nb1.value)) {
alert('第一个操作数必须是数字')
nb1.focus()
return false
} else if (nb2.value.length == 0) {
alert('第二个操作数不能为空')
nb2.focus()
return false
} else if (isNaN(nb2.value)) {
alert('第二个操作数必须是数字')
nb2.focus()
return false
} else{
var data1 = parseFloat(nb1.value)//是数据返回为浮点数
var data2 = parseFloat(nb2.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，请重新输入')
nb2.focus()
return false
}else{
temp = data1 / data2
}
break
}
fruit.innerHTML = data1+' '+flag+' '+data2+'='+temp
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
通过手抄代码作业，感觉自己之前在电脑写的代码作业理解更加清晰了，之前有些迷糊的地方都想明白了一点！
总结：
今天通过这个两个JS实例的练习，让我基本了解了一些JS的语法和变量的基本使用方法；还有JS在浏览器中所起到的作用是哪些方面！
一些布局方面的东西，又复习了一下之前的html和CSS
在后面的计算器作业在最后出现了一个错误，让后检查了好久以后发现只是一个引号的问题，这个事情让我知道以后写代码要仔细
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
