微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > web前端 > js教程 > 正文

诘屈聱牙之javascript中国象棋_javascript技巧

php中文网

发布： 2016-05-16 19:15:35

原创

1148人浏览过

IE6.0 Only
非XHTML标准，可能IE 7.0也看不了....哈哈
蓝方先走

Trae国内版

Trae国内版

国内首款AI原生IDE，专为中国开发者打造

Trae国内版

815

Trae国内版

<style> 
* { font:24px arial, "宋体"; font-weight:bold; color:white; cursor:default; } 
table { table-layout:fixed; border-collapse:collapse; position:absolute; left:50px; top:50px; } 
td { width:80px; height:80px; border:1px solid silver; color:black; text-align:center; line-height:80px; }

img.i1 { width:78px; height:78px; } 
img.i2 { width:49px; height:49px; } 
img.i3 { width:25px; height:49px; }

.chessman_red { background:url(/attachments/2007/3/29/20070329_2187cc5e9def581951f2v22EfdUSXQ7J.jpg); width:50px; height:50px; line-height:50px; text-align:center; } 
.chessman_blue { background:url(/attachments/2007/3/29/20070329_5caa80c54f776b93bd582BwraVRWXf43.jpg); width:50px; height:50px; line-height:50px; text-align:center; } 
</style>
<script> 
var tb; 
var cch=new Array(); 
var his=new Array(); 
var players=["red","blue"]; 
var curPlayer=1;

window.onload=function(){ 
     
    document.onselectstart=function(){ return(false); } 
     
    document.onclick=do_click; 
    document.oncontextmenu=do_context; 
     
    tb=document.createElement("table"); 
    document.body.appendChild(tb); 
     
    for(var i=0;i<9;i++){ 
        r=tb.insertRow(); 
        if(i==4){ 
            c=r.insertCell(); 
            c.colSpan=8; 
            c.style.width="720px"; 
            c.style.fontSize="42px"; 
            c.style.fontFamily="隶书"; 
            c.innerText="楚   河                汉   界"; 
            continue; 
        } 
        for(var j=0;j<8;j++){ 
            c=r.insertCell(); 
        } 
    } 
     
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_3f2ffb6cdf0bda991381AOcfwLJOmIcK.jpg"; 
    tmp.className="i1"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="291"; 
        top="51"; 
    } 
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_fec757c6d7874546161f8TGsDqEABNts.jpg"; 
    tmp.className="i1"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="371"; 
        top="51"; 
    } 
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_fec757c6d7874546161f8TGsDqEABNts.jpg"; 
    tmp.className="i1"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="291"; 
        top="131"; 
    } 
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_3f2ffb6cdf0bda991381AOcfwLJOmIcK.jpg"; 
    tmp.className="i1"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="371"; 
        top="131"; 
    } 
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_3f2ffb6cdf0bda991381AOcfwLJOmIcK.jpg"; 
    tmp.className="i1"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="291"; 
        top="611"; 
    } 
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_fec757c6d7874546161f8TGsDqEABNts.jpg"; 
    tmp.className="i1"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="371"; 
        top="611"; 
    } 
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_fec757c6d7874546161f8TGsDqEABNts.jpg"; 
    tmp.className="i1"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="291"; 
        top="691"; 
    } 
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_3f2ffb6cdf0bda991381AOcfwLJOmIcK.jpg"; 
    tmp.className="i1"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="371"; 
        top="691"; 
    } 
     
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
    tmp.className="i2"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="106"; 
        top="186"; 
    } 
     
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
    tmp.className="i2"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="586"; 
        top="186"; 
    } 
     
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
    tmp.className="i2"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="106"; 
        top="586"; 
    } 
     
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
    tmp.className="i2"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="586"; 
        top="586"; 
    } 
     
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
    tmp.className="i2"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="186"; 
        top="266"; 
    } 
     
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
    tmp.className="i2"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="346"; 
        top="266"; 
    } 
     
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
    tmp.className="i2"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="506"; 
        top="266"; 
    } 
     
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
    tmp.className="i2"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="186"; 
        top="506"; 
    } 
     
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
    tmp.className="i2"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="346"; 
        top="506"; 
    } 
     
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
    tmp.className="i2"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="506"; 
        top="506"; 
    } 
     
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_0b05dbadff2eb90fdc79Ftu6O43rTus6.jpg"; 
    tmp.className="i3"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="50"; 
        top="266"; 
    } 
     
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_0b05dbadff2eb90fdc79Ftu6O43rTus6.jpg"; 
    tmp.className="i3"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="50"; 
        top="506"; 
    } 
     
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_f751e991e2d883fd916262Mzpct8ylkt.jpg"; 
    tmp.className="i3"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="665"; 
        top="266"; 
    } 
     
    tmp=new Image(); 
    tmp.src="/attachments/2007/3/29/20070329_f751e991e2d883fd916262Mzpct8ylkt.jpg"; 
    tmp.className="i3"; 
    document.body.appendChild(tmp); 
    with(tmp.style){ 
        position="absolute"; 
        left="665"; 
        top="506"; 
    } 
     
     
    createChessman("車",0,0,"red"); 
    createChessman("車",8,0,"red"); 
    createChessman("馬",1,0,"red"); 
    createChessman("馬",7,0,"red"); 
    createChessman("炮",1,2,"red"); 
    createChessman("炮",7,2,"red"); 
    createChessman("相",2,0,"red"); 
    createChessman("相",6,0,"red"); 
    createChessman("仕",3,0,"red"); 
    createChessman("仕",5,0,"red"); 
    createChessman("帅",4,0,"red"); 
    createChessman("兵",0,3,"red"); 
    createChessman("兵",2,3,"red"); 
    createChessman("兵",4,3,"red"); 
    createChessman("兵",6,3,"red"); 
    createChessman("兵",8,3,"red"); 
     
    createChessman("車",0,9,"blue"); 
    createChessman("車",8,9,"blue"); 
    createChessman("馬",1,9,"blue"); 
    createChessman("馬",7,9,"blue"); 
    createChessman("炮",1,7,"blue"); 
    createChessman("炮",7,7,"blue"); 
    createChessman("象",2,9,"blue"); 
    createChessman("象",6,9,"blue"); 
    createChessman("士",3,9,"blue"); 
    createChessman("士",5,9,"blue"); 
    createChessman("将",4,9,"blue"); 
    createChessman("卒",0,6,"blue"); 
    createChessman("卒",2,6,"blue"); 
    createChessman("卒",4,6,"blue"); 
    createChessman("卒",6,6,"blue"); 
    createChessman("卒",8,6,"blue"); 
     
     
}

