算法核心思想
回溯算法
递归实现
程序实现
坐标系
循环递归
回溯
计数
收集位置
特效添加
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> *{ margin:0; padding:0;} li{ list-style:none;} #ul1{ height:auto; margin:20px auto; overflow:hidden; border:1px #FFF solid; border-right:none; border-bottom:none; background-image:url(img/bg.jpg); background-size:cover;} #ul1 li{ float:left; border:1px #FFF solid;border-left:none; border-top:none; background-size:cover;} #ul1 li.active{ animation:.5s infinite linear flash; -webkit-animation:.5s infinite linear flash;} @keyframes flash{ 0%{ opacity:0.1;} 50%{ opacity:1;} 100%{ opacity:0.1;} } @-webkit-keyframes flash{ 0%{ opacity:0.1;} 50%{ opacity:1;} 100%{ opacity:0.1;} } </style> </head> <body> <ul id="ul1"> </ul> <script> var oUl = document.getElementById('ul1'); var aLi = oUl.getElementsByTagName('li'); var sizeGird = 50; var num = 8; var iCount = 0; var posArr = []; var posArrAll = []; init(); function init(){ createGird(); setQueen(0); //console.log( posArrAll ); showImg(); } function createGird(){ var len = num * num; oUl.style.width = num * (sizeGird + 1) + 'px'; for(var i=0;i<len;i++){ var oLi = document.createElement('li'); oLi.style.width = sizeGird + 'px'; oLi.style.height = sizeGird + 'px'; oLi.index = -1; //oLi.innerHTML = oLi.index; oUl.appendChild(oLi); } for(var i=0;i<num;i++){ for(var j=0;j<num;j++){ //i j num aLi[ i*num + j ].x = j; aLi[ i*num + j ].y = i; //aLi[ i*num + j ].innerHTML = j + ',' + i; } } } function setQueen(iQueen){ if( iQueen == num ){ posArrAll.push( posArr.concat() ); iCount++; return; } for(var i=0;i<num;i++){ if( aLi[ iQueen*num + i ].index == -1 ){ aLi[ iQueen*num + i ].index = iQueen; //aLi[ iQueen*num + i ].innerHTML = iQueen; posArr.push(aLi[ iQueen*num + i ]); var x = aLi[ iQueen*num + i ].x; var y = aLi[ iQueen*num + i ].y; for(var j=0;j<aLi.length;j++){ if( aLi[j].index == -1 && (aLi[j].x == x || aLi[j].y == y || aLi[j].x - aLi[j].y == x - y || aLi[j].x + aLi[j].y == x + y) ){ aLi[j].index = iQueen; //aLi[j].innerHTML = iQueen; } } setQueen( iQueen + 1 ); //回溯 posArr.pop(); for(var j=0;j<aLi.length;j++){ if( aLi[j].index == iQueen ){ aLi[j].index = -1; } } } } } function showImg(){ change(); setInterval(change,2000); function change(){ for(var i=0;i<aLi.length;i++){ aLi[i].style.backgroundImage = ''; aLi[i].className = ''; } var randomLi = posArrAll[ Math.floor(posArrAll.length * Math.random()) ]; for(var i=0;i<randomLi.length;i++){ randomLi[i].style.backgroundImage = 'url(img/'+ Math.floor((Math.random()*11 + 1)) +'.jpg)'; randomLi[i].className = 'active'; randomLi[i].style.animationDelay = -Math.random()*2 + 's'; randomLi[i].style.webkitAnimationDelay = -Math.random()*2 + 's'; } } } </script> </body> </html>