收藏
批改状态：合格
老师批语：
相册案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS入门相册案例</title>
<style>
.box{
width: 500px;
height: 700px;
background-color: white;
border: 1px solid red;
box-shadow: 2px 2px 2px #999;
text-align: center;
margin: auto;
overflow: hidden;
}
.box ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.box ul li{
float: left;
background-color: lightpink;
margin-left: 20px;
}
.box ul li a{
text-decoration-line: none;
display: block;/*把内联元素a变为块级元素*/
width: 100px;
height: 40px;
line-height: 40px;/*a标签里的文本在a块中居中*/
}
.box ul li a:hover{
font-size: 1.2em;
cursor: pointer;
background-color: skyblue;
}
.box1{
width: 450px;
height: 380px;
border: 1px solid #505050;
/*line-height: 1px;*/
margin: auto;
margin-top: 100px;
}
.box1 img{
width: 100%;
height: 100%;
}
.box2 {
width: 450px;
height: 100px;
float: left;
margin-top: 30px;
margin-left: 20px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">
<h2>我的私人相册</h2>
<ul>
<li><a href="imgs/img1.jpg" title="《三渣树之恋》,《七世桃花》，《梦回大唐》" onclick="change(this);return false;" >上原</a></li>
<li><a href="imgs/img2.png" title="《三渣树之恋》,《七世桃花》，《梦回大唐》" onclick="change(this);return false;">结衣</a></li>
<li><a href="imgs/img3.jpg" title="《三渣树之恋》,《七世桃花》，《梦回大唐》" onclick="change(this);return false;">吉川</a></li>
<li><a href="imgs/img4.jpg" title="《三渣树之恋》,《七世桃花》，《梦回大唐》" onclick="change(this);return false;">北海</a></li>
</ul>
<div class="box1">
<img src="imgs/img9.jpg" id="img">
</div>
<div class="box2">
<p id="info"></p>
</div>
</div>
<script>
function change(pv) {
// 1.获取盒子里的图片资源，标题，文本
var a=pv.href
var b=pv.title
var c=pv.innerHTML
// 2.获取被替换的图片和下面的文本对象
var d=document.getElementById('img')
var e=document.getElementById('info')
// 3.获取到的图片资源覆盖文档中的图片和下面的文本
d.src=a
e.innerHTML='<span style=color:green>'+c+':'+b;
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
计算器案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS计算器案例</title>
<style>
.box{
width: 500px;
height: 200px;
background-color:#efefef;
border: 1px solid black;
text-align: center;
margin:20px auto;
color: lightskyblue;
box-shadow: 2px 2px 2px #999;
}
table{
margin: auto;
}
input,select{
width:100%;
height:100%;
border: none;
text-align: center;
}
td{
width: 100px;
height: 30px;
padding: 5px 10px;
}
button{
width: 100%;
height: 100%;
border: none;
background-color: #222222;
color: white;
}
button:hover{
cursor: pointer;
background-color: sandybrown;
}
</style>
</head>
<body>
<div class="box">
<h2>迷你计算机</h2>
<form>
<table>
<tr>
<td><input type="text" name="frist" placeholder="操作数1"></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="two" placeholder="操作数2"></td>
<td><button type="button">计算</button></td>
</tr>
<tr>
<td colspan="2" align="right"><h3>结果:</h3></td>
<td colspan="2" align="left"><h3 id="placeholder"></h3></td>
</tr>
</table>
</form>
</div>
<script>
// 1.获取操作数，按钮，结果占位符
var frist=document.getElementsByName('frist')[0];
var two=document.getElementsByName('two')[0];
var opt=document.getElementsByName('option')[0];
var placeholder=document.getElementById('placeholder')
var btn=document.getElementsByTagName('button')[0];
// 2.给按键添加点击事件
btn.onclick=function(){
if(frist.value.length==0){
alert('第一个操作数不能为空')
frist.focus()
return false
}else if(isNaN(frist.value)){
alert('请输入数字，第一个操作数据必须是数字')
}else if(two.value.length==0){
alert('第二个操作数不能为空')
frist.focus()
return false
}else if(isNaN(two.value)){
alert('请输入数字，第二个操作数据必须是数字')
}else{
var data1=parseFloat(frist.value)
var data2=parseFloat(two.value)
}
var option=opt.value
var tem=0
var flag=''
switch (option){
case 'null':
alert('请选择操作符')
opt.focus();
return false
case 'add':
flag='+'
tem=data1+data2
break
case 'sub':
flag='-'
tem=data1-data2
break
case 'mul':
flag='*'
tem=data1*data2
break
case 'div':
flag='/'
if(data2 ==0){
alert('除数不能为0')
return false
}else {
tem=data1/data2
}
break
}
placeholder.innerHTML=data1+''+flag+''+data2+'='+tem
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
相册：
获取盒子里的图片资源，标题，文本
获取被替换的图片和下面的文本对象
获取到的图片资源覆盖文档中的图片和下面的文本
计算器：
获取操作数，按钮，结果占位符
给按键添加点击事件
判断操作数据一，二是否为空，必须是数字，运算符必须选择
手抄：
运行效果图：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