function createChessman(text,x,y,player){ 
    var nd=document.createElement("div"); 
    nd.className="chessman_"+player; 
    nd.innerText=text; 
    nd.player=player; 
     
    nd.moveTo=chessman_moveTo; 
    nd.destory=chessman_destory; 
     
    document.body.appendChild(nd); 
     
    nd.moveTo(x,y,true); 
     
}

function chessman_moveTo(x,y,force){ 
    var mi, ma, mn; 
    if(!force){ 
        switch(this.innerText){ 
            case "車": 
                if(this.x!=x&&this.y!=y)return(false); 
                if(this.x==x){ 
                    mi=y>this.y?this.y:y; 
                    ma=y>this.y?y:this.y; 
                    for(var i=mi+1;i<ma;i++)if(cch[i*9+this.x])return(false); 
                }else{ 
                    mi=x>this.x?this.x:x; 
                    ma=x>this.x?x:this.x; 
                    for(var i=mi+1;i<ma;i++)if(cch[this.y*9+i])return(false); 
                } 
            break; 
            case "馬": 
                if(!((Math.abs(this.x-x)==2&&Math.abs(this.y-y)==1)||(Math.abs(this.x-x)==1&&Math.abs(this.y-y)==2)))return(false); 
                if(Math.abs(this.x-x)==2&&cch[this.y*9+(this.x+x)/2])return(false); 
                if(Math.abs(this.y-y)==2&&cch[(this.y+y)/2*9+this.x])return(false); 
            break; 
            case "士": case "仕": 
                if(x<3||x>5||(!(y<3||y>6))||Math.abs(this.x-x)!=1||Math.abs(this.y-y)!=1)return(false); 
            break; 
            case "相": 
                if(Math.abs(this.x-x)!=2||Math.abs(this.y-y)!=2||y>4)return(false); 
                if(cch[(this.y+y)/2*9+(this.x+x)/2])return(false); 
            break; 
            case "象": 
                if(Math.abs(this.x-x)!=2||Math.abs(this.y-y)!=2||y<5)return(false); 
                if(cch[(this.y+y)/2*9+(this.x+x)/2])return(false); 
            break; 
            case "帅": case "将": 
                if(x<3||x>5||(!(y<3||y>6))||(!((Math.abs(this.x-x)==1&&Math.abs(this.y-y)==0)||(Math.abs(this.x-x)==0&&Math.abs(this.y-y)==1))))return(false); 
            break; 
            case "兵": 
                //if(curPlayer%2==0){ 
                    if(y<5){ 
                        if(y-this.y!=1)return(false); 
                    }else{ 
                        if(!((y-this.y==1&&x==this.x)||(y==this.y&&Math.abs(this.x-x)==1)))return(false); 
                    } 
                    break; 
                //}else{ 
                    if(y>4){ 
                        if(y-this.y!=-1)return(false); 
                    }else{ 
                        if(!((y-this.y==-1&&x==this.x)||(y==this.y&&Math.abs(this.x-x)==1)))return(false); 
                    } 
                //} 
            break; 
            case "卒": 
                //if(curPlayer%2==0){ 
                    if(y>4){ 
                        if(y-this.y!=-1)return(false); 
                    }else{ 
                        if(!((y-this.y==-1&&x==this.x)||(y==this.y&&Math.abs(this.x-x)==1)))return(false); 
                    } 
                    break; 
                //}else{ 
                    if(y<5){ 
                        if(y-this.y!=1)return(false); 
                    }else{ 
                        if(!((y-this.y==1&&x==this.x)||(y==this.y&&Math.abs(this.x-x)==1)))return(false); 
                    } 
                     
                //} 
            break; 
            case "炮": 
                if(this.x!=x&&this.y!=y)return(false); 
                if(cch[y*9+x]&&cch[y*9+x].player!=this.player){ 
                    mn=0; 
                    if(this.x==x){ 
                        mi=y>this.y?this.y:y; 
                        ma=y>this.y?y:this.y; 
                        for(var i=mi+1;i<ma;i++)if(cch[i*9+this.x])mn++; 
                        if(mn!=1)return(false); 
                    }else{ 
                        mi=x>this.x?this.x:x; 
                        ma=x>this.x?x:this.x; 
                        for(var i=mi+1;i<ma;i++)if(cch[this.y*9+i])mn++; 
                        if(mn!=1)return(false); 
                    } 
                }else{ 
                    if(this.x==x){ 
                        mi=y>this.y?this.y:y; 
                        ma=y>this.y?y:this.y; 
                        for(var i=mi+1;i<ma;i++)if(cch[i*9+this.x])return(false); 
                    }else{ 
                        mi=x>this.x?this.x:x; 
                        ma=x>this.x?x:this.x; 
                        for(var i=mi+1;i<ma;i++)if(cch[this.y*9+i])return(false); 
                    } 
                } 
            break; 
            case "": 
             
            break; 
        } 
    } 
     
    cch[this.y*9+this.x]=null; 
    cch[y*9+x]=this; 
     
    if(!force)his.push("move "+this.player+" "+this.innerText+" "+this.x+","+this.y+" "+x+","+y); 
    this.style.position="absolute"; 
    this.style.left=25+x*80; 
    this.style.top=25+y*80; 
    this.x=x; 
    this.y=y; 
    return(true); 
}

