HTML5 实现小车动画效果(Canvas/CSS3/JQuery)

转自：http://blog.csdn.net/yanghua_kobe/article/details/7226816

HTML5正在变得越来越流行。在这个移动设备日益增长的时代，对来自Adobe的Flash插件的改造需求也正在快速增长。因为就在最近，Adobe宣布Flash将不再支持移动设备。这意味着，Adobe自身也认为对移动设备来讲HTML5是一项重要的技术。而桌面系统的改变也是迟早的事。


HTML的一大劣势就是对于多媒体技术支持的缺乏。在HTML中，你无法直接显示一个视频或在屏幕上绘画。在HTML5中，随着<video>与<canvas>元素的引进。这些元素给予开发者直接使用“纯粹的”HTML来实现多媒体技术的可能性——仅需要写一些Javascript代码来配合HTML。在多媒体技术中，有一个基本的技术应该被支持——动画。在HTML5中，有不少方式能够实现该功能。


在这篇文章中，我仅将最新的<canvas>元素与即将到来的CSS3动画技术进行比较。其他的可能性包括DOM元素或SVG元素的创建和动画。这些可能性将不在本文中进行讨论。从开始就应该注意到canvas技术在当前发布的大部分主流浏览器都给予了支持，而CSS3动画仅在最新的FireFox与Chrome浏览器中才有实现的可能，下一个版本的IE也将提供对CSS3动画的支持。（所以本文中所有演示代码的效果，在Win 7系统下当前最新版的Chrome浏览器中都可实现，但在其他操作系统与其他浏览器中，并不一定能看到所有演示代码的效果）。


这里我选择了一个比较简单的动画：

PS：由于显卡、录制的帧间隔，以及可能你电脑处理器的原因，播放过程可能有些不太流畅或者失真！

分三种方式实现：

(1)   canvas元素结合JS

(2)   纯粹的CSS3动画（暂不被所有主流浏览器支持，比如IE）

(3)   CSS3结合Jquery实现

知道如何使用CSS3动画比知道如何使用<canvas>元素更重要：因为浏览器能够优化那些元素的性能(通常是他们的样式，比如CSS)，而我们使用canvas自定义画出来的效果却不能被优化。原因又在于，浏览器使用的硬件主要取决于显卡的能力。目前，浏览器没有给予我们直接访问显卡的权力，比如，每一个绘画操作都不得不在浏览器中先调用某些函数。

 

让我们从Canvas开始

HTML代码：

[html]  view plain copy print ?
  1. <html>  
  2.    <head>  
  3.       <meta charset="UTF-8" />  
  4.          <title>Animation in HTML5 using the canvas element</title>  
  5.     </head>  
  6.    <body onload="init();">  
  7.       <canvas id="canvas" width="1000" height="600">Your browser does not support the <code><canvas></code>-element.Please think about updating your brower!</canvas>  
  8.       <div id="controls">  
  9.          <button type="button" onclick="speed(-0.1);">Slower</button>  
  10.          <button type="button" onclick="play(this);">Play</button>  
  11.      <button type="button" onclick="speed(+0.1)">Faster</button>  
  12.       </div>  
  13.    </body>  
  14. </html>  

JS代码：

定义一些变量：

[javascript]  view plain copy print ?
  1. var dx=5,           //当前速率  
  2.             rate=1,         //当前播放速度  
  3.             ani,            //当前动画循环  
  4.             c,              //画图(Canvas Context)  
  5.             w,              //汽车[隐藏的](Canvas Context)  
  6.             grassHeight=130,        //背景高度  
  7.             carAlpha=0,         //轮胎的旋转角度  
  8.             carX=-400,          //x轴方向上汽车的位置(将被改变)  
  9.             carY=300,           //y轴方向上汽车的位置(将保持为常量)  
  10.             carWidth=400,       //汽车的宽度  
  11.             carHeight=130,      //汽车的高度  
  12.             tiresDelta=15,      //从一个轮胎到最接近的汽车底盘的距离  
  13.             axisDelta=20,       //汽车底部底盘的轴与轮胎的距离  
  14.             radius=60;          //轮胎的半径  

为了实例化汽车canvas(初始时被隐藏)，我们使用下面的自执行的匿名函数

[javascript]  view plain copy print ?
  1. (function(){  
  2.            var car=document.createElement('canvas');    //创建元素  
  3.            car.height=carHeight+axisDelta+radius;   //设置高度  
  4.            car.width=carWidth;              //设置宽度  
  5.            w=car.getContext('2d');  
  6.         })();     

点击“Play”按钮，通过定时重复执行“画汽车”操作，来模拟“帧播放”功能：

[javascript]  view plain copy print ?
  1. function play(s){               //参数s是一个button  
  2.            if(ani){                 //如果ani不为null，则代表我们当前已经有了一个动画  
  3.               clearInterval(ani);           //所以我们需要清除它(停止动画)  
  4.               ani=null;                   
  5.               s.innerHTML='Play';           //重命名该按钮为“播放”  
  6.            }else{  
  7.               ani=setInterval(drawCanvas,40);       //我们将设置动画为25fps[帧每秒]，40/1000，即为二十五分之一  
  8.               s.innerHTML='Pause';          //重命名该按钮为“暂停”  
  9.            }  
  10.         }  

加速，减速，通过以下方法，改变移动距离的大小来实现：

[javascript]  view plain copy print ?
  1. function speed(delta){  
  2.            var newRate=Math.max(rate+delta,0.1);  
  3.            dx=newRate/rate*dx;  
  4.            rate=newRate;  
  5.         }  

页面加载的初始化方法：

[javascript]  view plain copy print ?
  1. //init  
  2.             function init(){  
  3.            c=document.getElementById('canvas').getContext('2d');  
  4.            drawCanvas();  
  5.         }  

主调方法：

