简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 相册 计算器
Blogger Information
Blog 18
fans 0
comment 0
visits 11657
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
相册 计算器
专业交作业
Original
908 people have browsed it

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例



Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！