首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

使用JavaScript实现网页版Pongo设计思路及源代码分享

Posted in Javascript onJune 16, 2014

1.游戏背景介绍(写在前面的废话)：

    五月初的某天，看到某网推荐了这款游戏，Pongo，看着还不错的样子就用ipad下下来试玩了下，玩了两局感觉还错挺过瘾的，因为是手欠类游戏嘛大家懂的。

    但是没一会发现游戏在ipad似乎有些bug，玩一会就会卡住然后只能强退了，真是揪心，记录还等着破呢。

    怎么办？玩游戏不如玩自己的游戏的念头又邪恶的出现了，然后就把pad丢给了朋友虐心去，我默默回到电脑前开始动手自己写个不会卡的。

    大概两小时吧，写出了基本框架，然后扔sinaapp里试了下效果基本能玩就洗洗睡了。

    第二天醒来因为周末没事就花了些时间设计了下界面，同时不幸自己测出了一些比较严重的bug，最后又花了些时间给改掉了。

    最后游戏取名”Pongo+“(手机党点我即玩)，电脑端暂时不支持，并顺便在Github上上传了源码并去掉了提交成绩模块。

2.游戏试玩网址：

Pongo+(仅限移动端)：http://mypongo.sinaapp.com/

github开源(欢迎fork让游戏更好)：https://github.com/ChenReason/pongo/blob/gh-pages/index.html

3.游戏规则玩法：

点击屏幕会改变挡板的运动方向，点击一次挡板方向相应改变一次，目的是为了能刚好挡住四处滚动的小球不让其跑出大圆外。时间越长越好！最后可提交自己的成绩进行排名！

4.游戏所用技术：

    HTML、CSS、JavaScript、Canvas、PHP

5.游戏设计思路：

    a)运用Canvas将游戏的主界面画出，底部为一单色长方形，上面覆盖一个大圆，大圆上再绘制小圆及挡板，挡板中部还有一个大小为1px的超级小圆(作实现碰撞检测)。

    b)小圆运动方向一共有8个分别为上、下、左、右、左上、左下、右上和右下。

    c)挡板的运动方向只有两个，顺时针和逆时针。

    d)碰撞检测未涉及到引擎的使用，而是根据小圆与挡板中部的超级小圆进行距离判断，从而实现简陋的碰撞检测。

    e)小球碰撞后反弹的方向确定，利用常识列举，共8种情况。

6.游戏实现难点：

    a)碰撞检测。

    b)定时器setInterval的清除时机以及是否清楚彻底。

    c)定时器周期长短与游戏体验的关系。

    d)Android与IOS设备性能不同导致的游戏流畅度问题。

7.游戏现有问题：

    a)由于碰撞检测是比较两圆的圆心距，且涉及到定时器的使用，因此由于定时器间隔极短导致在肉眼所见的一次碰撞背后其实已经发生了数十次碰撞，由此会导致小球最后实际的反弹方向与现实的物理定理有所不同，经过优化，出现的概率已经较低，但仍未能避免，因此有些玩家会发现小圆若没有很准地撞在挡板正中央则可能导致游戏失败。

    b)由于函数过于冗长，运行效率较低，再加上使用定时器，因此在Andorid与iOS或其他移动端上的游戏体验不尽相同（整体来说iOS由于Android）。

    c)排行榜并未实现自动实时更新。(数据库还不会用)

8.游戏界面预览：

(图1为初版，图2去掉了按钮，图3为最终版，图4为排行榜)

使用JavaScript实现网页版Pongo设计思路及源代码分享

图1

使用JavaScript实现网页版Pongo设计思路及源代码分享

图2

使用JavaScript实现网页版Pongo设计思路及源代码分享

图3

使用JavaScript实现网页版Pongo设计思路及源代码分享

9.游戏JavaScript部分源代码：