[javascript]  view plain copy print ?
  1. function drawCanvas(){  
  2.            c.clearRect(0,0,c.canvas.width, c.canvas.height);    //清除Canvas(已显示的)，避免产生错误  
  3.            c.save();                        //保存当前坐标值以及状态，对应的类似“push”操作  
  4.   
  5.            drawGrass();                     //画背景  
  6.            c.translate(carX,0);                 //移动起点坐标  
  7.            drawCar();                       //画汽车(隐藏的canvas)  
  8.            c.drawImage(w.canvas,0,carY);            //画最终显示的汽车  
  9.            c.restore();                     //恢复Canvas的状态，对应的是类似“pop”操作  
  10.            carX+=dx;                        //重置汽车在X轴方向的位置，以模拟向前走  
  11.            carAlpha+=dx/radius;                 //按比例增加轮胎角度  
  12.   
  13.            if(carX>c.canvas.width){              //设置某些定期的边界条件  
  14.               carX=-carWidth-10;                //也可以将速度反向为dx*=-1;  
  15.            }  
  16.         }  

画背景：

[javascript]  view plain copy print ?
  1. function drawGrass(){  
  2.            //创建线性渐变，前两个参数为渐变开始点坐标，后两个为渐变结束点坐标  
  3.            var grad=c.createLinearGradient(0,c.canvas.height-grassHeight,0,c.canvas.height);  
  4.            //为线性渐变指定渐变色，0表示渐变起始色，1表示渐变终止色  
  5.            grad.addColorStop(0,'#33CC00');  
  6.            grad.addColorStop(1,'#66FF22');  
  7.            c.fillStyle=grad;  
  8.            c.lineWidth=0;  
  9.            c.fillRect(0,c.canvas.height-grassHeight,c.canvas.width,grassHeight);  
  10.              
  11.         }  

画车身：

[javascript]  view plain copy print ?
  1. function drawCar(){  
  2.            w.clearRect(0,0,w.canvas.width,w.canvas.height);     //清空隐藏的画板  
  3.            w.strokeStyle='#FF6600';                 //设置边框色  
  4.            w.lineWidth=2;                       //设置边框的宽度，单位为像素  
  5.            w.fillStyle='#FF9900';                   //设置填充色  
  6.            w.beginPath();                       //开始绘制新路径  
  7.            w.rect(0,0,carWidth,carHeight);              //绘制一个矩形  
  8.            w.stroke();                          //画边框  
  9.            w.fill();                            //填充背景  
  10.            w.closePath();                       //关闭绘制的新路径  
  11.            drawTire(tiresDelta+radius,carHeight+axisDelta);     //我们开始画第一个轮子  
  12.            drawTire(carWidth-tiresDelta-radius,carHeight+axisDelta);    //同样的，第二个  
  13.              
  14.         }  

画轮胎：

[javascript]  view plain copy print ?
  1. function drawTire(x,y){  
  2.            w.save();  
  3.            w.translate(x,y);  
  4.            w.rotate(carAlpha);  
  5.            w.strokeStyle='#3300FF';  
  6.            w.lineWidth=1;  
  7.            w.fillStyle='#0099FF';  
  8.            w.beginPath();  
  9.            w.arc(0,0,radius,0,2*Math.PI,false);  
  10.            w.fill();  
  11.            w.closePath();  
  12.            w.beginPath();  
  13.            w.moveTo(radius,0);  
  14.            w.lineTo(-radius,0);  
  15.            w.stroke();  
  16.            w.closePath();  
  17.            w.beginPath();  
  18.            w.moveTo(0,radius);  
  19.            w.lineTo(0,-radius);  
  20.            w.stroke();  
  21.            w.closePath();  
  22.            w.restore();  
  23.   
  24.         }  
由于原理简单，并且代码中作了详细注释，这里就不一一讲解！


该是CSS3出场了

你将看到我们未通过一句JS代码就完全实现了和上面一样的动画效果：

HTML代码：

[html]  view plain copy print ?
  1. <html>  
  2.    <head>  
  3.       <meta charset="UTF-8" />  
  4.       <title>Animations in HTML5 using CSS3 animations</title>  
  5.        </head>  
  6.    <body>  
  7.       <div id="container">  
  8.       <div id="car">  
  9.          <div id="chassis"></div>  
  10.          <div id="backtire" class="tire">  
  11.          <div class="hr"></div>  
  12.          <div class="vr"></div>  
  13.          </div>  
  14.          <div id="fronttire" class="tire">  
  15.          <div class="hr"></div>  
  16.          <div class="vr"></div>  
  17.          </div>     
  18.       </div>  
  19.       <div id="grass"></div>  
  20.       </div>  
  21.       <footer></footer>  
  22.    </body>  
  23. </html>  

CSS代码：

[css]  view plain copy print ?
  1. body  
  2.  {  
  3.     padding:0;  
  4.     margin:0;  
  5.  }  

定义车身与轮胎转到的动画（你会看到基本每一个动画都有四个版本的定义：原生版本/webkit【Chrome|Safari】/ms【为了向后兼容IE10】/moz【FireFox】）

[css]  view plain copy print ?
  1. /*定义动画：从-400px的位置移动到1600px的位置 */  
  2.  @keyframes carAnimation  
  3.  {  
  4.     0% { left:-400px; }     /* 指定初始位置，0%等同于from*/  
  5.     100% { left:1600px; }   /* 指定最终位置,100%等同于to*/  
  6.  }  
  7.   
  8.  /* Safari and Chrome */  
  9.  @-webkit-keyframes carAnimation  
  10.  {  
  11.     0% {left:-400px; }  
  12.     100% {left:1600px; }  
  13.  }  
  14.   
  15.  /* Firefox */  
  16.  @-moz-keyframes carAnimation  
  17.  {  
  18.     0% {left:-400; }  
  19.     100% {left:1600px; }   
  20.  }  
  21.   
  22.  /*IE暂不支持,此处定义是为了向后兼容IE10*/  
  23.  @-ms-keyframes carAnimation  
  24.  {  
  25.     0% {left:-400px; }  
  26.     100%{left:1600px; }  
  27.  }  


[css]  view plain copy print ?
  1. @keyframes tyreAnimation  
  2.  {  
  3.     0% {transform: rotate(0); }  
  4.     100% {transform: rotate(1800deg); }  
  5.  }  
  6.   
  7.  @-webkit-keyframes tyreAnimation  
  8.  {  
  9.     0% { -webkit-transform: rotate(0); }  
  10.     100% { -webkit-transform: rotate(1800deg); }  
  11.  }  
  12.   
  13.  @-moz-keyframes tyreAnimation  
  14.  {  
  15.     0% { -moz-transform: rotate(0); }  
  16.     100% { -moz-transform: rotate(1800deg); }  
  17.  }  
  18.   
  19.  @-ms-keyframes tyreAnimation  
  20.  {  
  21.     0% { -ms-transform: rotate(0); }  
  22.     100% { -ms-transform: rotate(1800deg); }  
  23.  }  

