最近一直在练习JavaScript的知识点和DOM编程，正好之前碰到有个朋友做过这个，就想自己临摹一下。完成的过程中，布局部分花的时间比较多，js部分还没完整，望多见谅素材还在不断收集中，所以画面感还不是很好看还会不断完善，望多支持
效果图：初始页面。
最后是登陆后英雄选择页面：
这是主内容部分代码：
<!doctype html><html><meta charset="utf-8"><title>英雄联盟登录界面</title><link rel="stylesheet" type="text/css" href="style.css"><script type="text/javascript"></script><head></head><body><div class="container" id="container"><div class="left_top"><p>你的队伍</p><ul><li id="left_id1"><div><div class="left_img" id="left_img01"></div>召唤师1</div></li><li id="left_id2"><div><div class="left_img" id="left_img02"></div>召唤师2</div></li></ul></div><div class="center_top"><p>现在轮到你选择英雄</p><ul class="center_nav"><li>英雄</li><li>皮肤</li></ul><div class="center_img"><ul class="img_ul" id="img_ul"></ul></div></div><div class="right_top"><p>敌方的队伍</p><ul><li><div><div class="right_img" ></div>召唤师1</div></li><li><div><div class="right_img" ></div>召唤师2</div></li></ul></div><div class="left_bottom"><p class="left_bottom_head">详细信息</p><div>地图：召唤师峡谷</div><div>队伍规模：5×5</div><div>对战模式：经典对战模式</div><div>选择模式：自选模式</div><div>游戏类型：匹配类型</div></div><div class="center_center"><div class="center_center_l">符文天赋：<div><select style="width: 180px"><option>1</option><option>2</option><option>3</option></select></div></div><div class="center_center_c"><p style="float: left">技能：</p><div style="background-image: url(img/shanxian.png)"></div><div style="background-image: url(img/yinran.png)"></div></div><div class="center_center_r"><button id="comfim">确认</button></div></div><div class="center_bottom"><p class="center_bottom_head">队伍聊天</p><div>小强进入 房间</div><div>熊明进入 房间</div><div>clearLove 退出房间</div><div>fake 退出房间</div><div>游戏准备开始</div></div><div class="right_bottom"><p class="right_bottom_head">召唤师峡谷</p><div class="right_bottom_img"></div></div></div><div class="back" id="back" style="display: none;"><ul class="back_top"><li class="back_not"></li><li class="back_not"></li><li style="background-color:#000000"><div class="back_img" ></div><div class="back_name">敌方英雄</div><div class="back_jineng">艾希</div></li><li style="background-color:#000000"><div class="back_img"></div><div class="back_name">敌方英雄</div><div class="back_jineng">艾希</div></li><li class="back_not"></li></ul><ul class="back_center"></ul><ul class="back_bottpm"><li class="back_not"></li><li class="back_not"></li><li style="background-color:#212121"><div class="back_img" id="img_back1" ></div><div class="back_name" >我方英雄</div><div class="back_jineng" id="back_jineng1"></div></li><li style="background-color:#212121"><div class="back_img" id="img_back2" ></div><div class="back_name">我方英雄</div><div class="back_jineng" id="back_jineng2"></div></li><li class="back_not"></li></ul></div><script type="text/javascript">var img=document.getElementById("img_ul");var imgCon=['hero_1.png','hero_2.png','hero_3.png','hero_4.png','hero_5.png','hero_6.png','hero_7.png','hero_8.png','hero_9.png','hero_10.png','hero_11.png','hero_12.png','hero_13.png','hero_14.png','hero_15.png','hero_16.png','hero_17.png','hero_18.png','hero_19.png','hero_20.png','hero_21.png','hero_22.png','hero_23.png','hero_24.png'];var imgName=['安妮','艾希','皎月','布隆','冒险家EZ','德玛西亚','妖姬','飞机','盲僧','瑞文','剑圣','深海泰坦','蜘蛛女王','机器人','酒桶','船长','剑姬','小鱼人','风女','光辉女郎','锤子','猪女','战争女神','小炮']var imgfunction=new Array();var imgNameArr=new Array();var left_img01=document.getElementById("left_img01");var left_img02=document.getElementById("left_img02");for(var i=0;i<imgCon.length;i++){var li=document.createElement("li");li.className="img_li";li.style.background="url(img/"+imgCon[i]+")";li.style.backgroundSize="100%";imgfunction[i]=li;li.value=i;imgfunction[i].onclick=function(){left_img01.value=this.value;left_img01.style.background=this.style.background;}img.appendChild(li);// console.log(img.getElementsByTagName("li")[i]);}var num=0;var miao=10;var backImg=new Array();var comfim=document.getElementById("comfim");comfim.onclick=function(){console.log(left_img01.style.background);if(left_img01.style.background!=""&&left_img02.style.background==""&&num==0){var left_id1=document.getElementById("left_id1");left_id1.style.backgroundColor="#CE681E";for(var i=0;i<imgCon.length;i++){imgfunction[i].onclick=function(){left_img02.value=this.value;left_img02.style.background=this.style.background;}} num=num+1;}else if(left_img01.style.background!=""&&left_img02.style.background!=""&num==1){var left_id2=document.getElementById("left_id2");left_id2.style.backgroundColor="#CE681E";console.log("进入第二个界面");this.innerText="点击进入游戏";num=num+1;console.log(num);// alert("请选择英雄！");// }}else if(left_img01.style.background!=""&&left_img02.style.background!=""&&num==2){console.log("进入函数");var setTime=setInterval(function(){var comfim=document.getElementById("comfim");if(miao>1){console.log(miao);miao=miao-1;comfim.innerText="还有"+miao+"秒开始游戏";}else{comfim.innerText="还有"+0+"秒开始游戏";clearInterval(setTime);tiao();}},300);}}function tiao(){var container=document.getElementById("container");container.style.display="none";var back=document.getElementById("back");var img_back1=document.getElementById("img_back1");var img_back2=document.getElementById("img_back2");var back_jineng1=document.getElementById("back_jineng1");var back_jineng2=document.getElementById("back_jineng2");img_back1.style.background=left_img01.style.background;img_back2.style.background=left_img02.style.background;back_jineng1.innerText=imgName[left_img01.value];back_jineng2.innerText=imgName[left_img02.value];back.style.display="block";}</script></body></html>
地址：我的LOL界面Github
CSS代码，可能不够完善，可以到我的github上面下载噢。..
谢谢支持。