function chessman_destory(){ 
    var tmp; 
    his.push("destory "+this.player+" "+this.innerText+" "+this.x+","+this.y); 
    tmp=document.createElement("div"); 
    tmp.className="chessman_"+this.player; 
    tmp.innerText=this.innerText; 
    tmp.style.float="left"; 
    eval("d_his_"+this.player).appendChild(tmp); 
     
    this.parentNode.removeChild(this); 
     
}

function exchange(){ 
    var x, y; 
    var ccch=new Array(); 
    for(var i=0;i<cch.length;i++){ 
        if(!cch[i])continue; 
        x=i%9; 
        y=parseInt(i/9); 
        ccch[(9-y)*9+x]=cch[i]; 
    } 
    for(var i=0;i<ccch.length;i++){ 
        if(!ccch[i])continue; 
        x=i%9; 
        y=parseInt(i/9); 
        ccch[i].moveTo(x,y,true); 
    } 
    cch=ccch; 
}

function do_click(){ 
    var x, y; 
    var o=event.srcElement; 
     
    if(o.player){ 
        if(document.currentChessman){ 
            if(document.currentChessman.player==o.player){ 
                document.currentChessman.style.border=""; 
                document.currentChessman=o; 
                document.currentChessman.style.border="1px solid "+document.currentChessman.player; 
            }else{ 
                if(!document.currentChessman.moveTo(o.x,o.y))return; 
                o.destory(); 
                document.currentChessman.style.border=""; 
                document.currentChessman=null; 
                //exchange(); 
                curPlayer++; 
            } 
        }else{ 
            if(o.player!=players[curPlayer%2])return; 
            document.currentChessman=o; 
            document.currentChessman.style.border="1px solid "+document.currentChessman.player; 
        } 
    }else{ 
        if(document.currentChessman){ 
            if(((event.x-50)%80>25&&(event.x-50)%80<55)||((event.y-50)%80>25&&(event.y-50)%80<55))return; 
            x=Math.round((event.x+document.body.scrollLeft-50)/80); 
            y=Math.round((event.y+document.body.scrollTop-50)/80); 
            if(x>-1&&x<9&&y>-1&&y<10){ 
                if(!document.currentChessman.moveTo(x,y))return; 
                document.currentChessman.style.border=""; 
                document.currentChessman=null; 
                //exchange(); 
                curPlayer++; 
            } 
        } 
    } 
}

