Blogger Information
Blog 29
fans 1
comment 1
visits 24766
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js制作网页相册与计算器2018-3-30
谦谦允水的博客
Original
571 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<style>
	ul{list-style: none;width: 800px;margin: 0 auto;overflow: hidden;}
	ul li{width: 25%;text-align: center;line-height: 50px;float: left;}
	.img{width: 200px;height: 200px;border:1px solid #ccc;margin: 0 auto;margin-top: 100px;}
	.img img{width: 100%;}

</style>
<body>
	<ul class="ul">
		<li>照片1</li>
		<li>照片2</li>
		<li>照片3</li>
		<li>照片4</li>
	</ul>
	<div class="img">
		<img src="http://c.hiphotos.baidu.com/image/pic/item/8b13632762d0f703e39d0fd904fa513d2697c58c.jpg" alt="">
	</div>
	<div class="jsq img">
		<input class="input1" type="text">
		<input class="input2" type="text"><br>
		<select name="" id="select">
			<option value="请选择">请选择</option>

			<option value="1">+</option>
			<option value="2">-</option>
			<option value="3">*</option>
			<option value="4">/</option>
		</select>
		
		结果:<p class="jg"></p>
	</div>
</body>
<script>
	var img=['http://d.hiphotos.baidu.com/image/pic/item/b3b7d0a20cf431ad184ee53e4736acaf2edd981d.jpg',
	'http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg',
	'http://e.hiphotos.baidu.com/image/pic/item/4a36acaf2edda3ccd03c4d220de93901203f92dc.jpg',
	'http://c.hiphotos.baidu.com/image/pic/item/8b13632762d0f703e39d0fd904fa513d2697c58c.jpg'
	]
	$(".ul li").click(function(){
		var a=$(this).index();
		$(".img img").attr('src',img[a]);
	})


			
	
		$("#select").change(function(){	
			var a=$('.input1').val();
			var b=$('.input2').val();
			// alert(typeof a);string类型
			console.log(a,b);			
				if(!/^[0-9]*$/.test(a)||!/^[0-9]*$/.test(b)){
					alert("请输入数字");
					return;
				}	
				else{
					var x='';	
					var a=parseFloat(a);//有点坑
					var b=parseFloat(b);
					var num=$(this).val();
					switch(num){
						case '1':x=a+b;
						break;
						case '2':x=a-b;
						break;
						case '3':x=a*b;
						break;
						case '4':x=a/b;
						break;												
					}
					$(".jg").html(x)					
				}		

		})
		var str="852法国红酒1266";
		console.log(parseFloat(str));//只能提取开头几位数字
		console.log(parseInt(str));

		
</script>
</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