var ifingame=0;
var maxgrade=0,grade=0;
var grade1,grade2;
var nickname; 
var gamespeed=1.4;//小球速度
var linespeed=Math.PI/95; //跟踪线速度
var crashdistancefaild=-7;//碰撞检测参数
var crashdistancesucc=15
var fantanjuli=7;    
var themaxgradeline=12.1;     
function getCookie1(nickname)
{
 if (document.cookie.length>0)
 { 
  c_start=document.cookie.indexOf(nickname + "=")
  if (c_start!=-1)
  { 
   c_start=c_start + nickname.length+1;
   c_end=document.cookie.indexOf(",",c_start);
   if (c_end==-1) 
                c_end=document.cookie.length;
   return unescape(document.cookie.substring(c_start,c_end));
  } 
 } 
 return ""
}
function getCookie2(mymaxgrade)
{
 if (document.cookie.length>0)
 { 
  c_start=document.cookie.indexOf(mymaxgrade + "=")
  if (c_start!=-1)
  { 
   c_start=c_start + mymaxgrade.length+1;
   c_end=document.cookie.indexOf(";",c_start);
   if (c_end==-1) 
                c_end=document.cookie.length;
   return unescape(document.cookie.substring(c_start,c_end));
  } 
 } 
 return ""
}    
function setCookie(nickname,value,mymaxgrade,maxgrade,expiredays)
{
 var exdate=new Date()
 exdate.setDate(exdate.getDate()+expiredays)
 document.cookie=nickname+ "=" +escape(value)+"," + mymaxgrade + "=" + escape(maxgrade) + ((expiredays==null) ? "" : "; expires="+exdate.toGMTString());
}
function checkCookie()
{
 nickname=getCookie1('nickname');
    maxgrade=parseInt(getCookie2('mymaxgrade'));
       if(isNaN(maxgrade)==true)
       {
       maxgrade=0;
      }
 if (nickname!=null && nickname!="")
   {
        alert('欢迎'+nickname+'回来!'+'\n'+"如果喜欢请分享一下哈~");
    }
 else 
   {
    nickname=prompt('请输入你的昵称:（名字太长上榜可是会显示不完整的哦）',"")
    if (nickname!=null && nickname!="")
     {
            var maxgradestring=maxgrade.toString();
      setCookie('nickname',nickname,'mymaxgrade',maxgradestring,365);
     }
   }
}    
var objpane=document.getElementById("pane");
var ctxpane=objpane.getContext("2d");
ctxpane.translate(150,150);//必备 画布中心点平移  
function sendmail()
     {
            if(grade2>themaxgradeline)
            var max_grade=grade2;
            window.location.href='index.php?max_grade='+max_grade+'&nick_name='+nickname;
        /*    {
              <?php
   $grade=$_GET['max_grade'];
   $nickname=$_GET['nick_name'];
   $mail = new SaeMail();
   $ret = $mail->quickSend( 'reasonpongo@163.com' , $grade , $nickname ,'reasonpongo@163.com' , 'mypongo' );
   $mail->clean(); 
   ?>
           }*/
            alert(nickname+"你的成绩为："+grade2+"提交成功~");
        }   
    
var gamedirection={
 shang : 1,
 xia  : 5,
 zuo  : 7,
 you  : 3,
 zuoshang: 8,
 zuoxia : 6,
 youshang: 2,
 youxia : 4,
 clock : 0,
 anticlock: 9,
 };//方向
var canvas={
 width : 300,
 height: 300,
 };//画布
var bigcircle = {//大圆参数
        x : 0,    //圆心的x轴坐标值
        y : 0,    //圆心的y轴坐标值
        r : 150,  //圆的半径
  c : 'rgb(255,255,255)',   
    };//大圆
var smallcircle = {//小圆参数
        x : 0,    //圆心的x轴坐标值
        y : 0,    //圆心的y轴坐标值
        r : 12,  //圆的半径
  c : 'rgb(204,105,106)',
  direction :  gamedirection.xia,
    };//小圆
var line = {//挡板线的参数
 x : 0,    //圆心的x轴坐标值
    y : 0,    //圆心的y轴坐标值
    r : 150 ,  //圆弧的半径
    start:(Math.PI/2-Math.PI/16),
    end : (Math.PI/2+Math.PI/16),
 c : 'rgb(55,55,55)',
 direction: gamedirection.anticlock,
 };//跟踪线
