相册作业效果图如下：
相册作业源代码如下：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>武打明星榜</title>
<style type="text/css">
.box {
width: 600px;
height: 700px;
background-color: #f5f5f5;
border: 2px solid #708090;
margin: 20px auto;
text-align: center;
color: blue;
box-shadow: 3px 3px 3px #333;
}
.box ul {
margin: 0;
padding: 0;
overflow: hidden;
}
.box ul li {
list-style-type: none;
float: left;
background-color: #98fb98;
margin-left: 17px;
}
.box ul li a {
display: block;
width: 100px;
height: 50px;
line-height: 50px;
color: red;
text-decoration: none;
}
.box ul li:hover {
font-size: 1.5em;
background-color: #b0e0e6;
}
.box .pic {
width: 560px;
height: 500px;
border: 2px solid #800080;
line-height: 1px;
margin: auto;
margin-top: 10px;
}
.box .pic img {
width: 100%;
height: 100%;
}
#info {
color:#ff00ff
}
</style>
</head>
<body>
<div class="box">
<h2>中国武打明星册</h2>
<ul>
<li><a href="http://y.photo.qq.com/img?s=ok476Jghg&l=y.jpg" title="《精武门》,《猛龙过江》,《唐山大兄》,《死亡塔》..." onclick="mixingpic (this);return false">李小龙</a></li>
<li><a href="http://y.photo.qq.com/img?s=YdvMS1ux9&l=y.jpg" title="《警察故事》,《尖峰时刻》,《神话》,《十二生肖》..." onclick="mixingpic (this);return false">成龙</a></li>
<li><a href="http://y.photo.qq.com/img?s=5sDD1HQ6S&l=y.jpg" title="《英雄》,《霍元甲》,《少林寺》,《方世玉》..." onclick="mixingpic (this);return false">李连杰</a></li>
<li><a href="http://y.photo.qq.com/img?s=8gSqL0Xxn&l=y.jpg" title="《太极宗师》,《战狼》,《功夫小子闯情关》,《男儿本色》..." onclick="mixingpic (this);return false">吴京</a></li>
<li><a href="http://y.photo.qq.com/img?s=WqgqGyj8W&l=y.jpg" title="《风云》,《英雄郑成功》,《断刀客》,《苏乞儿》..." onclick="mixingpic (this);return false">赵文卓</a></li>
</ul>
<div class="pic">
<img src="http://y.photo.qq.com/img?s=sk8VFhJgl&l=y.jpg" alt="功夫明星" id="img">
</div>
<div><p id="info"><strong>中国武打明星前五名</strong></p></div>
</div>
<script type="text/javascript">
function mixingpic(pic){
var picurl = pic.href
var picinfo = pic.title
var picname = pic.innerHTML
var img = document.getElementById('img')
var p = document.getElementById('info')
img.src = picurl
p.innerHTML = picname+':'+picinfo
// p.innerHTML = '<span style="color:#ff00ff">'+picname+':'+picinfo+'</span>'
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
迷你计算器效果图如下：
迷你计算器源代码如下：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>迷你计算器</title>
<style type="text/css">
.box {
width: 500px;
height: 300px;
background-image: url(http://y.photo.qq.com/img?s=5fQFhRlQH&l=y.jpg);
text-align: center;
margin: auto;
border-radius: 12px;
box-shadow: 3px 3px 8px #666;
}
h2 {
color: red;
font-size: 25px;
}
table {
margin:auto;
}
.box .top td {
width: 200px;
height: 30px;
padding-top: 8px;
text-align: center;
}
input, select{
width: 100%;
height: 100%;
border: none;
}
button {
width: 100px;
height: 30px;
border-radius: 10px;
background-color: #00ffff;
color: #8b008b;
}
.left {
float: left;
padding-left: 100px;
color: #ffd700;
}
.right {
float: left;
}
a {
color: #adff2f;
}
</style>
</head>
<body>
<div class="box">
<h2>迷你计算器</h2>
<div class="top">
<form>
<table>
<tr>
<td><input type="text" name="opt1" placeholder=" 第1个数"></td>
</tr>
<tr>
<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>
</tr>
<tr>
<td><input type="text" name="opt2" placeholder=" 第2个数"></td>
</tr>
<tr>
<td><button type="button"><strong>开始计算</strong></button></td>
</tr>
</table>
</form>
</div>
<div class="left">计算结果：</div>
<div class="right"><a id="placeholder"></a></div>
</div>
<script type="text/javascript">
var opt1 = document.getElementsByName('opt1')[0]
var opt2 = document.getElementsByName('opt2')[0]
var opt = document.getElementsByName('option')[0]
var btn = document.getElementsByTagName('button')[0]
var placeholder = document.getElementById('placeholder')
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('第1个数不能为空')
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
}
placeholder.innerHTML = data1+' '+flag+' '+data2 + ' = ' + temp
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
迷你计算器手抄如下：