function do_context(){ 
    if(document.currentChessman){ 
        document.currentChessman.style.border=""; 
        document.currentChessman=null; 
        return(false); 
    } 
}

function undo(){ 
    var o, s, t, p, x1, x2, x3, y1, y2, y3; 
    if(his.length==0)return; 
    s=his.pop().split(" "); 
    if(s[0]=="move"){ 
        x1=Number(s[3].split(",")[0]); 
        y1=Number(s[3].split(",")[1]); 
        x2=Number(s[4].split(",")[0]); 
        y2=Number(s[4].split(",")[1]); 
         
        o=cch[y2*9+x2]; 
        o.moveTo(x1,y1,true); 
        curPlayer--; 
         
    }else if(s[0]=="destory"){ 
        p=s[1]; 
        t=s[2]; 
        x1=Number(s[3].split(",")[0]); 
        y1=Number(s[3].split(",")[1]); 
         
        s=his.pop().split(" "); 
        x2=Number(s[3].split(",")[0]); 
        y2=Number(s[3].split(",")[1]); 
        x3=Number(s[4].split(",")[0]); 
        y3=Number(s[4].split(",")[1]); 
         
        o=cch[y3*9+x3]; 
        o.moveTo(x2,y2,true); 
        curPlayer--; 
         
        createChessman(t,x1,y1,p); 
    } 
}

</script><input type="button" value="重开" onclick="window.location.reload();" style="position:absolute; left:800px;"><input type="button" value="悔棋" onclick="undo();" style="position:absolute; left:900px;"><div id="d_his_red" style="font-size:12px; color:#333;position:absolute; left:800px; top:450px; width:120px; height:300px; overflow:auto;"></div> 
<div id="d_his_blue" style="font-size:12px; color:#333;position:absolute; left:800px; top:100px; width:120px; height:300px; overflow:auto;"></div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

大家都在看：

JavaScript异步请求的健壮性：实现网络请求重试机制 React中实现用户详情的按需显示与隐藏 JavaScript代码分割与懒加载技术 JavaScript数据库操作与ORM框架深度使用动态内容中jQuery函数触发与事件委托教程

java速学教程(入门到精通)

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

上一篇：JavaScript进阶教程(第二课续)第1/2页_基础知识下一篇：JavaScript进阶教程(第二课)第1/3页_基础知识

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

理解JavaScript中的Iterator和Generator_javascript es6 Iterator是遍历数据的统一接口，具有next()方法返回{value,done}，实现后可被for...of和扩展运算符使用；Generator是生成器函数，通过function*定义并使用yield暂停执行，调用后返回一个迭代器对象，能按需生成值。

2025-11-11 09:02:03

233

