[练习5]js学习之利用随机数滚动出现图片

来源：互联网发布：淘宝店铺买卖编辑：程序博客网时间：2024/06/05 12:03

<!DOCTYPE html>
<html>
<head>
<meta http-equiv ="Content-Type" content="text/html";charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#adContainer{
  border: 1px #A5ACB2 solid;
  width: 500px;
  height: 500px;
  overflow: hidden;
}
</style>
<body>
<div id="adContainer"></div>
<script type="text/javascript">
var baseUrl = "img/";
//为图片设置权重
var ads = new Array(["1.jpg",10],
      ["2.jpg",10],
      ["3.jpg",20],
      ["4.jpg",30],
      ["5.jpg",40]);
var sortFn = function(a,b){
  if (a[1] < b[1]) return -1;
  if (a[1] > b[1]) return 1;
  if (a[1] == b[1]) return 0;
}
//根据权重重新排列数组，权值越大，越位于后面
ads.sort(sortFn);
//获得权重总数
var allWeight = 0;
for (var i =0; i < ads.length; i ++) {
  allWeight += ads[i][1];
};
//产生一个0~allWeight之间的随机数
var curWeight = Math.round(Math.random()*(allWeight + 1) + 1);
var currUrl;
var maxURL = 0;
var minURL = 0;
for(var i = 0; i < ads.length; i ++){
  minURL = maxURL;
  maxURL += ads[i][1];
  ads[i][1] = maxURL;
}
for(var i = 0; i < ads.length; i ++){
  if (curWeight == allWeight) {//随机数为allWeight时，特例
   currUrl = ads[ads.length-1][0];
  }
  if (i != 0) {
   if (curWeight >= ads[i-1][1] && curWeight < ads[i][1]) {
    currUrl = ads[i][0];
   }
  }else{//权重最小时，特例
   if (curWeight > 0 && curWeight <ads[0][1]) {
    currUrl = ads[0][0];
   }

}
}
var oAdContainer = document.getElementById("adContainer");
oAdContainer.innerHTML = '<img src="' + baseUrl + currUrl + '" style="width:500px;height:500px"/>';
</script>
</body>
</html>

0 0