仿连连看写了个比较简单的代码人太2了居然花了两天。。。

最新推荐文章于 2023-06-21 18:01:30 发布

萧萧可乐

最新推荐文章于 2023-06-21 18:01:30 发布

阅读量400

点赞数

分类专栏： JS系列文章标签： border float function div

本文链接：https://blog.csdn.net/NIHAOX1/article/details/6928745

版权

JS系列专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
var pr,pdi,lt,lid,x=0,total=0;
function $(x){return(document.getElementById(x));}
window.οnlοad=function()
{
    var show=$("show");
    for(i=0;i<120;i++)
    {
        var nd=document.createElement("div");
        rnd=Math.ceil(Math.random()*5);
        nd.className = "A-"+rnd;
        nd.id="div"+i;
        nd.innerHTML="<a href='#' οnclick='xg(this.parentNode)'></a>";
        show.appendChild(nd);
    }
}
function xg(obj)
{
	if(total>=50)
	{
		alert('恭喜你已经赢得了比赛！！');
	}
    if(x==0)
    {
        pr=obj;
        x=1;
    }
    else
    {
        lt=obj;
        if(pr.className==lt.className)
        {
			if(pr.id!=lt.id)
			{
				total++;
				pr.style.visibility="hidden";
				lt.style.visibility="hidden";
			}
			else
			{
				pr=lt;
			}
        }
        else
        {
            pr=lt;
        }
        x=0;
    }
}

</script>
<style>
.A-1 a{width:50px; height:50px; border:1px #FFFFFF solid; float:left; display:block;  background:#FFFFFF;margin:5px;}
.A-1 a:hover{border:1px #000000 dashed;}
.A-2 a{width:50px; height:50px; border:1px #FFFFFF solid; float:left; display:block;  background:#FF0000;margin:5px;}
.A-2 a:hover{border:1px #000000 dashed;}
.A-3 a{width:50px; height:50px; border:1px #FFFFFF solid; float:left; display:block;  background:#0000FF;margin:5px;}
.A-3 a:hover{border:1px #000000 dashed;}
.A-4 a{width:50px; height:50px; border:1px #FFFFFF solid; float:left; display:block;  background:#FFFF00;margin:5px;}
.A-4 a:hover{border:1px #000000 dashed;}
.A-5 a{width:50px; height:50px; border:1px #FFFFFF solid; float:left; display:block; background:#FF00FF;margin:5px;}
.A-5 a:hover{border:1px #000000 dashed;}
</style>
<body bgcolor="#669900">
<div id="show" style="margin:0 auto; width:785px; height:auto; display:block;"></div>
</body>

做的时候很多东西没弄清楚

感谢论坛里的高手指点哈

多写代码才是提高的王道啊。。。。

原理也很简单就不说了

有疑问的话（应该不会有吧）

博客上留言我吧！！