javascript_javascript 스킬을 기반으로 한 문장 뒤집기 웹 버전 미니게임 구현-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

javascript_javascript 스킬을 기반으로 한 문장 뒤집기 웹 버전 미니게임 구현

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:08 PM

이 글의 예시는 참고용으로 게임의 문장 플립 웹 버전의 js 구현을 공유합니다.

렌더링:

구현 아이디어:

타자력과 기억력을 테스트하는 퍼즐 게임입니다.
1. 먼저 텍스트가 표시됩니다
2.잠깐 후에 뒷면이 표시됩니다
3. 입력창에 입력된 텍스트와 해당 텍스트가 전면에 표시됩니다

구체 코드:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>句子翻牌</title>
<link href="css/reset.css" rel="stylesheet" />
<link href="css/fanpai.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
 //ht5 dom
 var otestAudio=document.getElementById("test-audio");
 //data
 var data_all=[];
 data_all[0]=[
 {id:'0',text:'我,爱你,吗,？',is:true,count:3,'url':'audio/1.mp3'},
 {id:'1',text:'亲爱的,你,好吗,？',is:true,count:3,'url':'audio/2.mp3'},
 {id:'2',text:'不知道,啊,！',is:true,count:2,'url':'audio/3.mp3'},
 {id:'3',text:'谢谢,你,说的,。',is:true,count:3,'url':'audio/4.mp3'},
 {id:'4',text:'也许,对吧,！',is:true,count:2,'url':'audio/5.mp3'},
 {id:'5',text:'听,不懂,啊,！',is:true,count:3,'url':'audio/1.mp3'},
 {id:'6',text:'天天,向上,，,好好,学习,。',is:true,count:4,'url':'audio/2.mp3'},
 {id:'7',text:'你,说的,不,对,！',is:true,count:4,'url':'audio/3.mp3'},
 {id:'8',text:'不要,问,为什么,！',is:true,count:3,'url':'audio/4.mp3'},
 {id:'9',text:'很,难,理解,你的话,。',is:true,count:4,'url':'audio/5.mp3'},
 {id:'10',text:'你,不爱你,吗,？',is:true,count:3,'url':'audio/1.mp3'},
 {id:'11',text:'妈妈,你,好吗,？',is:true,count:3,'url':'audio/2.mp3'},
 {id:'12',text:'想,知道,啊,！',is:true,count:3,'url':'audio/3.mp3'},
 {id:'13',text:'你,说的,。',is:true,count:2,'url':'audio/4.mp3'},
 {id:'14',text:'真的,也许,对吧,！',is:true,count:3,'url':'audio/5.mp3'},
 {id:'15',text:'完全,听,不懂,啊,！',is:true,count:4,'url':'audio/1.mp3'},
 {id:'16',text:'要,努力,读书。',is:true,count:3,'url':'audio/2.mp3'},
 {id:'17',text:'他,说的,不,对,！',is:true,count:4,'url':'audio/3.mp3'},
 {id:'18',text:'请,问,快了吗,！',is:true,count:4,'url':'audio/4.mp3'},
 {id:'19',text:'哈哈,难,理解,你的话,。',is:true,count:4,'url':'audio/5.mp3'} 
 ];
 data_all[1]=[
 {id:'0',text:'你说出,你的,问题,去,改进,。',is:true,count:5,'url':'audio/1.mp3'},
 {id:'1',text:'我,怎么,知道,你,好不好,？',is:true,count:5,'url':'audio/2.mp3'},
 {id:'2',text:'不要,问,为什么,好吗,？',is:true,count:4,'url':'audio/3.mp3'},
 {id:'3',text:'就,你,说的,是,对的,。',is:true,count:5,'url':'audio/4.mp3'},
 {id:'4',text:'大家,明天,一起,出去,郊游,。',is:true,count:5,'url':'audio/5.mp3'},
 {id:'5',text:'你,一定,要帅,，,一定,要低调,。',is:true,count:5,'url':'audio/1.mp3'},
 {id:'6',text:'你,去了,你二大爷,家,了吗,？',is:true,count:5,'url':'audio/2.mp3'},
 {id:'7',text:'天南,海北,，,众人,皆是,。',is:true,count:4,'url':'audio/3.mp3'},
 {id:'8',text:'天与海,的,距离,就是,不爱你,。',is:true,count:5,'url':'audio/4.mp3'},
 {id:'9',text:'不知道,无罪,，,坚强,些,。',is:true,count:4,'url':'audio/5.mp3'},
 {id:'10',text:'大中华,儿女,，,华夏,子孙,。',is:true,count:4,'url':'audio/1.mp3'},
 {id:'11',text:'儿时,的,时光,是,美好的,。',is:true,count:5,'url':'audio/2.mp3'},
 {id:'12',text:'哪里,那么,多,秘密,。',is:true,count:4,'url':'audio/3.mp3'},
 {id:'13',text:'有,你,就是,晴天,，,对吧,！',is:true,count:5,'url':'audio/4.mp3'},
 {id:'14',text:'说的,和,真的,似的,，,太假了,！',is:true,count:5,'url':'audio/5.mp3'},
 {id:'15',text:'呵呵,，,净,瞎扯淡,！',is:true,count:3,'url':'audio/1.mp3'},
 {id:'16',text:'行了,，,就,你,知道,？',is:true,count:4,'url':'audio/2.mp3'},
 {id:'17',text:'好好,学习,，,才能,越来越好,。',is:true,count:4,'url':'audio/3.mp3'},
 {id:'18',text:'真的,无所依,，,孤独的,我,。',is:true,count:4,'url':'audio/4.mp3'},
 {id:'19',text:'你知道,的话,就,说,出来嘛,！',is:true,count:5,'url':'audio/5.mp3'} 
 ];
 data_all[2]=[
 {id:'0',text:'我,爱你,吗,？',is:true,count:3,'url':'audio/1.mp3'},
 {id:'1',text:'亲爱的,你,好吗,？',is:true,count:3,'url':'audio/2.mp3'},
 {id:'2',text:'不知道,啊,！',is:true,count:2,'url':'audio/3.mp3'},
 {id:'3',text:'谢谢,你,说的,。',is:true,count:3,'url':'audio/4.mp3'},
 {id:'4',text:'也许,对吧,！',is:true,count:2,'url':'audio/5.mp3'},
 {id:'5',text:'听,不懂,啊,！',is:true,count:3,'url':'audio/1.mp3'},
 {id:'6',text:'天天,向上,，,好好,学习,。',is:true,count:4,'url':'audio/2.mp3'},
 {id:'7',text:'你,说的,不,对,！',is:true,count:4,'url':'audio/3.mp3'},
 {id:'8',text:'不要,问,为什么,！',is:true,count:3,'url':'audio/4.mp3'},
 {id:'9',text:'很,难,理解,你的话,。',is:true,count:4,'url':'audio/5.mp3'},
 {id:'10',text:'你,不爱你,吗,？',is:true,count:3,'url':'audio/1.mp3'},
 {id:'11',text:'妈妈,你,好吗,？',is:true,count:3,'url':'audio/2.mp3'},
 {id:'12',text:'想,知道,啊,！',is:true,count:3,'url':'audio/3.mp3'},
 {id:'13',text:'你,说的,。',is:true,count:2,'url':'audio/4.mp3'},
 {id:'14',text:'真的,也许,对吧,！',is:true,count:3,'url':'audio/5.mp3'},
 {id:'15',text:'完全,听,不懂,啊,！',is:true,count:4,'url':'audio/1.mp3'},
 {id:'16',text:'要,努力,读书。',is:true,count:3,'url':'audio/2.mp3'},
 {id:'17',text:'他,说的,不,对,！',is:true,count:4,'url':'audio/3.mp3'},
 {id:'18',text:'请,问,快了吗,！',is:true,count:4,'url':'audio/4.mp3'},
 {id:'19',text:'哈哈,难,理解,你的话,。',is:true,count:4,'url':'audio/5.mp3'} 
 ];
 data_all[3]=[
 {id:'0',text:'你说出,你的,问题,去,改进,。',is:true,count:5,'url':'audio/1.mp3'},
 {id:'1',text:'我,怎么,知道,你,好不好,？',is:true,count:5,'url':'audio/2.mp3'},
 {id:'2',text:'不要,问,为什么,好吗,？',is:true,count:4,'url':'audio/3.mp3'},
 {id:'3',text:'就,你,说的,是,对的,。',is:true,count:5,'url':'audio/4.mp3'},
 {id:'4',text:'大家,明天,一起,出去,郊游,。',is:true,count:5,'url':'audio/5.mp3'},
 {id:'5',text:'你,一定,要帅,，,一定,要低调,。',is:true,count:5,'url':'audio/1.mp3'},
 {id:'6',text:'你,去了,你二大爷,家,了吗,？',is:true,count:5,'url':'audio/2.mp3'},
 {id:'7',text:'天南,海北,，,众人,皆是,。',is:true,count:4,'url':'audio/3.mp3'},
 {id:'8',text:'天与海,的,距离,就是,不爱你,。',is:true,count:5,'url':'audio/4.mp3'},
 {id:'9',text:'不知道,无罪,，,坚强,些,。',is:true,count:4,'url':'audio/5.mp3'},
 {id:'10',text:'大中华,儿女,，,华夏,子孙,。',is:true,count:4,'url':'audio/1.mp3'},
 {id:'11',text:'儿时,的,时光,是,美好的,。',is:true,count:5,'url':'audio/2.mp3'},
 {id:'12',text:'哪里,那么,多,秘密,。',is:true,count:4,'url':'audio/3.mp3'},
 {id:'13',text:'有,你,就是,晴天,，,对吧,！',is:true,count:5,'url':'audio/4.mp3'},
 {id:'14',text:'说的,和,真的,似的,，,太假了,！',is:true,count:5,'url':'audio/5.mp3'},
 {id:'15',text:'呵呵,，,净,瞎扯淡,！',is:true,count:3,'url':'audio/1.mp3'},
 {id:'16',text:'行了,，,就,你,知道,？',is:true,count:4,'url':'audio/2.mp3'},
 {id:'17',text:'好好,学习,，,才能,越来越好,。',is:true,count:4,'url':'audio/3.mp3'},
 {id:'18',text:'真的,无所依,，,孤独的,我,。',is:true,count:4,'url':'audio/4.mp3'},
 {id:'19',text:'你知道,的话,就,说,出来嘛,！',is:true,count:5,'url':'audio/5.mp3'} 
 ];
 
 var guan_arr=[
 {n:'第一关',c:'正常语序'},
 {n:'第二关',c:'熟练熟悉'},
 {n:'第三关',c:'注意：词语打乱了'},
 {n:'第四关',c:'全神贯注'},
 {n:'第五关',c:'困难语序'}
 ];
 //base
 var current_guan=1;//当前所在关卡
 var current_index=0;//答对记录数
 var dong=null;//全局动画
 var alltime=300;//答题时间
 var iskey=true;//是否按键可用
 var count=0;//词语记录数
 var subindex=null;//子记录键
 var starttime=0;//开始时作答时间
 //event
 $(".game-fp-start").click(function(){
 $(".game-fp-name").hide();
 $(".game-fp-sm").hide();
 $(".game-fp-start").hide();
 init();
 });
 $(".game-fp-tools-see").children("dt").click(function(){
 funopen();
 setTimeout(function(){
 funclose();
 },2000); 
 });
 $("#game-fp-input").children("input").keyup(function(){ 
 if(iskey){
 var stext=$(this).val();
 matchval(stext);
 next($("#game-fp-words").children("div").length);
 }else{};  
 });
 $(".game-fp-tools-pause").click(function(){
 if($("#game-fp-input").children("input").prop('disabled')==false){
 clearInterval(dong);
 $("#game-fp-input").children("input").attr('disabled','disabled'); 
 $("#game-fp-pause").show();
 }else{} 
 });
 $("#game-fp-sta").click(function(){ 
 $("#game-fp-input").children("input").removeAttr('disabled'); 
 $("#game-fp-pause").hide();
 $("#game-fp-input").children("input").focus();
 inctime();
 }); 
 $("#game-fp-reset-btn").click(function(){ 
 current_guan=1;
 current_index=0;
 alltime=300;
 iskey=true;
 subindex=null; 
 count=0;
 for(var i=0;i<data_all.length;i++){
 for(var j=0;j<data_all[i].length;j++){
 data_all[i][j]['is']=true;
 }; 
 }; 
 $("#game-fp-reset").hide();
 init();
 }); 
 $(".game-fp-tools-skip").children("dt").click(function(){ 
 if($("#game-fp-input").children("input").prop('disabled')==false){
 if($(this).children("span").html()<=0){
 
 }else{
 $(this).children("span").html($(this).children("span").html()-1);
 $("#game-fp-words").children().remove();
 fundata();
 }; 
 }else{} 
 }); 
 $(window).keyup(function(event){
 switch (event.which)
 {
 case 35://end
 $(".game-fp-tools-pause").trigger("click");
 break;
 case 36://hpme
 
 break;
 case 33://pageup
 $(".game-fp-tools-see").children("dt").trigger("click");
 break;
 case 34://pagedown
 $(".game-fp-tools-skip").children("dt").trigger("click");
 break;
 } 
 });
 //handel
 function matchval(stext){
 var real=stext;
 var delay=0;
 $("#game-fp-words").children("div").each(function(index, element) {
 var ishas=stext.search($(this).children("span").text());
 var that=$(this);
 if(ishas>-1 && $(this).attr("is")=="0"){
 delay=parseInt(delay)+parseInt(80);
 $(this).attr("is","1");
 addfen(10);
 setTimeout(function(){
  that.removeClass("close").addClass("open");
  that.children("em").addClass("feiqi");
 },delay);
 real=real.replace($(this).children("span").text(),""); 
 }else{
 };    
  });
 $("#game-fp-input").children("input").val(real);
 };
 function addfen(num){
 $("#game-fp-fen").find("input").val(parseInt($("#game-fp-fen").find("input").val())+parseInt(num));
 };
 function next(zlen){
 if($("#game-fp-words").children("div[is='1']").length==zlen && $("#game-fp-input").children("input").val().length==0){
 iskey=false;
 success();
 }else{};
 
 };
 function success(){
 showok();
 var alltime=null; 
 if(otestAudio.duration){ 
 alltime=otestAudio.duration; 
 skipsuccess(alltime); 
 }else{
 otestAudio.onloadedmetadata=function(){ 
 alltime=otestAudio.duration; 
 skipsuccess(alltime); 
 };
 };
 
 };
 function showok(){
 $("#game-fp-words").children().remove();
 var rindex=current_guan-1;
 var zz=chatime();
 $("#game-fp-result").show();
 $("#game-fp-result").append('<strong class="zonghefen zonghefeiqi">20</strong>');
 $("#game-fp-result").append('<strong class="mintimefen mintimefeiqi">'+zz+'</strong>') 
 addfen($("#game-fp-result").children(".zonghefen").html());
 addfen($("#game-fp-result").children(".mintimefen").html()); 
 var showval=data_all[rindex][subindex].text.split(",").join("");
 count=parseInt(count)+parseInt(data_all[rindex][subindex].count);
 $("#game-fp-result").children("p").html(showval);
 otestAudio.src=data_all[rindex][subindex].url;
 };
 function chatime(){
 var chaval=(new Date().getTime()-starttime)/1000; 
 if(chaval<=5){
 return 30;
 }else if(chaval>5 &&　chaval<=10){
 return 20;
 }else if(chaval>10){
 return 10;
 }else{
 return 0;
 }; 
 };
 function skipsuccess(alltime){
 otestAudio.play();
 current_index=parseInt(current_index)+parseInt(1);
 if(current_index%10==0){
 current_guan=parseInt(current_guan)+parseInt(1);
 setTimeout(function(){
 $("#game-fp-result").children(".zonghefen").remove();
 $("#game-fp-result").children(".mintimefen").remove(); 
 $("#game-fp-result").hide(); 
 funguan(); 
 },parseInt(alltime*1000));  
 setTimeout(function(){ 
 fundata();
 },parseInt(alltime*1000)+parseInt(1000)); 
 }else{
 setTimeout(function(){
 $("#game-fp-result").children(".zonghefen").remove();
 $("#game-fp-result").children(".mintimefen").remove(); 
 $("#game-fp-result").hide();
 fundata();
 },parseInt(alltime*1000));
 };
 $("#game-fp-input").children("input").val(""); 
 };
 //function 
 function init(){
 $("#game-fp-box").show();
 $("#game-fp-input").children("input").val("");
 $("#game-fp-fen").find("input").val("0");
 $("#game-fp-input").children("input").attr('disabled','disabled'); 
 $("#game-fp-time").children("span").html(alltime);
 funguan(); 
 setTimeout(function(){
 fundata();
 },1000);
 inctime();
 };
 function funguan(){
 $("#game-fp-guanka").children("strong").html(guan_arr[current_guan-1].n);
 $("#game-fp-guanka").children("span").html(guan_arr[current_guan-1].c);
 $("#game-fp-guanka").show();
 setTimeout(function(){
 $("#game-fp-guanka").hide(); 
 },1000)
 };
 function fundata(){ 
 $("#game-fp-input").children("input").attr('disabled','disabled'); 
 setTimeout(function(){
 appenddata();
 iskey=true;
 },0);
 setTimeout(function(){
 funclose();
 $("#game-fp-input").children("input").focus();
 },2000);
 };
 function appenddata(){ 
 if(current_guan<=2){
 var arrtext=returnraditem().text.split(",");
 //console.log(current_guan+"-----"+returnraditem().id);
 for(var i=0;i<arrtext.length;i++){
 var tmp=$('<div class="fanpai" is="0"><span>'+ arrtext[i] +'</span><em>10</em></div>');
 $("#game-fp-words").append(tmp);
 }; 
 }else if(current_guan>2 &&　current_guan<=4){
 var arrtext=returnraditem().text.split(",");
 //乱序处理
 var lasttext=[];
 var eearr=luanxu(arrtext.length);
 for(var j=0;j<eearr.length;j++){
 lasttext.push(arrtext[eearr[j]]);
 };
 for(var i=0;i<lasttext.length;i++){
 var tmp=$('<div class="fanpai" is="0"><span>'+ lasttext[i] +'</span><em>10</em></div>');
 $("#game-fp-words").append(tmp);
 }; 
 }; 
 };
 function luanxu(maxlen){
 var rarr=[];
 for(var i=0;i<maxlen;i++){
 rarr.push(i);
 };
 var eearr=[];
 for(var j=0;j<maxlen;j++){
 var ing=Math.floor(Math.random()*rarr.length);
 eearr.push(rarr[ing]);
 rarr.splice(ing,1);
 };
 return eearr;
 };
 function returnraditem(){
 var rindex=current_guan-1;
 var temparr=[];
 for(var i=0;i<data_all[rindex].length;i++){
 if(data_all[rindex][i]['is']==true){ 
 temparr.push(data_all[rindex][i]); 
 }else{};
 };
 var realrad=Math.floor(Math.random()*temparr.length);
 for(var i=0;i<data_all[rindex].length;i++){
 if(data_all[rindex][i]['id']==temparr[realrad]['id']){ 
 data_all[rindex][i]['is']=false;
 subindex=i;
 }else{};
 }; 
 return temparr[realrad];
 };
 function funclose(){
 $("#game-fp-input").children("input").removeAttr('disabled');
 $("#game-fp-input").children("input").focus();
 starttime=new Date().getTime();
 $("#game-fp-words").children("div").each(function(index, element) {
   if($(this).attr("is")=="0"){
 $(this).removeClass("open").addClass("close");
 }else{};
  }); 
 };
 function funopen(){
 $("#game-fp-input").children("input").attr('disabled','disabled');
 $("#game-fp-words").children("div").each(function(index, element) {
   if($(this).attr("is")=="0"){
 $(this).removeClass("close").addClass("open");
 }else{};
  });
 
 };
 function inctime(){
 dong=setInterval(function(){
 alltime-=1;
 if(alltime<0){
 clearInterval(dong);
 $("#game-fp-words").children().remove();
 $("#game-fp-box").hide();
 $("#game-fp-input").children("input").attr('disabled','disabled'); 
 $(".game-fp-reset-con-a").html($("#game-fp-fen").find("input").val());
 $(".game-fp-reset-con-b").html(current_index);
 $(".game-fp-reset-con-c").html(count);
 $("#game-fp-reset").show();
 }else{
 $("#game-fp-time").children("span").html(alltime);
 };
 },1000);
 };
 //end
}); 
</script>
</head>
<body>
 <div id="game-fp">
  <div class="game-fp-name">句子翻牌</div>
  <div class="game-fp-sm">
   <p>1.将牌面上的词语输入到方块中。</p>
   <p>2.按照正确语序输入句子能获得额外奖励。</p>
   <p>3.每组词语显示2-4秒。</p>
   <p class="game-fp-sm-x">查看词语：点击“查看词语”，或按“PageUp”键</p>
   <p>4.一共有10次机会。</p>
   <p class="game-fp-sm-x">跳过词语：点击“跳过10”，或按“PageDown”键</p>
   <p>5.别忘了输入标点符号！</p>
  </div>
  <div class="game-fp-start">开始游戏</div>
  <div id="game-fp-box">
   <div id="game-fp-fen">
    得分<span><input type="text" value="0" readonly="readonly" /></span>
   </div>
   <div id="game-fp-input">
    <input type="text" />
   </div>
   <div id="game-fp-time">
    剩余时间 <span>300</span>
   </div>
   <div id="game-fp-tools">
    <dl class="game-fp-tools-pause">
     <dt>暂停</dt>
     <dd>End</dd>
    </dl>
    <dl class="game-fp-tools-see">
     <dt>再看一次</dt>
     <dd>PageUp</dd>
    </dl>
    <dl class="game-fp-tools-skip">
     <dt>跳过<span>10</span></dt>
     <dd>PageDown</dd>
    </dl>
    <dl class="game-fp-tools-ts">
     <dt>游戏说明</dt>
     <dd>Home</dd>
    </dl>
   </div>
   <div id="game-fp-words">
   </div>
   <div id="game-fp-guanka">
    <strong>第一关</strong>
    <span>正常词序</span>
   </div>
   <div id="game-fp-pause">
    <span id="game-fp-sta">继续</span>
   </div>
 
   <div id="game-fp-result">
    <div><span>正确语序</span><em><audio src="" id="test-audio"></audio></em></div>
    <p></p>
    <!--<strong class="zonghefen">20</strong>
    <strong class="mintimefen">0</strong>-->
   </div>
 
  </div>
  <div id="game-fp-reset">
   <div class="game-fp-reset-con">    
    <p>游戏结束</p>
    <p>你的得分：<span class="game-fp-reset-con-a">0</span></p>
    <p>完成句子：<span class="game-fp-reset-con-b">0</span></p>
    <p>完成词语：<span class="game-fp-reset-con-c">0</span></p>
   </div>
   <span id="game-fp-reset-btn">再玩一次</span>
  </div> 
 </div>
 
