计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style type="text/css">
table{
width: 600px;
min-height: 200px;
text-align: center;
background-color: #bb5874;
}
</style>
</head>
<body>
<h3>计算器</h3>
<table>
<tr>
<td colspan="4">
计算器
</td>
</tr>
<tr>
<td><input type="text" name="opt1" placeholder="操作数1" value="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><button type="button" onclick="lastResult()">计算</button></td>
</tr>
<tr>
<td colspan="4">
结果：<h3 id="result"></h3>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
function lastResult(){
var opt1 = document.getElementsByName("opt1")[0];
var option = document.getElementsByName("option")[0];
var opt2 = document.getElementsByName("opt2")[0];
var result = document.getElementById("result");
var lastResult ="";
var str ="";
switch(option.value){
case "add":
lastResult = opt1.value + opt2.value;
str = opt1.value + "+"+opt2.value +"=" +lastResult;
break;
case "sub":
lastResult = opt1 - opt2;
str = opt1.value + " - " +opt2.value + "=" +lastResult;
break;
case "mul":
lastResult = opt1 * opt2;
str = opt1.value +" * " +opt2.value +"=" +lastResult;
break;
case "div":
lastResult = opt1 / opt2;
str = opt1.value +" / " +opt2.value +"=" +lastResult;
break;
}
alert(lastResult);
result.innerHTML = str;
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
图片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>明星相册</title>
<style type="text/css">
.box{
width: 500px;
height: 500px;
background-color: black;
margin: auto;
}
.box .top{
width: 100%;
height:60px;
overflow: hidden;
text-align: center;
background-color: #aa0424;
}
.box .top ul{
padding: 0;
margin: 0;
}
.box ul li{
float: left;
list-style-type: none;
background-color: #BB0042;
margin-left: 17px;
}
.box ul li a {
display: block;
width: 80px;
height: 60px;
line-height: 60px;
color: white;
text-decoration: none;
}
.box ul li a:hover{
background-color: #BB996C;
cursor: pointer;
}
.box .img img{
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="top">
<ul>
<li><a href="images/fbb.jpg" onclick="change(this) ;return false" title="明星1">明星1</a></li>
<li><a href="images/gyy.jpg" onclick="change(this) ;return false" title="明星2">明星2</a></li>
<li><a href="images/sl.jpg" onclick="change(this);return false" title="明星3">明星3</a></li>
<li><a href="images/zly.jpg" onclick="change(this);return false" title="明星4">明星4</a></li>
<li><a href="images/zwt.png" onclick="change(this);return false" title="明星5">明星5</a></li>
</ul>
</div>
<div class="img">
<img src="images/fbb.jpg" id="img">
</div>
</div>
</body>
<script type="text/javascript">
function change(pic){
var imgUrl = pic.href;
var img = document.getElementById("img");
img.src = imgUrl;
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
