实例
<!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>运行实例 »
点击 "运行实例" 按钮查看在线实例