</body>
</html>

로그인 후 복사

코드 다운로드: http://xiazai.jb51.net/201603/yuanma/juzifanpai(jb51.net).rar

게임이 충분하지 않다고 생각되면 다음 주제를 읽어보세요: 자바스크립트 클래식 미니 게임

이상 내용이 이 글의 전체 내용입니다. 자바스크립트 프로그래밍을 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7518

Cakephp 튜토리얼

1378

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까? Mar 18, 2025 pm 03:12 PM

기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.

브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까? Mar 18, 2025 pm 03:14 PM

이 기사는 브라우저에서 JavaScript 성능을 최적화하기위한 전략에 대해 설명하고 실행 시간을 줄이고 페이지로드 속도에 미치는 영향을 최소화하는 데 중점을 둡니다.

프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까? Apr 04, 2025 pm 02:42 PM

프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까? Mar 18, 2025 pm 03:16 PM

이 기사는 브라우저 개발자 도구를 사용하여 효과적인 JavaScript 디버깅, 중단 점 설정, 콘솔 사용 및 성능 분석에 중점을 둡니다.

누가 더 많은 파이썬이나 자바 스크립트를 지불합니까? Apr 04, 2025 am 12:09 AM

기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.

소스 맵을 사용하여 조정 된 JavaScript 코드를 디버그하는 방법은 무엇입니까? Mar 18, 2025 pm 03:17 PM

