html读取js脚本批量加载图片及超链接

思路：编写脚本文件–>html引入–>创建div来获取显示图片并添加点击事件

引入js脚本

在html文件<head> </head>中间引入脚本路径,如下..index.js为脚本文件路径

1	<script src="..index.js"></script>

在需要加载图片及超链接的<div>处加上id,例如下面我给gamebox加上game_list的id

<body>
  <div class="gamebox" id = 'game_list'>
  </div>
</body>

编写脚本文件

var GAME_LIST = [
  {
    name: "2048CubeWinner",
    url: "https://cdn.bepicgames.com/h5/game/2048CubeWinner/index.html",
    logo: "https://cdn.bepicgames.com/h5/game/2048CubeWinner/logo.png",
  },
  {
    name: "AlphabetDop",
    url: "https://cdn.bepicgames.com/h5/game/AlphabetDop/index.html",
    logo: "https://cdn.bepicgames.com/h5/game/AlphabetDop/logo.png",
  },
];

var gameListDom = document.getElementById('game_list');
// console.log(gameListDom);确保获取id对象不为空

//divDom.className = "productRow" 是css中定义好的样式id名 进行优化样式处理
for (var i = 0; i < GAME_LIST.length; i++) {
	var imageDom = document.createElement('img');
	imageDom.src = GAME_LIST[i].logo;
	console.log('Link' + i + ':' + GAME_LIST[i].logo);
	var divDom = document.createElement('div');
	divDom.className = "productRow"
	divDom.appendChild(imageDom);
	let dd = '' + GAME_LIST[i].url
	divDom.onclick = function(){
		window.location = dd
	}
	gameListDom.appendChild(divDom);
}

html跳转链接时传递参数

传递参数 a=1
window.location.href = new.html?a=1
接受参数

<script>
// 获取url中的参数
			function getUrlParam(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) {
					return unescape(r[2]);
				} else {
					return null;
				}
			}
      let a = getUrlParam('a')
</script>