实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相册</title>
<style type="text/css">
div{
width: 400px;
height: 500px;
margin: 20px auto;
background-color: lightblue;
text-align: center;
box-shadow: 3px 3px 3px blue;
}
h2{
margin: 10px auto;
}
ul{
margin:0;
padding: 0;
overflow:hidden;
}
li{
width: 90px;
height: 40px;
margin:0 5px;
list-style-type: none;
float: left;
background-color: lightgreen;
}
li:hover{
font-size: 1.2em;
background-color: yellow;
}
div ul li a{
line-height: 40px;
color: white;
text-decoration: none;
}
img{
height: 300px;
margin: 20px auto;
line-height: 1px;
}
p{
}
</style>
</head>
<body>
<div>
<h2>相册</h2>
<ul>
<li>
<a href="images/zly.jpg" title="《楚乔传》,《花千骨》,《陆贞传奇》..." onclick="changePic(this); return false">赵丽颖</a>
</li>
<li><a href="images/gyy.jpg" title="《倚天屠龙记》,《咱们经婚吧》,《爱无悔》..." onclick="changePic(this); return false">高圆圆</a></li>
<li><a href="images/sl.jpg" title="《那年花开月正圆》,《甑环传》,《玉观音》..." onclick="changePic(this); return false">孙俪</a></li>
<li><a href="images/fbb.jpg" title="《还珠格格》,《武媚娘传奇》,《我不是潘金莲》..." onclick="changePic(this); return false">范冰冰</a></li>
</ul>
<img id="img" src="images/zwt.png">
<p id="info">123</p>
<script type="text/javascript">
function changePic(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:red">'+picName+picInfo+'</span>'
}
</script>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style type="text/css">
div {
width: 460px;
height: 120px;
border: 1px solid #765;
margin: 20px auto;
text-align: center;
background-color: #666;
}
h3{
margin: 5px auto;
color: white;
}
div ul{
margin: 0;
padding: 0;
overflow: hidden;
}
div ul li{
list-style-type: none;
height: 30px;
margin: 0 2px;
float: left;
}
</style>
</head>
<body>
<div>
<h3>计算器</h3>
<form>
<ul>
<li><input type="text" name="input1" placeholder="输入数据1">
</li>
<li>
<select name="option">
<option value="null">选择</option>
<option value="add">+</option>
<option value="sub">-</option>
<option value="mul">*</option>
<option value="div">/</option>
</select>
</li>
<li>
<input type="text" name="input2" placeholder="输入数据2">
</li>
<li>
<button type="button" name="button">计算</button>
</li>
</ul>
<p>结果：<span id="jg"></span> </p>
</form>
</div>
<script type="text/javascript">
var inp1 =document.getElementsByName('input1')[0]
var inp2 =document.getElementsByName('input2')[0]
var opt =document.getElementsByName('option')[0]
var but =document.getElementsByName('button')[0]
var jg =document.getElementById('jg')
but.onclick= function(){
if (inp1.value.length ==0) {
alert('不能为空')
inp1.focus()
return flase
}
else if (isNaN(inp1.value)) {
alert('必须为数字')
inp1.focus()
return flase
}else if (inp2.value.length ==0) {
alert('不能为空')
inp2.focus()
return flase
}
else if (isNaN(inp2.value)) {
alert('必须为数字')
inp2.focus()
return flase
}else{
var num1= parseFloat(inp1.value)
var num2= parseFloat(inp2.value)
}
var option=opt.value
var temp=0
var flag=''
switch (option){
case 'null':
alert('选择操作符')
opt.focus()
return flase
case 'add':
flag='+'
temp= num1+num2
break
case 'sub':
flag='-'
temp= num1-num2
break
case 'mul':
flag='*'
temp= num1*num2
break
case 'div':
flag='/'
if (num2==0) {
alert('不能为0')
inp2.focus()
return flase
}else{
temp= num1/num2
}
break
}
// jg.innerHTML= temp
// jg.innerHTML= num1+ flag +num2+ '=' +temp
var str='<span style="color:red">'
str+= num1+flag+num2+'='+temp
str+='</span>'
jg.innerHTML= str
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
