收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.1.js"></script>
<title>女神匹配</title>
<style>
p {
text-align: center;
}
div {
text-align: center;
}
</style>
</head>
<body>
<p>依次输入4个数字，测测你与女神匹配值</p>
<p><input id="num" type="text" placeholder="请输入1-4的数字"><button id="go">Go</button></p>
<div id="result"></div>
<script>
$('#go').on('click',function () {
var num = $('#num').val(); //获取到了input的值
// console.log(num)
$.ajax({
type:'GET',
url:'demo2.json',
data:{num:num},
datatype:'json',
success:function (data) {
$.each(data,function (key, value) {
if (key == num){
//创建img标签和p标签
var img = $('<img>').attr('src',value).width(200);
var match = $('<p>');
//生成自定义1-n的随机数
function getRandom(n) {
return Math.floor(Math.random()*n+1)
}
//获取1到100的随机数
var aNum = getRandom(100);
// console.log(raNum)
match.html ('匹配值：'+raNum) ;//在创建的p标签里加入匹配值
$('#result').append(img,match);
}
})
}
})
});
</script>
</body>
</html>{
"1": "http://localhost/php/1.jpg",
"2":"http://localhost/php/2.jpg",
"3": "http://localhost/php/3.jpg",
"4":"http://localhost/php/4.jpg"
}
这里面采用了图片链接的方式，利用json格式传递url学习收获：学习了jQuery的ajax运用，jquery的ajax函数可以传的datatype有：json, html, xml, txt...
ajax的对象参数属性非常多,但最常用的只有5个:type,url,data,dataType,success: function (data, status) {}
也学会了js生成随机数的方法
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
