1 先说下递归吧,有关 100 步梯级,每次走一到三步,求有多少走法?
一开始用枚举,例如算出走了 3*33 +1,然后求出其排列组合,这样搞得头都大
下面是正确的思路,但问题是递归太多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var steps = [];
function getSteps(n){
if(n==1){
return 1;
}
if(n==2){
return 2;
}
if(n==3){
return 4
}
return arguments.callee(n-1)+arguments.callee(n-2)+arguments.callee(n-3);
}
console.log(getSteps(10))
</script>
</head>
<body></body>
</html>
下面是优化版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var steps = [];
function getSteps(n){
for(var i = 0; i< n; i++){
switch(i){
case 0 : steps[i] = 1;break;
case 1 : steps[i] = 2;break;
case 2 : steps[i] = 4;break;
default: steps[i] = steps[i-1]+steps[i-2]+steps[i-3];
}
}
return steps[i-1]
}
console.log(getSteps(100))
</script>
</head>
<body></body>
</html>
2 排列组合算法,如求var arr =['A','B','c','D']; 取两个有多少种方法,
(1) 用树分法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style></style>
<script>
var arr =['A','B','c','D'];
function show(arr,num){
var resultNum = 0;
var iNow = 1;
if(num ==1){
return resultNum = arr.length;
}
function change(arr,iNow){
for(var i = 0; i< arr.length; i++){
var result = arr.concat();
result.splice(i,1);
if( num == iNow){
resultNum += result.length
}else{
change(result,iNow+1);
}
}
}
change(arr,iNow+1);
return resultNum;
}
var a = show(arr,1);
console.log(a);
</script>
</head>
<body>
</body>
</html>
(2)用数学的方法,A4取2之类的
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style></style>
<script>
function A(n,m){
return f(n)/f(n-m)
}
function C(n,m){
return f(n)/f(n-m)/f(m)
}
function f(n){
if(n==1){
return 1;
}
return n*f(n-1)
}
var a = A(4,2);
console.log(a);
var b = C(4,3);
console.log(b);
</script>
</head>
<body></body>
</html>
3 矩形数组的行列变换
<!doctype html>
<html>
<head lang="zh">
<meta charset="utf-8">
<title>灵域</title>
<meta name="renderer" content="webkit">
<script>
window.onload = function(){
var oList = document.querySelector('#list');
var aLi = oList.getElementsByTagName('li');
var size = 4;
var sizeGrid = 50;
var arr = [];
oList.style.width = (size*(sizeGrid+1) + 1) +'px';
oList.style.height = (size*(sizeGrid+1) + 1) +'px';
for(var i=0; i< size*size; i++){
var oLi = document.createElement('li');
oLi.style.width = sizeGrid+'px';
oLi.style.height = sizeGrid +'px';
oLi.innerHTML = i ;
arr.push(i);
oList.appendChild(oLi);
}
function changeXY(arr,size){
var newArr =[];
var iNow = 0;
(function(){
if(iNow == size){
return ;
}
for(var i =0;i<arr.length; i++){
if(i%size == iNow){
newArr.push(arr[i]);
}
}
iNow ++;
arguments.callee();
})()
return newArr;
}
arr = changeXY(arr,size);
for(var i = 0; i< arr.length; i++){
aLi[i].innerHTML = arr[i];
}
}
</script>
<style>
*{padding:0; margin:0;}
#list{border-left: 1px solid #000; border-top: 1px solid #000;}
#list li{float:left;border-right: 1px solid #000; border-bottom: 1px solid #000;}
li{list-style: none}
</style>
</head>
<body >
<ul id="list">
</ul>
</body>
</html>
可应于消i消乐的游戏,每行每列出现三个就消除
<!doctype html>
<html>
<head lang="zh">
<meta charset="utf-8">
<title>灵域</title>
<meta name="renderer" content="webkit">
<script>
window.onload = function(){
var oList = document.querySelector('#list');
var aLi = oList.getElementsByTagName('li');
var size = 7;
var sizeGrid = 70;
var arr = [];
oList.style.width = (size*sizeGrid) +'px';
oList.style.height = (size*sizeGrid) +'px';
for(var i=0; i< size*size; i++){
var oLi = document.createElement('li');
oLi.style.width = sizeGrid+'px';
oLi.style.height = sizeGrid +'px';
oLi.className = 'box'+Math.floor(Math.random()*6);
arr.push(i);
oList.appendChild(oLi);
}
findElem();
function findElem(){
var arr = [];
function addArr(aLi){
var preLi = aLi[0];
var iNum = 0;
for(var i = 0; i<aLi.length; i++){
if(preLi.className == aLi[i].className && i%size != 0){
iNum ++;
}else{
if(iNum >= 2){
for(var j = 0; j<=iNum; j++){
if(toCon(aLi[(i-1)-j])){
arr.unshift(aLi[(i-1)-j]);
}
}
}
iNum = 0;
}
preLi = aLi[i]
}
}
function toCon(li){
for(var i=0; i<arr.length;i++){
if(arr[i] == li){
return false
}
}
return true;
}
addArr(aLi);
addArr(changeXY(aLi,size));
for(var i = 0; i<aLi.length;i++){
aLi[i].style.opacity = 0.3;
}
for(var i = 0; i<arr.length;i++){
arr[i].style.opacity = 1;
}
}
function changeXY(arr,size){
var newArr =[];
var iNow = 0;
(function(){
if(iNow == size){
return ;
}
for(var i =0;i<arr.length; i++){
if(i%size == iNow){
newArr.push(arr[i]);
}
}
iNow ++;
arguments.callee();
})()
return newArr;
}
}
</script>
<style>
*{padding:0; margin:0;}
#list{margin: 20px auto; background:#000;}
#list li{float:left;}
#list li.box0{background: url(img/1.jpg);}
#list li.box1{background: url(img/2.jpg);}
#list li.box2{background: url(img/3.jpg);}
#list li.box3{background: url(img/4.jpg);}
#list li.box4{background: url(img/5.jpg);}
#list li.box5{background: url(img/6.jpg);}
li{list-style: none}
</style>
</head>
<body >
<ul id="list">
</ul>
</body>
</html>
接着就是螺旋矩阵
<!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{ margin:20px auto; border:1px #FFF solid; border-bottom:none; border-right:none; overflow:hidden; background-image:url(img/bg.jpg); background-size:cover;}
#ul1 li{ float:left; border:1px #FFF solid; border-top:none; border-left:none; background-size:cover;}
#ul1 li.active{ animation:0.5s linear infinite flash; -webkit-animation:0.5s linear infinite 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 size = 8;
var len = size * size;
var sizeGird = 50;
var row = 0;
var col = 0;
var min = 0;
var max = size - 1;
var arr = [];
var bgArr = [];
oUl.style.width = size * (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';
oUl.appendChild(oLi);
}
for(var i=0;i<len;i++){
//aLi[ row * size + col ].innerHTML = i;
arr.push( aLi[ row * size + col ] );
if( row == min && col < max ){
col = col + 1;
}
else if( col == max && row < max ){
row = row + 1;
}
else if( row == max && col > min ){
col = col - 1;
}
else if( col == min && row > min ){
row = row - 1;
}
if( row - 1 == min && col == min ){
min = min + 1;
max = max - 1;
}
}
for(var i=0;i<aLi.length;i++){
if(i%5==0){
var bgImage = 'url(img/'+ ( Math.floor(Math.random()*11+1) ) +'.jpg)';
arr[i].style.backgroundImage = bgImage;
bgArr.push([i,bgImage]);
}
}
run();
setInterval(run,1000);
function run(){
for(var i=0;i<aLi.length;i++){
aLi[i].style.backgroundImage = '';
aLi[i].className = '';
}
for(var i=0;i<bgArr.length;i++){
bgArr[i][0] = bgArr[i][0] + 1;
if(arr[ bgArr[i][0] ]){
arr[ bgArr[i][0] ].style.backgroundImage = bgArr[i][1];
arr[ bgArr[i][0] ].className = 'active';
arr[ bgArr[i][0] ].style.animationDelay = -Math.random()*2 + 's';
arr[ bgArr[i][0] ].style.webkitAnimationDelay = -Math.random()*2 + 's';
}
else{
bgArr.pop();
var bgImage = 'url(img/'+ ( Math.floor(Math.random()*11+1) ) +'.jpg)';
bgArr.unshift([0,bgImage]);
}
}
}
</script>
</body>
</html>
打乱数组的算法
Array.prototype.shuffle = function(){
var input = this;
for(var i = this.length-1;i>=0; i--){
var randomIndex = Math.floor(Math.random()*(i+1));
var value = input[randomIndex];
input[randomIndex] = input[i];
input[i] = value;
}
return input;
}
var arr = [1,2,3,4,5,6,7]
var t = arr.shuffle();
console.log(t);
<pre name="code" class="html">还有就是这样
arr.sort(function(){
return Math.random() - 0.5;
})
判断字符串是否回文
<!doctype html>
<html>
<head lang="zh">
<meta charset="utf-8">
<title>灵域</title>
<meta name="renderer" content="webkit">
<script>
var str = 'abc dcba';
function fn(str){
str = str.replace(/\W/g,''); // 去掉空格类的
var str2 = str.split('').reverse().join('');
if(str == str2){
return true;
}else{
return false;
}
}
console.log(fn(str));
console.log(fn('abcb'));
function fn2(str){
str = str.replace(/\W/g,'');
var len = str.length;
var halfLen = Math.floor(len/2);
for(var i= 0; i<halfLen; i++){
if(str[i]!=str[len-1-i]){
return false
}
}
return true
}
console.log(fn2(str));
console.log(fn2('abcb'));
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding: 0; margin: 0;}
body{text-align: center;}
li{ list-style: none;}
ul{margin: 30px auto 0px; border:1px solid #000; border-bottom: none; border-right: none;}
li{border:1px solid #000; border-top:none; border-left: 0; float: left;}
.sty1{background: green;}
.sty2{background: blue;}
.sty3{background: red;}
#input1{margin: 10px auto;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
var oBtn = document.getElementById('input1');
var beginLi = oUl.getElementsByClassName('sty1');
var endLi = oUl.getElementsByClassName('sty3');
var gridSize =20;
var openArr =[];
var closeArr =[];
var map =[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,2,0,0,3,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
];
init();
function init(){
createMap();
oBtn.οnclick=function(){
openFn();
}
}
function createMap(){
oUl.style.width= Math.sqrt(map.length)*(gridSize+1)+'px';
oUl.style.height= Math.sqrt(map.length)*(gridSize+1)+'px';
for(var i=0; i<map.length;i++){
var oLi = document.createElement('li');
oLi.style.width = gridSize+'px';
oLi.style.height = gridSize+'px';
oUl.appendChild(oLi);
if(map[i]==1){
oLi.className = 'sty1';
openArr.push(oLi);
}
if(map[i]==2){
oLi.className = 'sty2';
closeArr.push(oLi);
}
if(map[i]==3){
oLi.className = 'sty3';
}
}
}
function openFn(){
var nowLi = openArr.shift();
if( nowLi == endLi[0] ){
showLine();
//console.log(1)
return;
}
closeFn(nowLi);
findLi(nowLi);
openArr.sort(function(li1,li2){
return li1.num - li2.num;
});
openFn();
}
function closeFn(li){
closeArr.push(li)
}
function findLi(nowLi){
var arr=[];
for(var i=0; i< aLi.length;i++){
if(filter(aLi[i])){
arr.push(aLi[i])
}
}
function filter(li){
for(var i=0; i<closeArr.length;i++){
if(li == closeArr[i]){
return false
}
}
for(var i=0; i<openArr.length;i++){
if(li == openArr[i]){
return false
}
}
return true;
}
for(var i=0; i< arr.length; i++){
if(Math.abs(nowLi.offsetLeft-arr[i].offsetLeft)<=(gridSize+1) &&
Math.abs(nowLi.offsetTop-arr[i].offsetTop)<=(gridSize+1) ){
arr[i].num = f(arr[i]);
arr[i].parent = nowLi;
openArr.push(arr[i])
}
}
}
function showLine(){
var result = [];
var lastLi = closeArr.pop();
var iNow = 0;
findParent(lastLi);
function findParent(li){
result.unshift(li);
if( li.parent == beginLi[0] ){
return;
}
findParent(li.parent);
}
var timer = setInterval(function(){
result[iNow].style.background = 'red';
iNow++;
if(iNow == result.length){
clearInterval(timer);
}
},500);
}
function f(nodeLi){
return g(nodeLi)+h(nodeLi)
}
function g(nodeLi){
var a = beginLi[0].offsetLeft - nodeLi.offsetLeft;
var b = beginLi[0].offsetTop - nodeLi.offsetTop;
return Math.sqrt(a*a + b*b);
}
function h(nodeLi){
var a = endLi[0].offsetLeft - nodeLi.offsetLeft;
var b = endLi[0].offsetTop - nodeLi.offsetTop;
return Math.sqrt(a*a + b*b);
}
}
</script>
</head>
<body>
<ul id="ul1">
</ul>
<input type="button" id="input1" value="开始"/>
</body>
</html>
排列就不说,有快速排序法,二分法类的
快速排序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var array=[13,3,5,6,7,3,7,8,2,4,1,4,4,5,6,7,88,99,9]//冒泡相当于先确定最大的。。。//而选择先确定开始最小的。
//排序思想,将13与3比较,13大于3,换位置,变成[3,13,5,6,7,3,7,8,2,4,1,4,4,5,6,7,88,99,9],再将13与5比较,大于,再J+1;
function qSort(arr,low,high){
var i,j,x;
if(low<high){
i=low;
j=high;
x=arr[i];
while(i<j){
while( i<j && arr[j]>x){
j--;
}
if(i<j){
arr[i]=arr[j]
i++;
}
while( i<j && arr[i]<x){
i++;
}
if(i<j){
arr[j]=arr[i]
i--;
}
}
}
return arr
}
console.time('tt')
alert(qSort(array,0,3));
console.timeEnd('tt')
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var array=[13,3,5,6,7,3,7,8,2,4,1,4,4,5,6,7,88,99,9]//冒泡相当于先确定最大的。。。//而选择先确定开始最小的。
//排序思想,将13与3比较,13大于3,换位置,变成[3,13,5,6,7,3,7,8,2,4,1,4,4,5,6,7,88,99,9],再将13与5比较,大于,再J+1;
function bubbleSort(arr){
for(var i=arr.length-1;i>0;i--){
for(var j=0;j<i;j++){
if(arr[j]>=arr[j+1]){
var temp=0
temp=arr[j+1];
arr[j+1]=arr[j];
arr[j]=temp;
}
console.log(i+'j:'+j)
}
}
return arr
}
console.time('tt')
alert(bubbleSort(array));
console.timeEnd('tt')
</script>
</head>
<body>
</body>
</html>
二分法排序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function quickSort(arr){
if(arr.length<=1){
return arr;
}
var num=Math.floor(arr.length/2);
var numValue=arr.splice(num,1);
var left=[];
var right=[];
for(var i=0;i<arr.length;i++){
if(arr[i]<numValue){
left.push(arr[i]);
}else{
right.push(arr[i]);
}
}
return quickSort(left).concat([numValue],quickSort(right));
}
//quickSort([12,5,37,6,22,40])
alert(quickSort([1,2,9,54,56,5,6,57,44,36]))
</script>
</head>
<body>
</body>
</html>