var dot = {//跟踪点参数
 x : (bigcircle.r*Math.cos(line.start+Math.PI/16)),//以大圆为原点
 y : (bigcircle.r*Math.sin(line.start+Math.PI/16)),
 r : 1,
 }//跟踪点
function changelinedirection()
{
 if(line.direction==gamedirection.clock)
 {
  line.direction=gamedirection.anticlock;
 }
 else
 {
  line.direction=gamedirection.clock;
 }
}
function getdistance(){
 var distance=Math.sqrt((smallcircle.x)*(smallcircle.x )+(smallcircle.y )*(smallcircle.y ));
 return distance;
 }//返回小球与大圆中心距离平方 getdistance()
function ifgameover(){//判断是否出界
 if((getdistance() - bigcircle.r)>5)
 return true;
 else
 return false;
 } //判断游戏是否结束 ifgameover()
function ifcrash(){  //碰撞检测
 var dx = dot.x-smallcircle.x;
 var dy = dot.y-smallcircle.y;
 var dd=Math.sqrt(dx*dx+dy*dy);
 if(dd< crashdistancesucc)
  return true;
 else 
  return false;
 }//碰撞检测 ifcrash()
function randomback()
{
 var x=Math.floor(Math.random()*3);
 switch (smallcircle.direction){    
    case gamedirection.shang:
    {
     switch (x)
     {
      case 0:
      smallcircle.direction=gamedirection.xia;
                        smallcircle.y=smallcircle.y+fantanjuli;
      break;
      case 1:
      smallcircle.direction=gamedirection.zuoxia;
                        smallcircle.x=smallcircle.x-fantanjuli;
      smallcircle.y=smallcircle.y+fantanjuli; 
      break;
      case 2:
      smallcircle.direction=gamedirection.youxia;
                        smallcircle.x=smallcircle.x+fantanjuli;
      smallcircle.y=smallcircle.y+fantanjuli;
      break;
      default:
      break;
     } break;
    }
    case gamedirection.xia:
    {
     switch (x)
     {
      case 0:
      smallcircle.direction=gamedirection.shang;
      smallcircle.y=smallcircle.y-fantanjuli;
      break;
      case 1:
      smallcircle.direction=gamedirection.zuoshang;
      smallcircle.x=smallcircle.x-fantanjuli;
      smallcircle.y=smallcircle.y-fantanjuli;
      break;
      case 2:
      smallcircle.direction=gamedirection.youshang;
      smallcircle.x=smallcircle.x+fantanjuli;
      smallcircle.y=smallcircle.y-fantanjuli;
      break;
      default:
      break;     
     } break;
    }
       case gamedirection.zuo:
    {
     switch (x)
     {
      case 0:
      smallcircle.direction=gamedirection.you;
      smallcircle.x=smallcircle.x+fantanjuli;
      break;
      case 1:
      smallcircle.direction=gamedirection.youshang;
      smallcircle.x=smallcircle.x+fantanjuli;
      smallcircle.y=smallcircle.y-fantanjuli;
      break;
      case 2:
      smallcircle.direction=gamedirection.youxia;
      smallcircle.x=smallcircle.x+fantanjuli;
      smallcircle.y=smallcircle.y+fantanjuli;
      break;
      default:
      break;
     } break;
    }
    case gamedirection.you:
    {
     switch (x)
     {
      case 0:
      smallcircle.direction=gamedirection.zuo;
      smallcircle.x=smallcircle.x-fantanjuli;
      break;
      case 1:
      smallcircle.direction=gamedirection.zuoxia;
      smallcircle.x=smallcircle.x-fantanjuli;
      smallcircle.y=smallcircle.y+fantanjuli;
      break;
      case 2:
      smallcircle.direction=gamedirection.zuoshang;
      smallcircle.x=smallcircle.x-fantanjuli;
      smallcircle.y=smallcircle.y-fantanjuli;
      break;
      default:
      break;
     } break;
    }
    case gamedirection.zuoshang:
    {
     switch (x)
     {
      case 0:
      smallcircle.direction=gamedirection.youxia;
      smallcircle.x=smallcircle.x+fantanjuli;
      smallcircle.y=smallcircle.y+fantanjuli;
      break;
      case 1:
      smallcircle.direction=gamedirection.xia;
      smallcircle.y=smallcircle.y+fantanjuli;
      break;
      case 2:
      smallcircle.direction=gamedirection.you;
      smallcircle.x=smallcircle.x+fantanjuli;
      break;
      default:
      break;
     } break;
    }
    case gamedirection.zuoxia:
    {
     switch (x)
     {
      case 0:
      smallcircle.direction=gamedirection.youshang;
      smallcircle.x=smallcircle.x+fantanjuli;
      smallcircle.y=smallcircle.y-fantanjuli;
      break;
      case 1:
      smallcircle.direction=gamedirection.shang;
      smallcircle.y=smallcircle.y-fantanjuli;
      break;
      case 2:
      smallcircle.direction=gamedirection.you;
      smallcircle.x=smallcircle.x+fantanjuli;
      break;
      default:
      break;
     } break;
    }
    case gamedirection.youshang:
    {
     switch (x)
     {
      case 0:
      smallcircle.direction=gamedirection.zuoxia;
      smallcircle.x=smallcircle.x-fantanjuli;
      smallcircle.y=smallcircle.y+fantanjuli;
      break;
      case 1:
      smallcircle.direction=gamedirection.zuo;
      smallcircle.x=smallcircle.x-fantanjuli;
      break;
      case 2:
      smallcircle.direction=gamedirection.xia;
      smallcircle.y=smallcircle.y+fantanjuli;
      break;
      default:
      break;
     } break;
    }
    case gamedirection.youxia:
    {
     switch (x)
     {
      case 0:
      smallcircle.direction=gamedirection.zuoshang;
      smallcircle.x=smallcircle.x-fantanjuli;
      smallcircle.y=smallcircle.y-fantanjuli;
      break;
      case 1:
      smallcircle.direction=gamedirection.zuo;
      smallcircle.x=smallcircle.x-fantanjuli;
      break;
      case 2:
      smallcircle.direction=gamedirection.shang;
      smallcircle.y=smallcircle.y-fantanjuli;
      break;
      default:
      break;
     } break;
    }
    default:
    {
     break;  
    }
   } 
}//小球随机反向 randomback()
function smallcircledirection()
{
 switch (smallcircle.direction){    //根据小球方向做移动
    case gamedirection.shang:
    {
     smallcircle.y=smallcircle.y-gamespeed;
     grade++;
     if(grade>maxgrade)
     {
                        maxgrade=grade;
                      newrecoder();
                    }
     addone();
     break;
    }
    case gamedirection.xia:
    {
     smallcircle.y=smallcircle.y+gamespeed;
     grade++;
     if(grade>maxgrade)
     {
                        maxgrade=grade;
                      newrecoder();
                    }
     addone();
     break;
    }
    case gamedirection.zuo:
    {
     smallcircle.x=smallcircle.x-gamespeed;
     grade++;
     if(grade>maxgrade)
     {
                        maxgrade=grade;
                      newrecoder();
                    }
     addone();
     break;
    }
    case gamedirection.you:
    {
     smallcircle.x=smallcircle.x+gamespeed;
     grade++;
     if(grade>maxgrade)
     {
                        maxgrade=grade;
                      newrecoder();
                    }
     addone();
     break;
    }
    case gamedirection.zuoshang:
    {
     smallcircle.x=smallcircle.x-gamespeed*0.8;
     smallcircle.y=smallcircle.y-gamespeed*0.8;
     grade++;
     if(grade>maxgrade)
     {
                        maxgrade=grade;
                      newrecoder();
                    }
     addone();
     break;
    }
    case gamedirection.zuoxia:
    {
     smallcircle.x=smallcircle.x-gamespeed*0.8;
     smallcircle.y=smallcircle.y+gamespeed*0.8;
     grade++;
     if(grade>maxgrade)
     {
                        maxgrade=grade;
                      newrecoder();
                    }
     addone();
     break;
    }
    case gamedirection.youshang:
    {
     smallcircle.x=smallcircle.x+gamespeed*0.8;
     smallcircle.y=smallcircle.y-gamespeed*0.8;
     grade++;
     if(grade>maxgrade)
     {
                        maxgrade=grade;
                      newrecoder();
                    }
     addone();
     break;
    }
    case gamedirection.youxia:
    {
     smallcircle.x=smallcircle.x+gamespeed*0.8;
     smallcircle.y=smallcircle.y+gamespeed*0.8;
     grade++;
     if(grade>maxgrade)
     {
                        maxgrade=grade;
                      newrecoder();
                    }
     addone();
     break;
    }
    default:
    {
     break;  
    }
   } 
}//小球移动 smallcircledirection()
/*画出底部圆*/
ctxpane.beginPath(); //大圆
ctxpane.arc(bigcircle.x,bigcircle.y,bigcircle.r,0,Math.PI*2,true);
ctxpane.fillStyle = bigcircle.c;
ctxpane.fill();
ctxpane.closePath();
/*画出底部追踪线条*/
ctxpane.beginPath();
ctxpane.lineWidth=6;
ctxpane.strokeStyle = line.c;
ctxpane.arc(line.x, line.y, line.r, line.start, line.end,false); 
ctxpane.stroke(); 
ctxpane.closePath();
function tapme()//tapme
{
 ctxpane.beginPath();
 ctxpane.strokeStyle="rgb(255,222,195)";
 ctxpane.font = "80px Papyrus";
 ctxpane.strokeText('TAP',-95,30);
 ctxpane.fillStyle="rgb(255,205,105)";
 ctxpane.font = "35px Papyrus";
 ctxpane.fillText('me',70,30);
 ctxpane.closePath();
 }