前端自动化测试与JavaScript端到端测试前端自动化测试涵盖单元、集成和端到端（E2E）测试，其中E2E通过模拟真实用户操作验证核心业务流程，确保跨页面与服务的正确性。主流工具包括Cypress、Puppeteer+Jest和Playwright，后者因多浏览器支持更受推荐。实施时应聚焦关键路径、保持用例独立、采用PageObject模式、合理设置等待，并集成CI/CD。E2E不替代单元测试，而是提供高置信度发布保障，需持续维护以发挥长期价值。

2025-11-11 08:49:16

784

JS函数怎样定义工厂函数_JS工厂函数定义与对象创建方法工厂函数是一种设计模式，通过普通函数创建并返回对象，无需使用new关键字。它能封装对象的创建逻辑，避免重复代码，实现复用。例如，createUser(name)函数可生成具有name和greet方法的对象，简化了多个相似对象的创建过程。相比构造函数和类，工厂函数调用更安全，支持私有变量（借助闭包）、参数验证和灵活返回不同类型对象。如createCounter(initial)可隐藏count变量，仅暴露increment和getValue方法，增强封装性。现代JavaScript开发中，工厂函数

2025-11-11 08:45:02

853

JavaScript剪贴板API安全使用 JavaScript剪贴板API需在用户触发事件中使用，如点击操作，禁止静默调用；2.必须在HTTPS或localhost安全上下文中运行；3.读取或写入前应通过PermissionsAPI检查权限；4.避免滥用及处理敏感数据，确保用户知情并主动确认，提升安全性与体验。

2025-11-11 01:43:30

922

js some方法是什么 some()方法用于检测数组中是否有至少一个元素满足条件，返回布尔值。它不修改原数组，空数组返回false。语法为arr.some(callback,thisArg)，callback可接收element、index、array三个参数，thisArg指定执行上下文。示例包括检查数字是否大于10或字符串是否包含特定字符。应用场景有表单验证、权限判断和数据预检。该方法一旦找到符合条件的元素即刻返回true，停止遍历，性能较优。

2025-11-10 23:59:02

364

怎样通过js脚本制作颜色选择器_js颜色选择器功能脚本编写方法答案：使用HTML5的input[type=color]可快速实现颜色选择，通过监听input事件实时更新预览；也可自定义HSV/RGB调色板，结合CSS渐变与鼠标事件获取坐标并计算颜色值；还能利用canvas绘制图像，通过getImageData实现图像取色；最后可将颜色转换为十六进制、RGB或HSL格式输出，核心在于颜色模型与DOM事件的结合。

2025-11-10 23:36:02

169

JS函数如何定义函数循环逻辑_JS函数循环逻辑定义与循环函数结合使用答案：在JS中可通过函数内写循环、循环中调用函数、使用map等高阶函数及递归处理重复逻辑。例如用for循环遍历数组并打印元素，或将格式化函数在循环中调用；map方法可简化数组转换；递归则适合分治类问题，如计算阶乘。

2025-11-10 23:29:13

803

JavaScript函数柯里化的应用与实现_javascript技巧柯里化是将多参数函数转换为单参数函数链的技术，通过闭包逐步接收参数并返回新函数，直至最终执行。它提升代码复用性与组合能力，适用于事件处理、配置生成和表单验证等场景。例如add(5)(3)返回8，实现方式为递归收集参数直到满足原函数所需数量。相比bind，柯里化更侧重参数分步传递而非上下文绑定，结合箭头函数可写出更简洁的函数式代码。

2025-11-10 23:11:03

723

JS注解怎么标注可选属性_ JS对象可选属性的注解书写规范在JavaScript中通过JSDoc或TypeScript可标注对象可选属性：1.JSDoc用[prop]表示可选，如@typedef{Object}UserConfig@property{string}[email]；2.TypeScript用prop?:type，如age?:number；应根据项目选择规范以提升可读性和维护性。

2025-11-10 22:58:04

534

前端路由原理与Hash、History模式实现_js单页应用单页应用通过前端路由实现无刷新切换，核心是Hash和History两种模式。1.Hash模式利用URL中#后的部分变化触发hashchange事件，兼容性好但URL不美观；2.History模式使用pushState和replaceStateAPI操作浏览器历史记录，配合popstate事件监听，可实现干净的URL路径，需服务端配置fallback以避免404。两者选择取决于浏览器兼容性、URL美观需求及服务端支持情况，理解其原理有助于掌握VueRouter、ReactRouter等框架路由机制

2025-11-10 22:54:04

895

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部