이 기사는 소스 맵을 사용하여 원래 코드에 다시 매핑하여 미니어링 된 JavaScript를 디버그하는 방법을 설명합니다. 소스 맵 활성화, 브레이크 포인트 설정 및 Chrome Devtools 및 Webpack과 같은 도구 사용에 대해 설명합니다.

Console.log 출력 결과의 차이 : 두 통화가 다른 이유는 무엇입니까? Apr 04, 2025 pm 05:12 PM

Console.log 출력의 차이의 근본 원인에 대한 심층적 인 논의. 이 기사에서는 Console.log 함수의 출력 결과의 차이점을 코드에서 분석하고 그에 따른 이유를 설명합니다. � ...

초보자를위한 타이프 스크립트, 2 부 : 기본 데이터 유형 Mar 19, 2025 am 09:10 AM

엔트리 레벨 타입 스크립트 자습서를 마스터 한 후에는 TypeScript를 지원하고 JavaScript로 컴파일하는 IDE에서 자신의 코드를 작성할 수 있어야합니다. 이 튜토리얼은 TypeScript의 다양한 데이터 유형으로 뛰어납니다. JavaScript에는 NULL, UNDEFINED, BOOLEAN, 번호, 문자열, 기호 (ES6에 의해 소개 됨) 및 객체의 7 가지 데이터 유형이 있습니다. TypeScript는이 기반으로 더 많은 유형을 정의 하며이 튜토리얼은이 모든 튜토리얼을 자세히 다룹니다. 널 데이터 유형 JavaScript와 마찬가지로 Null in TypeScript

See all articles

javascript_javascript 스킬을 기반으로 한 문장 뒤집기 웹 버전 미니게임 구현

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제