function newrecoder() 
{
 ctxpane.beginPath();
 ctxpane.fillStyle="rgb(255,0,0)";
 ctxpane.font = "18px Papyrus";
 ctxpane.fillText("New!",58,80);
 ctxpane.closePath();
 } 
function addone()
{
 grade1=(grade/150).toFixed(1);
 grade2=(maxgrade/150).toFixed(1);
 var say1="now";
 var say2="best"
 ctxpane.beginPath();
 ctxpane.strokeStyle="rgb(250,222,185)";
 ctxpane.font = "60px Papyrus";
 ctxpane.strokeText(grade1,-45,-60);
 ctxpane.strokeText(grade2,-45,100);
 ctxpane.fillStyle="rgb(255,0,100)";
 ctxpane.font = "15px Papyrus";
 ctxpane.fillText(say1,58,-60);
 ctxpane.fillStyle="rgb(255,0,100)";
 ctxpane.font = "15px Papyrus";
 ctxpane.fillText(say2,58,100);
 ctxpane.closePath();
}
function movetest(){
 if(ifgameover())
 { 
        ifingame=0;
        if(maxgrade>parseInt(getCookie2('mymaxgrade')))
  {
   setCookie('nickname',nickname,'mymaxgrade',maxgrade.toString(),365);  
  }
  clearInterval(timer);
  tapme();
 }
 else
 {
  if(ifcrash())
   {
    randomback();
   } 
ctxpane.clearRect(-150,-150,300,300); //清屏
ctxpane.beginPath(); //大圆
ctxpane.arc(bigcircle.x,bigcircle.y,bigcircle.r,0,Math.PI*2,true);
ctxpane.fillStyle = bigcircle.c;
ctxpane.fill();
ctxpane.closePath();
if(line.direction==gamedirection.clock)   //跟踪线顺时针
{
 line.start=line.start + linespeed; 
 line.end=line.end +linespeed;
 ctxpane.beginPath();
 ctxpane.lineWidth=4;
 ctxpane.strokeStyle = line.c;
 ctxpane.arc(line.x, line.y, line.r, line.start, line.end,false); 
 ctxpane.stroke(); 
 ctxpane.closePath(); 
}
if(line.direction==gamedirection.anticlock)         //跟踪逆顺时针
{
 line.start=line.start - linespeed; 
 line.end=line.end -linespeed;
 ctxpane.beginPath();
 ctxpane.lineWidth=4;
 ctxpane.strokeStyle = line.c;
 ctxpane.arc(line.x, line.y, line.r, line.start, line.end,false); 
 ctxpane.stroke(); 
 ctxpane.closePath();  
}
dot.x=bigcircle.r*Math.cos(line.start+Math.PI/32) //跟踪点
dot.y=bigcircle.r*Math.sin(line.start+Math.PI/32)
ctxpane.beginPath();//线上跟踪点
ctxpane.arc(dot.x,dot.y,dot.r,0,Math.PI*2,true);
ctxpane.fillStyle = smallcircle.c;
ctxpane.fill();
ctxpane.closePath(); 
smallcircledirection();//小圆
ctxpane.save();
ctxpane.beginPath();
ctxpane.arc(smallcircle.x,smallcircle.y,smallcircle.r,0,Math.PI*2,true);
ctxpane.fillStyle = smallcircle.c;
ctxpane.fill();
ctxpane.closePath();
ctxpane.restore();
 }
}//主函数
    ///////////////////////////////////////////
