博主信息
博文 29
粉丝 1
评论 1
访问量 29450
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
js制作网页相册与计算器2018-3-30
谦谦允水的博客
原创
722人浏览过

实例

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

运行实例 »

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


批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学