[css]  view plain copy print ?
  1. #container  
  2.  {  
  3.     position:relative;  
  4.     width:100%;  
  5.     height:600px;  
  6.     overflow:hidden;        /*这个很重要*/  
  7.  }  
  8.   
  9.  #car  
  10.  {  
  11.     position:absolute;      /*汽车在容器中采用绝对定位*/  
  12.     width:400px;  
  13.     height:210px;       /*汽车的总高度，包括轮胎和底盘*/  
  14.     z-index:1;          /*让汽车在背景的上方*/  
  15.     top:300px;          /*距顶端的距离(y轴)*/  
  16.     left:50px;          /*距左侧的距离(x轴)*/  
  17.   
  18.     /*以下内容赋予该元素预先定义的动画及相关属性*/  
  19.     -webkit-animation-name:carAnimation;        /*名称*/  
  20.     -webkit-animation-duration:10s;         /*持续时间*/  
  21.     -webkit-animation-iteration-count:infinite;     /*迭代次数-无限次*/  
  22.     -webkit-animation-timing-function:linear;       /*播放动画时从头到尾都以相同的速度*/  
  23.   
  24.     -moz-animation-name:carAnimation;       /*名称*/  
  25.     -moz-animation-duration:10s;            /*持续时间*/  
  26.     -moz-animation-iteration-count:infinite;        /*迭代次数-无限次*/  
  27.     -moz-animation-timing-function:linear;      /*播放动画时从头到尾都以相同的速度*/  
  28.   
  29.     -ms-animation-name:carAnimation;        /*名称*/  
  30.     -ms-animation-duration:10s;         /*持续时间*/  
  31.     -ms-animation-iteration-count:infinite;     /*迭代次数-无限次*/  
  32.     -ms-animation-timing-function:linear;       /*播放动画时从头到尾都以相同的速度*/  
  33.   
  34.     animation-name:carAnimation;        /*名称*/  
  35.     animation-duration:10s;         /*持续时间*/  
  36.     animation-iteration-count:infinite;     /*迭代次数-无限次*/  
  37.     animation-timing-function:linear;       /*播放动画时从头到尾都以相同的速度*/  
  38.  }  
  39.   
  40.  /*车身*/  
  41.  #chassis  
  42.  {  
  43.     position:absolute;  
  44.     width:400px;  
  45.     height:130px;  
  46.     background:#FF9900;  
  47.     border: 2px solid #FF6600;  
  48.  }  
  49.   
  50.  /*轮胎*/  
  51.  .tire  
  52.  {  
  53.     z-index:1;          /*同上，轮胎也应置于背景的上方*/  
  54.     position:absolute;  
  55.     bottom:0;  
  56.     border-radius:60px;     /*圆半径*/  
  57.     height:120px;       /* 2*radius=height */  
  58.     width:120px;        /* 2*radius=width */  
  59.     background:#0099FF;     /*填充色*/  
  60.     border:1px solid #3300FF;  
  61.   
  62.     -webkit-animation-name:tyreAnimation;  
  63.     -webkit-animation-duration:10s;  
  64.     -webkit-animation-iteration-count:infinite;  
  65.     -webkit-animation-timing-function:linear;  
  66.   
  67.     -moz-animation-name:tyreAnimation;  
  68.     -moz-animation-duration:10s;  
  69.     -moz-animation-iteration-count:infinite;  
  70.     -moz-animation-timing-function:linear;  
  71.   
  72.     -ms-animation-name:tyreAnimation;  
  73.     -ms-animation-duration:10s;  
  74.     -ms-animation-iteration-count:infinite;  
  75.     -ms-animation-timing-function:linear;         
  76.   
  77.     animation-name:tyreAnimation;  
  78.     animation-duration:10s;  
  79.     animation-iteration-count:infinite;  
  80.     animation-timing-function:linear;  
  81.  }  
  82.   
  83.  #fronttire  
  84.  {  
  85.     right:20px;     /*设置右边的轮胎距离边缘的距离为20*/  
  86.  }  
  87.   
  88.  #backtire  
  89.  {  
  90.     left:20px;      /*设置左边的轮胎距离边缘的距离为20*/  
  91.  }  
  92.   
  93.  #grass  
  94.  {  
  95.     position:absolute;  /*背景绝对定位在容器中*/  
  96.     width:100%;  
  97.     height:130px;  
  98.     bottom:0;  
  99.     /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */  
  100.     background:linear-grdaient(bottom,#33CC00,#66FF22);  
  101.     background:-webkit-linear-gradient(bottom,#33CC00,#66FF22);  
  102.     background:-moz-linear-gradient(bottom,#33CC00,#66FF22);  
  103.     background:-ms-linear-gradient(bottom,#33CC00,#66FF22);   
  104.  }  
  105.   
  106.  .hr,.vr  
  107.  {  
  108.     position:absolute;  
  109.     background:#3300FF;  
  110.  }  
  111.   
  112.  .hr  
  113.  {  
  114.     height:1px;  
  115.     width:100%;     /*轮胎的水平线*/  
  116.     left:0;  
  117.     top:60px;  
  118.  }  
  119.   
  120.  .vr  
  121.  {  
  122.     width:1px;  
  123.     height:100%;    /*轮胎的垂直线*/  
  124.     left:60px;  
  125.     top:0;  
  126.  }  

JQuery与CSS3合体

这是一个效果与兼容性俱佳的方式（特别对于IE9暂不支持CSS3而言）

HTML代码（可以看到与CSS3中的HTML代码并无不同）：

[html]  view plain copy print ?
  1. <html>  
  2.    <head>  
  3.       <meta charset="UTF-8" />  
  4.       <title>Animations in HTML5 using CSS3 animations</title>  
  5.        </head>  
  6.    <body>  
  7.       <div id="container">  
  8.       <div id="car">  
  9.          <div id="chassis"></div>  
  10.          <div id="backtire" class="tire">  
  11.          <div class="hr"></div>  
  12.          <div class="vr"></div>  
  13.          </div>  
  14.          <div id="fronttire" class="tire">  
  15.          <div class="hr"></div>  
  16.          <div class="vr"></div>  
  17.          </div>     
  18.       </div>  
  19.       <div id="grass"></div>  
  20.       </div>  
  21.       <footer></footer>  
  22.    </body>  
  23. </html>   

CSS:

[css]  view plain copy print ?
  1. <style>  
  2.          body  
  3.      {  
  4.         padding:0;  
  5.         margin:0;  
  6.          }  
  7.   
  8.       #container  
  9.      {  
  10.         position:relative;  
  11.         width:100%;  
  12.         height:600px;  
  13.         overflow:hidden;        /*这个很重要*/  
  14.      }  
  15.   
  16.      #car  
  17.      {  
  18.         position:absolute;      /*汽车在容器中采用绝对定位*/  
  19.         width:400px;  
  20.         height:210px;       /*汽车的总高度，包括轮胎和底盘*/  
  21.         z-index:1;          /*让汽车在背景的上方*/  
  22.         top:300px;          /*距顶端的距离(y轴)*/  
  23.         left:50px;          /*距左侧的距离(x轴)*/  
  24.      }  
  25.   
  26.       /*车身*/  
  27.      #chassis  
  28.      {  
  29.         position:absolute;  
  30.         width:400px;  
  31.         height:130px;  
  32.         background:#FF9900;  
  33.         border: 2px solid #FF6600;  
  34.      }  
  35.       
  36.      /*轮胎*/  
  37.      .tire  
  38.      {  
  39.         z-index:1;          /*同上，轮胎也应置于背景的上方*/  
  40.         position:absolute;  
  41.         bottom:0;  
  42.         border-radius:60px;     /*圆半径*/  
  43.         height:120px;       /* 2*radius=height */  
  44.         width:120px;        /* 2*radius=width */  
  45.         background:#0099FF;     /*填充色*/  
  46.         border:1px solid #3300FF;  
  47.         -o-transform:rotate(0deg);  /*旋转(单位：度)*/  
  48.         -ms-transform:rotate(0deg);  
  49.         -webkit-transform:rotate(0deg);  
  50.         -moz-transform:rotate(0deg);  
  51.      }  
  52.   
  53.      #fronttire  
  54.      {  
  55.         right:20px;     /*设置右边的轮胎距离边缘的距离为20*/  
  56.      }  
  57.   
  58.      #backtire  
  59.      {  
  60.         left:20px;      /*设置左边的轮胎距离边缘的距离为20*/  
  61.      }  
  62.   
  63.      #grass  
  64.      {  
  65.         position:absolute;  /*背景绝对定位在容器中*/  
  66.         width:100%;  
  67.         height:130px;  
  68.         bottom:0;  
  69.         /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */  
  70.         background:linear-grdaient(bottom,#33CC00,#66FF22);  
  71.         background:-webkit-linear-gradient(bottom,#33CC00,#66FF22);  
  72.         background:-moz-linear-gradient(bottom,#33CC00,#66FF22);  
  73.         background:-ms-linear-gradient(bottom,#33CC00,#66FF22);   
  74.      }  
  75.   
  76.      .hr,.vr  
  77.      {  
  78.         position:absolute;  
  79.         background:#3300FF;  
  80.      }  
  81.   
  82.      .hr  
  83.      {  
  84.         height:1px;  
  85.         width:100%;     /*水平线*/  
  86.         left:0;  
  87.         top:60px;  
  88.      }  
  89.   
  90.      .vr  
  91.      {  
  92.         width:1px;  
  93.         height:100%;    /*垂直线*/  
  94.         left:60px;  
  95.         top:0;  
  96.      }  
  97.   
  98.       </style>  

JS代码：

首先引入在线API：

[javascript]  view plain copy print ?
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  


实现动画代码（相当简洁）：

[javascript]  view plain copy print ?
  1. <script>  
  2.          $(function(){  
  3.          var rot=0;  
  4.          var prefix=$('.tire').css('-o-transform')?'-o-transform':($('.tire').css('-ms-transform')?'-ms-transform':($('.tire').css('-moz-transform')?'-moz-transform':($('.tire').css('-webkit-transform')?'-webkit-transform':'transform')));  
  5.   
  6.          var origin={       /*设置我们的起始点*/  

你可能感兴趣的:(JavaScript,html,jquery,浏览器,css,html5)

  • VNode 码农 小王 javascript
    1.什么是VNode？VNode的全称是VirtualNode,也就是虚拟节点.它是指一个抽象的节点对象，用于描述真实DOM中的元素。在前端框架中，通过操作VNode来实现虚拟DOM，从而提高性能。2.VNode的本质本质上是JavaScript对象,这个对象就是更加轻量级的对DOM的描述3.为什么需要VNode？在前端框架中，我们通常需要在页面中操作DOM元素，如增删改查等操作。但是DOM操作是
  • JavaScript的学习6——jQuery 十五春会
    文章目录jQuery选择器按ID查找按tag查找按class查找按属性查找组合查找多项选择器练习层级选择器子选择器（ChildSelector）过滤器（Filter）表单相关练习查找和过滤操作DOM修改Text和HTML修改CSS显示和隐藏DOM获取DOM信息操作表单修改DOM结构添加DOM删除节点练习事件鼠标事件键盘事件其他事件事件参数取消绑定事件触发条件浏览器安全限制练习动画show/hide
  • 前端面试：React hooks 调用是可以写在 if 语句里面吗？ returnShitBoy 前端react.jsjavascript
    在React中，Hooks是一种新的特性，允许你在函数组件中使用状态（state）和其他React特性。非常重要的一点是，ReactHooks必须遵循特定的规则，以确保组件的行为一致。ReactHooks使用规则只能在函数组件中调用Hook：你只能在React的函数组件或自定义Hooks中调用Hook，而不能在普通JavaScript函数中调用它们。不能在条件语句中调用Hook：Hooks不能放在
  • 深入解析STM32时钟树：从原理到实战配置 Electron-er stm32单片机嵌入式硬件
    目录引言一、STM32时钟树体系架构解析1.1时钟树全景图1.2核心时钟源详解二、时钟信号流向与控制逻辑2.1主时钟路径2.2关键分频系数2.3时钟门控机制三、CubeMX实战配置3.1配置步骤演示3.2代码生成分析四、调试技巧与常见问题4.1时钟诊断方法4.2典型故障排查五、高级应用技巧5.1动态时钟切换5.2时钟安全系统(CSS)5.3超频实践（风险提示）结语引言在嵌入式系统开发中，时钟系统堪
  • pdf怎么转换成word？解锁 PDF 转 Word 的高效转换方法，轻松搞定的实用指南 hello_simon 在线工具php工具效率pdfwordPDF转wordpdf转换
    PDF转换成Word的简易指南在日常的工作和学习中，我们经常需要将PDF文件转换为Word文档，以便于编辑和修改。今天，我将为大家介绍一个简单的方法，利用小白工具网站，轻松实现PDF到Word的转换。一、访问小白工具网站首先，打开你的浏览器，输入网址：https://www.xiaobaitool.net/files/pdf-word/，进入小白工具的PDF转Word页面。这个网站提供了一个在线转
  • React篇之three渲染 这个一个非常哈 react.js前端前端框架
    需求：拖拽右侧面板，里面的three模型能够自适应import{useEffect,useState,useRef}from'react'import'./App.css'import*asTHREEfrom'three';import{GLTFLoader}from'three/addons/loaders/GLTFLoader.js';import{debounce}from'lodash';
  • 对vue VS react的理解 向贤 前端开发vue.jsreact.js前端
    对vueVSreact的理解Vue与React的核心区别在于设计哲学：Vue追求渐进式开发和开箱即用，通过模板语法、响应式系统和官方生态提供低门槛的集成方案。React强调函数式编程和纯JavaScript驱动，以JSX、单向数据流和灵活的生态构建高自由度的视图层。核心差异可总结为：响应式机制、模板vsJSX、API设计、生态策略、性能优化模式。分点论述：1.响应式机制Vue：基于数据劫持（Vue
  • 大文件上传 前端javascript
    大文件上传通常需要分片处理、断点续传等技术来提高上传效率和可靠性。以下是一个简单的JavaScript示例，展示如何实现大文件的分片上传和断点续传：大文件上传上传//请求基准地址axios.defaults.baseURL='http://localhost:3000';//选中的文件varfile=null;//选择文件document.getElementById('fileInput').o
  • HTML标记语言＜head＞中 的几个元素 2301_79698214 html前端
    在HTML文档中，部分包含了文档的元数据（metadata），这对于网页的正确显示和搜索引擎优化（SEO）非常重要。部分通常包含以下几个重要的元素：：定义了网页的标题，这个标题会显示在浏览器的标题栏或页面的标签上。例如：我的网页：用于定义网页的元数据，如字符集、页面描述、关键词、作者、视口设置等。例如：：用于链接外部资源，如CSS文件、图标（favicon）等。例如：：用于直接在文档中嵌入CSS样
  • .net 插件式开发——实现web框架中大数据算法嵌入(BP算法逼近) weixin_34219944 json人工智能
    关于算法的引入：插件式架构设计，可移植性强，利于算法的升级。【插件式开发相关资料】https://www.cnblogs.com/lenic/p/4129096.html以BP算法为例：1、首先定义一个接口规范////////插件的统一入口///publicinterfaceIPluginPerfrom{//////统一算法插件入口//////输出参数的个数///输出参数///输入参数///str
  • HTML5拼图游戏开发经验分享 木木黄木木 html5前端html
    HTML5拼图游戏开发经验分享这里写目录标题HTML5拼图游戏开发经验分享前言项目架构1.文件结构2.核心功能模块技术要点解析1.响应式布局2.图片处理3.拖拽交互4.动画效果性能优化开发心得项目亮点总结源码分享写在最后前言在Web前端开发领域，通过实战项目来提升编程技能是最有效的学习方式之一。今天我要分享一个HTML5拼图游戏的开发经验，这个项目涵盖了现代前端开发的多个重要概念，包括响应式设计、
  • Linux系统之部署记忆配对网页小游戏 江湖有缘 玩转小游戏合集linux服务器web小游戏
    Linux系统之部署记忆配对网页小游戏一、小游戏介绍1.1小游戏简介1.2项目预览二、本次实践介绍2.1本地环境规划2.2本次实践介绍三、检查本地环境3.1检查系统版本3.2检查系统内核版本3.3检查软件源四、安装Apache24.1安装Apache2软件4.2启动apache2服务4.3查看apache2服务状态4.4防火墙设置4.5浏览器测试web服务五、部署小游戏5.1下载小游戏源码5.2查
  • 图像工具插件：Editor.js 的图像处理解决方案 贡沫苏Truman
    图像工具插件：Editor.js的图像处理解决方案imageImageBlockforEditor.js项目地址:https://gitcode.com/gh_mirrors/image8/imageEditor.js的图像工具插件是一个强大的开源项目，致力于为Editor.js富文本编辑器提供图像处理功能。该项目主要使用JavaScript编程语言，并且是基于Editor.js的插件架构进行开发
  • vue+ts+electron从客户端跳转网页，public文件中的图片不显示如何解决以及动态环境配置中数据获取不到 是小许同学吖 vue.jselectronubuntu前端typescript
    客户端跳转网页遇到的问题跳转新窗口打开浏览器客户端跳转网页，public文件中的图片不显示如何解决在.env.dev中设置的环境配置信息获取不到跳转新窗口打开浏览器从客户端跳转新窗口打开浏览器代码如下：//跳转新窗口，打开浏览器constgoNewWindows=(item:any)=>{console.log(item
  • Node.js Web 模块详解 froginwe11 开发语言
    Node.jsWeb模块详解引言Node.js作为一款流行的JavaScript运行环境，以其高性能、事件驱动和非阻塞I/O模型而闻名。在Node.js中，模块是构建应用程序的基础，也是其强大的关键所在。本文将详细介绍Node.js的Web模块，包括其基本概念、常用模块及其应用。模块的概念在Node.js中，模块是一种组织代码的方式，它将代码分割成独立的、可复用的部分。模块不仅可以减少代码的冗余，
  • 【H2O2 | 软件开发】事件循环机制 过期的H2O2 【H2O2】全栈面试题前端javascript
    目录前言开篇语准备工作正文概念流程事件队列类型示例结束语前言开篇语本系列为短篇，每次讲述少量知识点，无需一次性灌输太多的新知识点。该主题文章主要是围绕前端、全栈开发相关面试常见问题撰写的，希望对诸位有所帮助。准备工作概念篇，不对开发环境作要求。正文概念事件循环（EventLoop）是处理异步事件的一种机制，特别是在单线程环境中（如JavaScript在浏览器或Node.js中的运行）。它允许程序在
  • 国产编辑器EverEdit - 脚本(解锁文本编辑的无限可能) 编辑器爱好者 妙用编辑器#《EverEdit使用手册》编辑器EverEditEmEditorNotepad
    1脚本1.1应用场景  脚本是一种功能扩展代码，用于提供一些编辑器通用功能提供不了的功能，帮助用户在特定工作场景下提高工作效率，几乎所有主流的编辑器、IDE都支持脚本。  EverEdit的脚本支持js(语法与javascript类似)、VBScript两种编程语言(注：也可以支持其他语言，但较复杂)，EverEdit本身提供了大量对编辑器自身操作的API，通过脚本语言和API，用户可以极大的扩展
  • React Native Navigation 清晨稻香 前端reactnative
    ReactNativeNavigation官方文档路由跳转到app第一个页面方法navigation.popToTop()navigation.navigate(‘routeName’)不能用navigation.push(‘Home’)，这个会入栈一个新路由页，而不是回到首页页面栈&跳转和浏览器环境类似，Native也是用栈来保存页面访问历史，但是不同与浏览器只有入栈一个页面，出栈一个页面两种操
  • Sass (Scss) 与 Less 的区别与选择 王强你强 sassscssless
    在前端开发中，CSS预处理器如Sass（SyntacticallyAwesomeStylesheets）和Less被广泛使用，它们通过引入变量、嵌套规则、混合、函数等特性，使CSS的开发过程更加高效和灵活。Sass和Less作为两大主流CSS预处理器，各自具有独特的优点和特性。本文将详细探讨Sass（特别是其语法扩展Scss）与Less之间的区别，并提供选择建议。1.语法差异Sass最初是使用缩进
  • vue2安装scss 活宝小娜 vuescss前端css
    vue2安装scss1、下载npminstall-Dsasssass-loader2、新建src/styles/variables.scss文件，并在里面写一些常用的公共样式，在vue.config.js中添加css部分const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({transpileDepen
  • QT CSS 选择器 m0_55576290 qtqtcss开发语言
    在Qt的样式表（StyleSheet）中，选择器（Selector）是用来指定样式应用对象的一种语法。它类似于CSS中的选择器，用于明确指定哪些控件（或控件的子元素）应该应用特定的样式。通过使用选择器，你可以更精确地控制样式的作用范围，避免样式被意外继承或应用到错误的控件上。1.选择器的类型在Qt的样式表中，有几种常用的选择器：（1）类型选择器（TypeSelector）类型选择器基于控件的类名来
  • CSS中相对定位使用详情 ~废弃回忆 �༄ HTMLcss前端CSS中相对定位使用详情
    1.如何设置相对定位?给元素设置postition:relative即可实现相对定位.可以使用left,right,top,bottom四个属性调整位置.2.相对定位的参考点在哪里?相对于自己原来的位置3.相对定位的特点:1.不会脱离文档流,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响.2.定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的.默认规则是:定位的元素
  • spring 的model repository service controller的功能 LCY133 web开发springjava后端
    1.Controller层（控制层）•功能：负责接收和处理HTTP请求，协调客户端与业务逻辑之间的交互。•核心职责：•请求处理：解析HTTP请求参数（如URL参数、Body数据、Headers）。•路由分发：根据请求路径（@RequestMapping）调用对应的Service方法。•响应生成：返回格式化数据（如JSON、XML）或视图（如HTML页面）。•输入校验：验证请求参数的合法性（如使用@
  • React Native 性能调试指南 一个前端人 react-nativereactnativereact.jsjavascript
    写在前面在开发ReactNative应用时，性能优化是一个至关重要的环节。良好的性能不仅可以提升用户体验，还能减少应用的资源消耗，提高应用的稳定性。本文将详细介绍如何对ReactNative应用进行性能调试和优化，包括性能综述、编译速度优化、列表配置优化、JavaScript加载优化以及Profiling。一、性能综述在开始性能调试之前，了解一些基本概念和工具是非常重要的。以下是一些关键点：FPS
  • CSS中绝对定位 ~废弃回忆 �༄ HTMLcss前端CSS中绝对定位
    1.如何设置绝对定位?给元素设置postition:absolute即可实现绝对定位可以使用left,right,top,bottom四个属性调整位置2.绝对定位的参考点在哪里?参考他的包含块.什么是包含块?1.对于没有脱离文档流的元素:包含块就是父元素;2.对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没有定位,那包含块就是整个页面)3.绝对定位元素的特点:1.脱离文
  • 用css写背景模糊的三种情况 小竹子14 css前端
    1.背景模糊这种最简单也是最直接的，这里展示两种背景模糊的写法：1.用backdrop-filter的一个子属性blur进行设置模糊（这里的值代表的是将n✖n方格里面的像素的颜色做加权平均，即高斯模糊。2.用filter直接进行设置模糊。这里需要注意的是，filter会直接影响元素的内容，而backdrop-filter作用于元素的背景。通常情况下，使用backdrop-filter会使整个元素的
  • 如何解决 Apache 直接显示 PHP 源码问题 ？ apachephp
    在设置web服务器时，您可能会遇到浏览器直接显示原始PHP代码的问题。这通常意味着您的服务器没有正确处理PHP文件。让我们看看为什么会发生这种情况，以及如何在基于Debian和RHEL的系统上修复它。可能的原因PHP模块没有在Apache中正确安装或配置。Apache配置中.php文件没有链接到PHP模块。.htaccess文件中有错误。1.安装配置PHP首先，确保安装了PHP和ApachePHP
  • JS内置构造函数有哪些？？？ 全马必破三 javascript开发语言ecmascript
    JavaScript内置构造函数是语言本身提供的一些特殊函数，用于创建特定类型的对象。常见的内置构造函数包括Object、Array、String、Number、Boolean、Date、RegExp等。1、Object构造函数（用于创建一个普通对象）常用方法：Object.keys(obj)：返回一个包含对象所有自身可枚举属性的键的数组。Object.values(obj)：返回一个包含对象所有
  • HTML 样式之 CSS 全面解析 烂蜻蜓 HTMLhtmlcss前端
    在网页开发的世界里，HTML负责搭建页面的结构，而CSS（CascadingStyleSheets，层叠样式表）则承担着渲染HTML元素标签样式的重任，赋予网页丰富的视觉效果。一、CSS的魅力展现CSS能够实现诸如改变文字的样式与颜色（Look!Stylesandcolors）、灵活操控文本（ManipulateText）、设置元素的颜色和盒子模型（Colors,Boxes）等诸多功能，极大地提升
  • 响应式设计已死？流体布局才是未来！ 前端javascript
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在当今的Web设计领域，挑战从未如此巨大。各种屏幕尺寸和分辨率的智能设备层出不穷，要让网站在所有设备上保持一致的用户体验，难度可想而知。但别担心，流体布局（FluidLayout）正是为了解决这一问题而生。它不仅适用于超大屏幕，同样也能完美适配小型移动设备，真正做到自适应！接下来，我们深入了解流体布局的原理
  • Java 并发包之线程池和原子计数 lijingyao8206 Java计数ThreadPool并发包java线程池
    对于大数据量关联的业务处理逻辑，比较直接的想法就是用JDK提供的并发包去解决多线程情况下的业务数据处理。线程池可以提供很好的管理线程的方式，并且可以提高线程利用率，并发包中的原子计数在多线程的情况下可以让我们避免去写一些同步代码。     这里就先把jdk并发包中的线程池处理器ThreadPoolExecutor 以原子计数类AomicInteger 和倒数计时锁C
  • java编程思想 抽象类和接口 百合不是茶 java抽象类接口
    接口c++对接口和内部类只有简介的支持,但在java中有队这些类的直接支持   1 ,抽象类 :  如果一个类包含一个或多个抽象方法,该类必须限定为抽象类(否者编译器报错)   抽象方法 : 在方法中仅有声明而没有方法体    package com.wj.Interface;
  • [房地产与大数据]房地产数据挖掘系统 comsci 数据挖掘
           随着一个关键核心技术的突破,我们已经是独立自主的开发某些先进模块,但是要完全实现,还需要一定的时间...        所以,除了代码工作以外,我们还需要关心一下非技术领域的事件..比如说房地产     &nb
  • 数组队列总结 沐刃青蛟 数组队列
          数组队列是一种大小可以改变，类型没有定死的类似数组的工具。不过与数组相比，它更具有灵活性。因为它不但不用担心越界问题，而且因为泛型（类似c++中模板的东西）的存在而支持各种类型。      以下是数组队列的功能实现代码：   import List.Student; public class
  • Oracle存储过程无法编译的解决方法 IT独行者 oracle存储过程　
    今天同事修改Oracle存储过程又导致2个过程无法被编译，流程规范上的东西，Dave 这里不多说，看看怎么解决问题。   1.     查看无效对象 XEZF@xezf(qs-xezf-db1)> select object_name,object_type,status from all_objects where status='IN
  • 重装系统之后oracle恢复 文强chu oracle
    前几天正在使用电脑，没有暂停oracle的各种服务。 突然win8.1系统奔溃，无法修复，开机时系统 提示正在搜集错误信息，然后再开机，再提示的无限循环中。 无耐我拿出系统u盘 准备重装系统，没想到竟然无法从u盘引导成功。 晚上到外面早了一家修电脑店，让人家给装了个系统，并且那哥们在我没反应过来的时候， 直接把我的c盘给格式化了 并且清理了注册表，再装系统。 然后的结果就是我的oracl
  • python学习二（ 一些基础语法） 小桔子 pthon基础语法
    紧接着把！昨天没看继续看django 官方教程，学了下python的基本语法 与c类语言还是有些小差别： 1.ptyhon的源文件以UTF-8编码格式 2. /   除 结果浮点型 //  除 结果整形 %   除 取余数 *   乘 **  乘方 eg 5**2 结果是5的2次方25 _&
  • svn 常用命令 aichenglong SVN版本回退
    1 svn回退版本   1)在window中选择log,根据想要回退的内容,选择revert this version或revert chanages from this version 两者的区别:   revert this version:表示回退到当前版本(该版本后的版本全部作废)   revert chanages from this versio
  • 某小公司面试归来 alafqq 面试
    先填单子，还要写笔试题，我以时间为急，拒绝了它。。时间宝贵。 老拿这些对付毕业生的东东来吓唬我。。 面试官很刁难，问了几个问题，记录下； 1，包的范围。。。public,private,protect. --悲剧了 2，hashcode方法和equals方法的区别。谁覆盖谁.结果，他说我说反了。 3，最恶心的一道题，抽象类继承抽象类吗？（察，一般它都是被继承的啊） 4，stru
  • 动态数组的存储速度比较 集合框架 百合不是茶 集合框架
    集合框架： 自定义数据结构(增删改查等) package 数组; /** * 创建动态数组 * @author 百合 * */ public class ArrayDemo{ //定义一个数组来存放数据 String[] src = new String[0]; /** * 增加元素加入容器 * @param s要加入容器
  • 用JS实现一个JS对象，对象里有两个属性一个方法 bijian1013 js对象
    <html> <head> </head> <body> 用js代码实现一个js对象，对象里有两个属性，一个方法 </body> <script> var obj={a:'1234567',b:'bbbbbbbbbb',c:function(x){
  • 探索JUnit4扩展：使用Rule bijian1013 java单元测试JUnitRule
            在上一篇文章中，讨论了使用Runner扩展JUnit4的方式，即直接修改Test Runner的实现(BlockJUnit4ClassRunner)。但这种方法显然不便于灵活地添加或删除扩展功能。下面将使用JUnit4.7才开始引入的扩展方式——Rule来实现相同的扩展功能。 1. Rule       &n
  • [Gson一]非泛型POJO对象的反序列化 bit1129 POJO
    当要将JSON数据串反序列化自身为非泛型的POJO时，使用Gson.fromJson(String, Class)方法。自身为非泛型的POJO的包括两种： 1. POJO对象不包含任何泛型的字段 2. POJO对象包含泛型字段，例如泛型集合或者泛型类 Data类 a.不是泛型类， b.Data中的集合List和Map都是泛型的 c.Data中不包含其它的POJO    
  • 【Kakfa五】Kafka Producer和Consumer基本使用 bit1129 kafka
    0.Kafka服务器的配置 一个Broker， 一个Topic Topic中只有一个Partition（）   1. Producer： package kafka.examples.producers; import kafka.producer.KeyedMessage; import kafka.javaapi.producer.Producer; impor
  • lsyncd实时同步搭建指南——取代rsync+inotify ronin47
    1. 几大实时同步工具比较 1.1 inotify + rsync 最近一直在寻求生产服务服务器上的同步替代方案，原先使用的是 inotify + rsync，但随着文件数量的增大到100W+，目录下的文件列表就达20M，在网络状况不佳或者限速的情况下，变更的文件可能10来个才几M，却因此要发送的文件列表就达20M，严重减低的带宽的使用效率以及同步效率；更为要紧的是，加入inotify
  • java-9. 判断整数序列是不是二元查找树的后序遍历结果 bylijinnan java
    public class IsBinTreePostTraverse{ static boolean isBSTPostOrder(int[] a){ if(a==null){ return false; } /*1.只有一个结点时，肯定是查找树 *2.只有两个结点时，肯定是查找树。例如{5,6}对应的BST是 6 {6,5}对应的BST是
  • MySQL的sum函数返回的类型 bylijinnan javaspringsqlmysqljdbc
    今天项目切换数据库时，出错 访问数据库的代码大概是这样： String sql = "select sum(number) as sumNumberOfOneDay from tableName"; List<Map> rows = getJdbcTemplate().queryForList(sql); for (Map row : rows
  • java设计模式之单例模式 chicony java设计模式
    在阎宏博士的《JAVA与模式》一书中开头是这样描述单例模式的： 　　作为对象的创建模式，单例模式确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。这个类称为单例类。 单例模式的结构 　　单例模式的特点： 单例类只能有一个实例。 单例类必须自己创建自己的唯一实例。 单例类必须给所有其他对象提供这一实例。 　　饿汉式单例类   publ
  • javascript取当月最后一天 ctrain JavaScript
    <!--javascript取当月最后一天--> <script language=javascript> var current = new Date(); var year = current.getYear(); var month = current.getMonth(); showMonthLastDay(year, mont
  • linux tune2fs命令详解 daizj linuxtune2fs查看系统文件块信息
    一.简介： tune2fs是调整和查看ext2/ext3文件系统的文件系统参数，Windows下面如果出现意外断电死机情况，下次开机一般都会出现系统自检。Linux系统下面也有文件系统自检，而且是可以通过tune2fs命令，自行定义自检周期及方式。 二.用法： Usage: tune2fs [-c max_mounts_count] [-e errors_behavior] [-g grou
  • 做有中国特色的程序员 dcj3sjt126com 程序员
      从出版业说起 网络作品排到靠前的，都不会太难看，一般人不爱看某部作品也是因为不喜欢这个类型，而此人也不会全不喜欢这些网络作品。究其原因，是因为网络作品都是让人先白看的，看的好了才出了头。而纸质作品就不一定了，排行榜靠前的，有好作品，也有垃圾。 许多大牛都是写了博客，后来出了书。这些书也都不次，可能有人让为不好，是因为技术书不像小说，小说在读故事，技术书是在学知识或温习知识，有
  • Android：TextView属性大全 dcj3sjt126com textview
    android:autoLink    设置是否当文本为URL链接/email/电话号码/map时，文本显示为可点击的链接。可选值(none/web/email/phone/map/all)  android:autoText    如果设置，将自动执行输入值的拼写纠正。此处无效果，在显示输入法并输
  • tomcat虚拟目录安装及其配置 eksliang tomcat配置说明tomca部署web应用tomcat虚拟目录安装
    转载请出自出处：http://eksliang.iteye.com/blog/2097184 1.-------------------------------------------tomcat  目录结构 config：存放tomcat的配置文件 temp  ：存放tomcat跑起来后存放临时文件用的 work   ： 当第一次访问应用中的jsp
  • 浅谈：APP有哪些常被黑客利用的安全漏洞 gg163 APP
    首先，说到APP的安全漏洞，身为程序猿的大家应该不陌生；如果抛开安卓自身开源的问题的话，其主要产生的原因就是开发过程中疏忽或者代码不严谨引起的。但这些责任也不能怪在程序猿头上，有时会因为BOSS时间催得紧等很多可观原因。由国内移动应用安全检测团队爱内测（ineice.com）的CTO给我们浅谈关于Android 系统的开源设计以及生态环境。 1. 应用反编译漏洞：APK 包非常容易被反编译成可读
  • C#根据网址生成静态页面 hvt Web.netC#asp.nethovertree
    HoverTree开源项目中HoverTreeWeb.HVTPanel的Index.aspx文件是后台管理的首页。包含生成留言板首页，以及显示用户名，退出等功能。根据网址生成页面的方法：   bool CreateHtmlFile(string url, string path) { //http://keleyi.com/a/bjae/3d10wfax.htm stri
  • SVG 教程 （一） 天梯梦 svg
    SVG 简介 SVG 是使用 XML 来描述二维图形和绘图程序的语言。 学习之前应具备的基础知识： 继续学习之前，你应该对以下内容有基本的了解： HTML XML 基础 如果希望首先学习这些内容，请在本站的首页选择相应的教程。 什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量
  • 一个简单的java栈 luyulong java数据结构栈
    public class MyStack { private long[] arr; private int top; public MyStack() { arr = new long[10]; top = -1; } public MyStack(int maxsize) { arr = new long[maxsize]; top
  • 基础数据结构和算法八：Binary search sunwinner AlgorithmBinary search
    Binary search needs an ordered array so that it can use array indexing to dramatically reduce the number of compares required for each search, using the classic and venerable binary search algori
  • 12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！ 刘星宇 c面试
    12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！ 1.gets()函数 问：请找出下面代码里的问题： #include<stdio.h> int main(void) {     char buff[10];     memset(buff,0,sizeof(buff));
  • ITeye 7月技术图书有奖试读获奖名单公布 ITeye管理员 活动ITeye试读
    ITeye携手人民邮电出版社图灵教育共同举办的7月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 7月试读活动回顾： http://webmaster.iteye.com/blog/2092746 本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）： 《Java性能优化权威指南》
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他