tapme();
var timer;
function startgame(){//开始游戏
    if(ifingame==0)
    {
        ifingame=1;
        grade=0;
        var xx=Math.floor(Math.random()*8);
        /*      switch(xx)
        {
            case 0:
   smallcircle.direction=gamedirection.shang;
   break;
   case 1:
   smallcircle.direction=gamedirection.xia;
   break;
   case 2:
   smallcircle.direction=gamedirection.zuo;
   break;
   case 3:
   smallcircle.direction=gamedirection.you;
   break;
   case 4:
   smallcircle.direction=gamedirection.zuoshang;
   break;
   case 5:
   smallcircle.direction=gamedirection.zuoxia;
   break;
   case 6:
   smallcircle.direction=gamedirection.youshang;
   break;
   case 7:
   smallcircle.direction=gamedirection.youxia;
   break;
   default:
   break;
        }*/
    smallcircle.direction=gamedirection.xia;
 smallcircle.x=smallcircle.y=0;
 line.start=Math.PI/2-Math.PI/26;
 line.end=Math.PI/2+Math.PI/26;
 line.direction=gamedirection.anticlock;
 clearInterval(timer);
 timer=setInterval(movetest,10);
    }
 }//开始游戏 startgame()  
    function opentop()
    {
        window.location="http://pongotop.sinaapp.com";
    }

