收藏
批改状态：合格
老师批语：
本节课程两个案例重点在选取元素和赋值，尤其是要会正确掌握选取元素，可以通过ID、标签名、class名等各种方式选取
重点：
判读数值是否为空通过表单字符长度是否为0判断
将取得的字符串格式化为数值通过parseFloat（）来操作
判断语句if(){}else if{}else{};switch(){case '': break}要灵活运用。
js相册运行效果
先贴部分代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0329简单相册实例</title>
</head>
<style type="text/css">
*{margin:0;padding:0;}
.main{width:600px;height:860px;margin: 0 auto;border: 1px solid red;}
h2{text-align: center;margin: 20px 0}
ul{overflow: hidden;width:400px;margin:0 auto;margin-bottom: 20px}
ul li{list-style: none ;float: left;width:80px;height:40px;text-align: center;margin:0 10px }
ul li a{text-decoration: none;color:#fff;display: block;width: 100%;height:100%;background: lightskyblue;line-height: 40px;}
.imgs{width:480px;height:640px;margin: 0 auto;border:1px solid red;}
.imgs img{width:100%;height:100%;}
p{text-align: center;margin: 15px 0;color: red}
</style>
<body>
<div class="main">
<h2>手机壁纸图册</h2>
<ul>
<li><a href="images/hp.jpg" title="平静的湖泊！" onclick="changePic(this);return false">湖泊</a></li>
<li><a href="images/tt.jpg" title="艾菲尔铁塔" onclick="changePic(this);return false">铁塔</a></li>
<li><a href="images/xc.jpg" title="小清新草地" onclick="changePic(this);return false">草地</a></li>
<li><a href="images/yx.jpg" title="小游戏背景" onclick="changePic(this);return false">游戏</a></li>
</ul>
<div class="imgs">
<img src="images/zwt.png" id="placeholder">
</div>
<p id="info"></p>
</div>
<script type="text/javascript">
function changePic(imgs){
// 先获取列表链接的元素内容
var imgUrl = imgs.href
var imgInfo = imgs.title
var imgName = imgs.innerHTML
// 再获取图替换部分的元素
var img = document.getElementById("placeholder")
var info = document.getElementById("info")
//给替换图加上获取到的值
img.src=imgUrl
info.innerHTML=imgName+":"+imgInfo
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2.建议计算器
运行效果：
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0329简单计算器</title>
</head>
<style type="text/css">
.box{width:600px;margin:auto}
tr,th,td{border:1px solid red;}
</style>
<body>
<div class="box">
<form>
<table>
<caption><h2>简易计算器</h2></caption>
<tr>
<th>数值1</th>
<th>操作</th>
<th>数值2</th>
<th></th>
</tr>
<tr>
<td><input type="text" name="opt1" placeholder="num1"></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="num2"></td>
<td><button type="button" id="btn">计算</button></td>
</tr>
<tr>
<td colspan="2">结果</td>
<td colspan="2"><p id="results"></p></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
//选取表单元素，赋予变量名
var opt1=document.getElementsByName("opt1")[0]
var opt=document.getElementsByName("option")[0]
var opt2=document.getElementsByName("opt2")[0]
//提交按钮和结果赋值
var btn=document.getElementsByTagName("button")[0]
var results=document.getElementById("results")
btn.onclick = function(){
if(opt1.value.length==0){//判断值的合法性
alert("数值1不能为空")
opt1.focus()//不合法就弹出提示并将焦点重新锁定
return false
}else if(isNaN(opt1.value)){
alert("数值1必须为数字")
opt1.focus()
return false
}else if(opt2.value.length==0){
alert("数值2不能为空")
opt2.focus()
return false
}else if(isNaN(opt2.value)){
alert("数值2必须为数字")
opt2.focus()
return false
}else{
var data1=parseFloat(opt1.value)
var data2=parseFloat(opt2.value)
}
var option=opt.value
var temp=0
var flag=''
var result=''
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
}
results.innerHTML=data1+''+flag+''+data2+'='+temp
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手抄和注释:
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
