寻找徐峥小游戏

最新推荐文章于 2020-09-15 17:50:00 发布

chenjungang0115

最新推荐文章于 2020-09-15 17:50:00 发布

阅读量145

点赞数

原文链接：https://my.oschina.net/newSpring/blog/742216

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
*{
margin:0; padding:0;}
#wrap{
width:600px; height:650px; border:1px solid #000; margin:0 auto;position:relative;}
#time{
width:110px; height:50px; font-size:20px; line-height:50px; text-align:center; float:left}
#score{
width:110px; height:50px; font-size:20px; line-height:50px; text-align:center; float:right}
#content{
width:600px; height:600px; clear:both; display:flex; flex-wrap:wrap}
#content>img{
width:100%; height:100%}
#menuGame{
width:600px; height:650px; position:absolute; top:0; left:0; background:rgba(0,0,0,0.2);}
#start{
width:200px; height:60px; border-radius:10px; background:red; color:#fff; text-align:center; font-size:30px; line-height:60px; position:absolute;
top:50%; left:50%; margin-left:-100px; margin-top:-30px; cursor:pointer;}

</style>
</head>

   var oTime=document.getElementById("time");
   var oScore=document.getElementById("score");
   var oContent=document.getElementById("content");
   var oMenuGame=document.getElementById("menuGame");
   var oStare=document.getElementById("start");
   var timer;
   oStare.οnclick=function(){
       oMenuGame.style.display="none";
       var time=30;
       timer=setInterval(function(){
           time--;
           oTime.innerHTML="剩余时间:"+time;
           if(time==0){
               alert("亲，您的分数为"+(scores-1)+"分")
               clearInterval(timer);
               oMenuGame.style.display="block";
               oTime.innerHTML="剩余时间:30";
               oStare.innerHTML="重新开始";
               oScore.innerHTML="分数:0";
               oContent.innerHTML="";
               var img=document.createElement("img");
               img.src="http://img0.ph.126.net/zwgKZ9wWFqFgieMHux4lqg==/6631494376210670232.jpg";
               oContent.appendChild(img);
               img.οnclick=function(){
               addScoreAndImage();

               }
           }
       },1000);

       oContent.firstElementChild.οnclick=addScoreAndImage;
       var scores=1;
       function addScoreAndImage(){

var allImgs = oContent.children;
for (var i = 0;i < allImgs.length;i++) {
oContent.removeChild(allImgs[i]);
i--;
}

           oScore.innerHTML="分数:"+scores;
           scores++;
           var count=Math.pow(scores,2);

           for(var j=0;j<count;j++){
               var img=document.createElement("img");
               img.src="http://img2.ph.126.net/PbY6MKWJrkB_HpzqoMz4KA==/6631742865838549361.jpg";
               img.style.width=(100/scores)+"%";
               img.style.height=(100/scores)+"%";
               oContent.appendChild(img);
           }
           var ranNum = Math.floor(Math.random() * count);
           var imgTem=oContent.children[ranNum];
           imgTem.src="http://img0.ph.126.net/zwgKZ9wWFqFgieMHux4lqg==/6631494376210670232.jpg";
           imgTem.οnclick=function(){
              addScoreAndImage();
           }
       }
   }

</script>
</body>
</html>

转载于:https://my.oschina.net/newSpring/blog/742216

chenjungang0115

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
寻找徐峥小游戏

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> *{ margin:0; padding:0;} #wr...
复制链接

扫一扫