线上培训第十天
代码：JS图片简单切换
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style type="text/css">
.Marvel{
width: 600px;
height: 700px;
background-color: #a42427;
margin: 20px auto;
text-align: center;
}
.Marvel ul {
margin:0;
padding:0;
overflow: hidden;
margin-top: 20px;
}
.Marvel ul li{
float: left;
list-style-type: none;
padding: 0 20px;
line-height: 50px;
}
.Marvel ul li a{
font-size: 1.2em;
color: #fff;
}
.Marvel ul li:hover{
background-color: red;
}
.Marvel img{
margin-top: 20px;
width: 460px;
height: 550px;
}
</style>
</head>
<body>
<div class="Marvel">
<h2>Marvel's The Avengers</h2>
<ul>
<li><a href="image/Captain America.jpg" onclick="changePic(this);return false">Captain America</a></li>
<li><a href="image/Iron Man.jpg" onclick="changePic(this);return false">Iron Man</a></li>
<li><a href="image/Thor.jpg" onclick="changePic(this);return false">Thor</a></li>
<li><a href="image/Luoji.jpg" onclick="changePic(this);return false">Loki</a></li>
<li><a href="image/HeiGua.jpg" onclick="changePic(this);return false">Black Widow</a></li>
</ul>
<img src="image/zwt.png" id="img">
</div>
<script type="text/javascript">
//1.获取到要替换的明星图片与简介信息
function changePic(pic){
var href = pic.href;
var img = document.getElementById('img')
img.src = href;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
迷你计算器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.迷你计算器</title>
<style type="text/css">
.Calcu {
width: 500px;
height: 200px;
background-color: #efefef;
border: 1px solid blue;
text-align: center;
margin: auto;
}
table {
margin: auto;
}
td {
width: 100px;
height: 30px;
padding: 5px 10px;
}
input, select {
width: 100%;
height:100%;
border:none;
text-align: center;
}
button {
width: 100%;
height: 100%;
border: none;
background-color: skyblue;
color: white;
}
button:hover {
cursor: pointer;
background-color: coral;
width: 105%;
height: 105%;
}
</style>
</head>
<body>
<div class="Calcu">
<h2>迷你计算器</h2>
<form>
<table>
<tr>
<td><input type="text" name="opt1" placeholder="操作数1" id="opt1"></td>
<td>
<select name="option" id="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" id="opt2"></td>
<td><button type="button" onclick="sub()">计算</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 type="text/javascript">
function sub(){
var opt1 = document.getElementById('opt1')
var opt2 = document.getElementById('opt2')
var option = document.getElementById('option')
var date1,date2;
var temp='',sum=0;
if(opt1.value.length==0){
alert('提示：请输入操作数1')
opt1.focus();
return false;
}else if(isNaN(opt1.value)){
alert('提示：请输入数字')
opt1.focus();
return false;
}else if(opt2.value.length==0){
alert('提示：请输入操作数2')
opt2.focus();
return false;
}else if(isNaN(opt2.value)){
alert('提示：请输入数字')
opt2.focus();
return false;
}else{
date1 = parseFloat(opt1.value);
date2 = parseFloat(opt2.value);
}
switch(option.value){
case 'null':
alert('请选择数字运算符');
option.focus();
return false;
case 'add':
temp = '+';
sum = date1 + date2;
break;
case 'sub':
temp = '-';
sum = date1 - date2;
break;
case 'mul':
temp = '*';
sum = date1 * date2;
break;
case 'div':
if(date2==0){
alert('错误提示:除数不能为零')
return
}else{
temp = '/';
sum = date1 / date2;
break;
}
}
placeholder.innerHTML = date1 + ' ' + temp + ' ' +date2 + ' = ' + sum;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码：
