javascript
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>美女相册</title>
</head>
<style type="text/css">
body {
background:url('img/bg.jpg');
}
.box {
width:1100px;
margin:35px auto;
text-align:center;
}
.left {
width:550px;
float:left;
overflow:hidden;
background-color:rgba(237, 237, 237, 0.4);
border:1px solid #f9f9f9;
/* box-shadow:0 0 1px 1px #d1d1d1; */
border-radius:3%;
}
.left ul {
height:700px;
margin-bottom:15px;
}
.left ul li {
float:left;
width:150px;
list-style: none;
padding:10px 1px;
}
.left ul li img {
width:140px;
border-radius:3%;
border:2px solid rgba(237, 237, 237, 0.8);
}
.right {
width:500px;
margin:auto;
float:right;
}
.right img {
width:472px;
border-radius:3%;
margin-top:3px;
border:10px solid rgba(237, 237, 237, 0.8);
}
</style>
<body>
<div class="box">
<div class="left">
<ul>
<li><a href="img/11.jpg" onclick="changePic(this);return false" title="美腿私房写真1"><img src="img/11.jpg" /></a></li>
<li><a href="img/12.jpg" onclick="changePic(this);return false" title="美腿私房写真2"><img src="img/12.jpg" /></a></li>
<li><a href="img/13.jpg" onclick="changePic(this);return false" title="美腿私房写真3"><img src="img/13.jpg" /></a></li>
<li><a href="img/14.jpg" onclick="changePic(this);return false" title="美腿私房写真4"><img src="img/14.jpg" /></a></li>
<li><a href="img/15.jpg" onclick="changePic(this);return false" title="美腿私房写真5"><img src="img/15.jpg" /></a></li>
<li><a href="img/16.jpg" onclick="changePic(this);return false" title="美腿私房写真6"><img src="img/16.jpg" /></a></li>
<li><a href="img/17.jpg" onclick="changePic(this);return false" title="美腿私房写真7"><img src="img/17.jpg" " /></a></li>
<li><a href="img/18.jpg" onclick="changePic(this);return false" title="美腿私房写真8"><img src="img/18.jpg" /></a></li>
<li><a href="img/19.jpg" onclick="changePic(this);return false" title="美腿私房写真9"><img src="img/19.jpg" /></a></li>
</ul>
</div>
<div class="right">
<img src="img/11.jpg" alt="" id="img"/>
<p id='info'></p>
</div>
</div>
<script type="text/javascript">
function changePic(pic){
var picUrl = pic.href
var picInfo = pic.title
var img = document.getElementById('img')
var p = document.getElementById('info')
img.src = picUrl
p.innerHTML = picInfo
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>计算</title>
<style type="text/css">
.box {
width:500px;
height:200px;
background-color:#e2e2e2;
border:1px solid #d6d6d6;
border-radius:2% ;
box-shadow:2px 2px 2px 2px #bdbdbd;
margin:20px auto;
text-align:center;
}
</style>
</head>
<body>
<div class="box">
<h2>计算器</h2>
<form>
<table>
<tr>
<td><input type="text" name="num1" placeholder="数字一" /></td>
<td><select name="caozuo">
<option value="null">选择操作</option>
<option value="jia">+</option>
<option value="jian">-</option>
<option value="cheng">*</option>
<option value="chu">/</option>
</select></td>
<td><input type="text" name="num2" placeholder="数字二" /></td>
<td><button type="jsuan">计算</button></td>
</tr>
<tr>
<td colspan="2">结果</td>
<td colspan="2"><h3 id="jieguo"></h3></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
var num1 = document.getElementsByName('num1')[0]
var num2 = document.getElementsByName('num2')[0]
var cz = document.getElementsByName('caozuo')[0]
var jsuan = document.getElementsByTagName('button')[0]
var jieguo = document.getElementById('jieguo')
jsuan.onclick = function()
{
if (num1.value.length == 0){
alert('第一个数不能为空')
num1.focus()
return false
} else if (isNaN(num1.value)){
alert('只能为数字')
num1.focus()
return false
} else if (num2.value.length == 0){
alert('第二个数字不能为空')
num2.focus()
return false
} else if (isNaN(num2.value)){
alert('只能为数字')
num2.focus()
return false
} else {
var data1 = parseFloat(num1.value)
var data2 = parseFloat(num2.value)
}
var caozuo = cz.value
var temp = 0
var flag = ''
var result = ''
switch (caozuo){
case 'null':
alert('请选择操作类型')
caozuo.focus()
return false
case 'jia':
flag = '+'
temp = data1 + data2
break
case 'jian':
flag = '-'
temp = data1 - data2
break
case 'cheng':
flag = '*'
temp = data1 * data2
break
case 'chu':
flag = '/'
if (data2 == 0){
alert('被除数不能为0，请重新输入')
num2.focus()
return false
}else{
temp = data1 / data2
}
break
}
jieguo.innerHTML = data1+' '+ flag+' '+ data2+' = '+temp
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
不是很熟悉，需要多练习