10.写在最后

这纯属又是一个自娱自乐，写完后的第三天因为开始忙着投简历找实习就没空再管，扔到朋友圈让朋友玩去了。这一个月过去了再重新看这游戏，感觉它不该就这样死掉，本人没什么技术，做得很拙略，因此发出这篇文字希望能帮到一些对pongo感兴趣的朋友，再者就是希望如果有这方面的高手看到了能够给予赐教，一切疑惑和赐教都欢迎给我留言，谢谢！

使用JavaScript实现网页版Pongo设计思路及源代码分享

- Author -

ChenReason

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
vue实现节点增删改功能
Sep 26 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 Javascript
小程序实现点击tab切换左右滑动
Nov 16 Javascript
JavaScript async/await原理及实例解析
Dec 02 Javascript
如何在JavaScript中等分数组的实现
Dec 13 Javascript
jQuery实现全选按钮
Jan 01 jQuery
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 #Javascript
js限制文本框只能输入数字方法小结
Jun 16 #Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 #Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 #Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 #Javascript
js中的如何定位固定层的位置
Jun 15 #Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 #Javascript
cudnn(1) 热力图(1) callback(1) Git(3) dict(1) webpack(1) 脚本(1) RTX 3050 ti(1) cudn(1) 字符画(1)
You might like
提问的智慧
2006/10/09 PHP
DW中链接mysql数据库时，建立字符集中文出现乱码的解决方法
2010/03/27 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
php中smarty区域循环的方法
2015/06/11 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
JS常用函数使用指南
2014/11/23 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
Javascript中replace()小结
2015/09/30 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
python 正则式 概述及常用字符
2009/05/07 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
Black Halo官方网站：购买连衣裙、礼服和连体裤
2018/06/13 全球购物
Python保存并浏览用户的历史记录
2022/04/29 Python