![](https://iknow-base.cdn.bcebos.com/lxb/notice.png)
求解一个JavaScript题目。如何使两个数组的下标一一对应。 150
a2=[10元,12元,15元,9元]。当页面显示苹果时,对应显示10元。
[拓展]如果有第三个数组a3=[九折,八折,七折]当显示苹果时,随机random一个a3的折扣。然后在1秒后显示对应(打折后)的价格 展开
2018-11-08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
<table>
<tr>
<td>水果</td>
<td>原价(元)</td>
<td>折扣</td>
<td>价格(元)</td>
</tr>
<tr>
<td class="fruit"></td>
<td class="jia"></td>
<td class="zhe"></td>
<td class="price"></td>
</tr>
</table>
<script>
var a1 = ["苹果", "香蕉", "橘子", "梨"];
var a2 = [10, 12, 15, 9];
var a3 =[0.9,0.8,0.7];
var index1 = Math.floor(Math.random() * a1.length);
var index2 = Math.floor(Math.random() * a3.length);
$(".fruit").html(a1[index1]);
$(".jia").html(a2[index1]);
$(".zhe").html(a3[index2]);
$(".price").html((a2[index1]*a3[index2]).toFixed(2));
</script>
</body>
</html>
那个,我还没有学到jquery,能否不用jQuery。
无标题文档
ul,li{padding: 0px; margin: 0px; list-style: none;}
.main{ width: 300px; height: 50px; margin: 0px auto;}
.main li{ width:98px; height: 50px; float: left; border: 1px solid #cecece}
var a1=["苹果","香蕉","橘子","梨"];
var a2=["10","12","15","9"];
var a3=["0.9","0.8","0.7"]
var a4 = new Array();
a4["0.9"] = "九折";
a4["0.8"] = "八折";
a4["0.7"] = "七折";
var index = Math.floor((Math.random()*a1.length));
var cccc = Math.floor((Math.random()*a4.length));
window.onload=function()
{
document.getElementById('sg').innerHTML=a1[index];
document.getElementById('yj').innerHTML=a2[index];
document.getElementById('zk').innerHTML=a4[a3[cccc]];
document.getElementById('jg').innerHTML=a2[index]*a3[cccc]+"元";
}
水果和原价
折扣
价格
,元
在输入框里 写上 水果名 确认 得到 结果!
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input id="text" value="苹果" type="text" name="">
<button id="but">确认</button>
<div></div>
<script type="text/javascript">
document.getElementById("but").onclick=function(){
var value=document.getElementById("text").value
let a1=["苹果","香蕉","橘子","梨"]
let a2=[10,20,30,40]
let a3=[0.9,0.8,0.7]
if (a1.includes(value)) {
let index=a1.indexOf(value)
let random= Math.floor(Math.random() * (a1.length-1))
let odiv=document.getElementsByTagName("div")[0]
odiv.innerHTML=`${a1[index]}<br/>原价${a2[index]}元 <br/> ${a3[random]*10}折`
setTimeout(function(){
odiv.innerHTML+=`<br/>最终价格:${a2[index]*a3[random]}元`
},1000)
}else{
document.getElementsByTagName("div")[0].innerHTML=`没有此商品!`
}
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
ul,li{padding: 0px; margin: 0px; list-style: none;}
.main{ width: 300px; height: 50px; margin: 0px auto;}
.main li{ width:98px; height: 50px; float: left; border: 1px solid #cecece}
</style>
</head>
<body>
<script>
var a1=["苹果","香蕉","橘子","梨"];
var a2=["10","12","15","9"];
var a3=["0.9","0.8","0.7"]
var a4 = new Array();
a4["0.9"] = "九折";
a4["0.8"] = "八折";
a4["0.7"] = "七折";
var index = Math.floor((Math.random()*a1.length));
var cccc = Math.floor((Math.random()*3));
window.onload=function()
{
document.getElementById('sg').innerHTML=a1[index];
document.getElementById('yj').innerHTML=a2[index];
document.getElementById('zk').innerHTML=a4[a3[cccc]];
document.getElementById('jg').innerHTML=a2[index]*a3[cccc]+"元";
}
</script>
<div class="main">
<li>水果和原价</li>
<li>折扣</li>
<li>价格</li>
<li><span id="sg"></span>,<span id="yj"></span>元</li>
<li id="zk"></li>
<li id="jg"></li>
</div>
</body>
</html>
然后捏