1、明星相册：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实战1：明星相册</title>
<style type="text/css">
.box{
width: 400px;
height: 600px;
background-color: #efefef;
border: 1px solid lightgray;
margin: auto;
box-shadow: 2px 2px 2px #999;
border-radius: 10px;
}
.box h2{
text-align: center;
font-family: "微软雅黑";
}
.box ul{
}
.box li{
float: left;
list-style: none;
/*margin-left: 20px;*/
margin-bottom: 20px;
background-color: skyblue;
}
.box li a{
display: block;
width: 80px;
height: 40px;
text-decoration: none;
line-height: 40px;
text-align: center;
border: 1px solid #efefef;
}
.box li:hover{
background-color: coral;
cursor: pointer;
}
.pic{
width: 350px;
height: 400px;
margin: auto;
}
#img{
width: 100%;
height: 100%;
border: 1px solid lightgray;
/*消除图片底部的空隙*/
line-height: 1px;
}
#info{
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<h2>§明星相册§</h2>
<ul>
<li>
<a href="images/yyqx.jpg" title="清冷疏离半熟少年，凌厉别致全能舞者" onclick="changePic(this);return false">易烊千玺</a>
</li>
<li>
<a href="images/lzs.jpg" title="耍酷卖萌，一笑倾城" onclick="changePic(this);return false">李钟硕</a>
</li>
<li>
<a href="images/zyw.jpg" title="行走的荷尔蒙" onclick="changePic(this);return false">朱亚文</a>
</li>
<li>
<a href="images/lf.jpg" title="古装美男，诗意盎然" onclick="changePic(this);return false">林 峰</a>
</li>
</ul>
<div class="pic">
<img src="images/zwt.png" id="img">
<p id="info"></p>
</div>
</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 info = document.getElementById('info');
// 3.将对应的图片与占位符进行替换
img.src = picUrl;
info.innerHTML = picName+":" +picInfo;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、迷你计算器：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实战：迷你计算器</title>
<style type="text/css">
.box{
width: 600px;
height: 200px;
background-color: #efefef;
border: 1px solid lightgray;
margin: auto;
margin-top: 50px;
box-shadow: 2px 2px 2px #999;
border-radius: 20px;
}
.box h2{
text-align: center;
}
table{
/*border: 1px solid red;*/
margin: auto;
}
td{
/*border: 1px solid blue;*/
width: 100px;
height: 30px;
padding: 5px 5px;
}
.cal,.reset{
width: 60px;
text-align: center;
}
input,select{
width: 100%;
height: 100%;
text-align: center;
}
button{
border: none;
width: 70px;
height: 30px;
background-color: skyblue;
color: #fff;
margin-left: 10px;
}
button:hover{
background-color: coral;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<h2>迷你计算器</h2>
<form>
<table>
<tr>
<td><input type="text" name="opt1" 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="opt2" placeholder="操作数2"></td>
<td class="cal"><button type="button" name="cal">计算</button></td>
<td class="reset"><button type="button" name="reset">清空</button></td>
</tr>
<tr>
<td colspan="3" align="right"><h3>结果：</h3></td>
<td colspan="2" align="left"><h3 id="placeholder"></h3></td>
</tr>
</table>
</form>
</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 btn1 = document.getElementsByName("cal")[0];
var btn2 = document.getElementsByName("reset")[0];
var placeholder = document.getElementById("placeholder");
// 2.给按钮添加事件
btn1.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("第二个操作数不能为空");
opt2.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 = '';
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;
}
result = '<span style="color:coral">';
result += data1+' '+flag+' '+data2+' '+'= '+temp;
result += '</span>'
placeholder.innerHTML = result;
}
btn2.onclick = function(){
opt1.value = '';
opt2.value = '';
opt.value = null;
if(placeholder.innerHTML!=null){
placeholder.innerHTML = '';
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3、手写代码之迷你计算器：
