借@阿里巴巴 耍了个帅——HTML5 JavaScript实现图片文字识别与提取

 

写在前面

 


8月底的时候，@阿里巴巴 推出了一款名为“拯救斯诺克”的闯关游戏，作为前端校园招聘的热身，做的相当不错，让我非常喜欢。后来又传出了一条消息，阿里推出了A-star（阿里星）计划，入职阿里的技术培训生，将接受CTO等技术大牛的封闭培训，并被安排到最有挑战的项目中，由技术带头人担任主管。于是那几天关注了一下阿里巴巴的消息，结果看到这么一条微博（http://e.weibo.com/1897953162/A79Lpcvhi）：

此刻，@阿里足球队 可爱的队员们已经出征北上。临走前，后防线的队员们留下一段亲切的问候，送给对手，看@新浪足球队 的前锋们如何破解。@袁甲 @蓝耀栋 #阿里新浪足球世纪大战#

借@阿里巴巴 耍了个帅——HTML5 JavaScript实现图片文字识别与提取_第1张图片

目测是一段Base64加密过的信息，但无奈的是这段信息是写在图片里的，我想看到解密后的内容难道还一个字一个字地打出来？这么懒这么怕麻烦的我肯定不会这么做啦→_→想到之前有看到过一篇关于HTML5实现验证码识别的文章，于是顿时觉得也应该动手尝试一下，这才是极客的风范嘛！


 

Demo与截图

 


先来一个大家最喜欢的Demo地址（识别过程需要一定时间，请耐心等待，识别结果请按F12打开Console控制台查看）：

http://www.clanfei.com/demos/recognition/


再来张效果图：
借@阿里巴巴 耍了个帅——HTML5 JavaScript实现图片文字识别与提取_第2张图片


思路

实现一个算法，思路是最重要的，而实现不过是把思想转化为能够运行的代码。

简单地说，要进行文本识别，自然是拿图片的数据与文字的图形数据进行对比，找到与图片数据匹配程度最高的字符。

首先，先确定图片中文本所用的字体、字号、行距等信息，打开PhotoShop，确定了字体为微软雅黑，16像素，行距为24，Base64文字的开始坐标为(8, 161)。

然后，确定要进行匹配的字库，Base64编码中可能出现的字符为26个字母大小写、10个数字、加号、斜杠，但目测在图片中没有斜杠出现，因此字库应该为：

0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+

接着，是确定如何判断字符是否匹配，由于只需要对字型进行匹配，因此颜色值对算法并无用处，因此将其灰度化（详见百度百科），并使用01数组表示，1代表该像素点落在此字符图形上，0反之，而如何确定该某个灰度值在数组中应该表示为0还是1，这个转换公式更是算法中的关键。

最后，将字型的灰度化数据与图片中文字部分的灰度化数据进行对比，将误差最小的字型作为匹配到的字符，然后进行下一个字符的匹配，直到图片中所有字符匹配完毕为止。


递归实现


详细的思路于代码注释中，个人觉得这样结合上下文更为容易理解（注：代码应运行于服务器环境，否则会出现跨域错误，代码行数虽多，但注释就占了大半，有兴趣可以耐心看完，图片资源于上方“写在前面”）。

  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>文字识别</title>
  6. </head>
  7. <body>
  8.         <canvas id="canvas" width="880" height="1500"></canvas>
  9.         <script type="text/javascript">
  10.         var image = new Image();
  11.         image.onload = recognition;
  12.         image.src = 'image.jpg';
  13.         function recognition(){
  14.                 // 开始时间，用于计算耗时
  15.                 var beginTime = new Date().getTime();
  16.                 // 获取画布
  17.                 var canvas = document.getElementById('canvas');
  18.                 // 字符库
  19.                 var letters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+';
  20.                 // 字型数据
  21.                 var letterData = {};
  22.                 // 获取context
  23.                 var context = canvas.getContext('2d');
  24.                 // 设置字体、字号
  25.                 context.font = '16px 微软雅黑';
  26.                 // 设置文字绘制基线为文字顶端
  27.                 context.textBaseline = 'top';
  28.                 // 一个循环获取字符库对应的字型数据
  29.                 for(var i = 0; i < letters.length; ++i){
  30.                         var letter = letters[i];
  31.                         // 获取字符绘制宽度
  32.                         var width = context.measureText(letter).width;
  33.                         // 绘制白色背景，与图片背景对应
  34.                         context.fillStyle = '#fff';
  35.                         context.fillRect(0, 0, width, 22);
  36.                         // 绘制文字，以获取字型数据
  37.                         context.fillStyle = '#000';
  38.                         context.fillText(letter, 0, 0);
  39.                         // 缓存字型灰度化0-1数据
  40.                         letterData[letter] = {
  41.                                 width : width,
  42.                                 data : getBinary(context.getImageData(0, 0, width, 22).data)
  43.                         }
  44.                         // 清空该区域以获取下个字符字型数据
  45.                         context.clearRect(0, 0, width, 22);
  46.                 }
  47.                 // console.log(letterData);
  48.                 
  49.                 // 绘制图片
  50.                 context.drawImage(this, 0, 0);
  51.                 // 要识别的文字开始坐标
  52.                 var x = beginX = 8;
  53.                 var y = beginY = 161;
  54.                 // 行高
  55.                 var lineHeight = 24;
  56.                 // 递归次数
  57.                 var count = 0;
  58.                 // 结果文本
  59.                 var result = '';
  61.                 // 递归开始
  62.                 findLetter(beginX, beginY, '');
  63.                 // 递归函数
  64.                 function findLetter(x, y, str){
  65.                         // 找到结果文本，则递归结束
  66.                         if(result){
  67.                                 return;
  68.                         }
  69.                         // 递归次数自增1
  70.                         ++ count;
  71.                         // console.log(str);
  72.                         // 队列，用于储存可能匹配的字符
  73.                         var queue = [];
  74.                         // 循环匹配字符库字型数据
  75.                         for(var letter in letterData){
  76.                                 // 获取当前字符宽度
  77.                                 var width = letterData[letter].width;
  78.                                 // 获取该矩形区域下的灰度化0-1数据
  79.                                 var data = getBinary(context.getImageData(x, y, width, 22).data);
  80.                                 // 当前字符灰度化数据与当前矩形区域下灰度化数据的偏差量
  81.                                 var deviation = 0;
  82.                                 // 一个临时变量以确定是否到了行末
  83.                                 var isEmpty = true;
  84.                                 // 如果当前矩形区域已经超出图片宽度，则进行下一个字符匹配
  85.                                 if(x + width > 440){
  86.                                         continue;
  87.                                 }
  88.                                 // 计算偏差
  89.                                 for(var i = 0, l = data.length; i < l; ++i){
  90.                                         // 如果发现存在的有效像素点，则确定未到行末
  91.                                         if(isEmpty && data[i]){
  92.                                                 isEmpty = false;
  93.                                         }
  94.                                         // 不匹配的像素点，偏差量自增1
  95.                                         if(data[i] != letterData[letter].data[i]){
  96.                                                 ++deviation;
  97.                                         }
  98.                                 }
  99.                                 // 由于调试时是在猎豹浏览器下进行的，而不同浏览器下的绘图API表现略有不同
  100.                                 // 考虑到用Chrome的读者应该也不少，故简单地针对Chrome对偏差进行一点手动微调
  101.                                 // （好吧，我承认我是懒得重新调整getBinary方法的灰度化、0-1化公式=_=||）
  102.                                 // 下面这段if分支在猎豹浏览器下可以删除
  103.                                 if(letter == 'F' || letter == 'E'){
  104.                                         deviation -= 6;
  105.                                 }
  106.                                 // 如果匹配完所有17行数据，则递归结束
  107.                                 if(y > beginY + lineHeight * 17){
  108.                                         result = str;
  109.                                         break;
  110.                                 }
  111.                                 // 如果已经到了行末，重置匹配坐标
  112.                                 if(isEmpty){
  113.                                         x = beginX;
  114.                                         y += lineHeight;
  115.                                         str += '\n';
  116.                                 }
  117.                                 // 如果偏差量与宽度的比值小于3，则纳入匹配队列中
  118.                                 // 这里也是算法中的关键点，怎样的偏差量可以纳入匹配队列中
  119.                                 // 刚开始是直接用绝对偏差量判断，当偏差量小于某个值的时候则匹配成功，但调试过程中发现不妥之处
  120.                                 // 字符字型较小的绝对偏差量自然也小，这样l，i等较小的字型特别容易匹配成功
  121.                                 // 因此使用偏差量与字型宽度的比值作为判断依据较为合理
  122.                                 // 而这个判断值3的确定也是难点之一，大了递归的复杂度会大为增长，小了很可能将正确的字符漏掉
  123.                                 if(deviation / width < 3){
  124.                                         queue.push({
  125.                                                 letter : letter,
  126.                                                 width : width,
  127.                                                 deviation : deviation
  128.                                         });
  129.                                 }
  130.                         }
  131.                         // 如果匹配队列不为空
  132.                         if(queue.length){
  133.                                 // 对队列进行排序，同样是根据偏差量与字符宽度的比例
  134.                                 queue.sort(compare);
  135.                                 // console.log(queue);
  136.                                 // 从队头开始进行下一个字符的匹配
  137.                                 for(var i = 0; i < queue.length && ! result; ++i){
  138.                                         var item = queue[i];
  139.                                         // 下一步递归
  140.                                         findLetter(x + item.width, y, str + item.letter);
  141.                                 }
  142.                         }else{
  143.                                 return false;
  144.                         }
  145.                 }
  146.                 // 递归结束
  148.                 // 两个匹配到的字符的比较方法，用于排序
  149.                 function compare(letter1, letter2){
  150.                         return letter1.deviation / letter1.width - letter2.deviation / letter2.width;
  151.                 }
  153.                 // 图像数据的灰度化及0-1化
  154.                 function getBinary(data){
  155.                         var binaryData = [];
  156.                         for(var i = 0, l = data.length; i < l; i += 4){
  157.                                 // 尝试过三种方式
  158.                                 // 一种是正常的灰度化公式，无论系数如何调整都无法与绘制的文字字型数据很好地匹配
  159.                                 // binaryData[i / 4] = (data[i] * 0.3 + data[i + 1] * 0.59 + data[i + 2] * 0.11) < 90;
  160.                                 // 一种是自己是通过自己手动调整系数，结果虽然接近但总是不尽人意
  161.                                 // binaryData[i / 4] = data[i] < 250 && data[i + 1] < 203 && data[i + 2] < 203;
  162.                                 // 最后使用了平均值，结果比较理想
  163.                                 binaryData[i / 4] = (data[i] + data[i + 1] + data[i + 2]) / 3 < 200;
  164.                         }
  165.                         return binaryData;
  166.                 }
  167.                 console.log(result);
  168.                 // 输出耗时
  169.                 console.log(count, (new Date().getTime() - beginTime) / 1000 + ' s');
  171.                 // 将文字绘制到图片对应位置上，以方便查看提取是否正确
  172.                 context.drawImage(this, this.width, 0);
  173.                 var textArray = result.split('\n');
  174.                 for(var i = 0; i < textArray.length; ++i){
  175.                         context.fillText(textArray[i], this.width + beginX, beginY + lineHeight * i);
  176.                 }
  177.         }
  178.         </script>
  179. </body>
  180. </html>


运行环境

Win7 64位，i3-3220 CPU 3.30 GHz，8G内存


运行结果


  1. yv66vgAAADIAHQoABgAPCQAQABEIABIKABMAFAcAF
  2. QcAFgEABjxpbml0PgEAAygpVgEABENvZGUB
  3. AA9MaW5lTnVtYmVyVGFibGUBAARtYWluAQAWKFtMa
  4. mF2YS9sYW5nL1N0cmluZzspVgEAClNvdXJj
  5. ZUZpbGUBAAlNYWluLmphdmEMAAcACAcAFwwAGAA
  6. ZAQBv5paw5rWq6Laz55CD6Zif5a6e5Yqb6LaF
  7. 576k77yM6Zi15a656LGq5Y2O44CC5LmF5Luw5aSn5ZC
  8. N77yM5ZGo5pel5LiA5oiY77yM6L+Y5pyb
  9. 5LiN6YGX5L2Z5Yqb77yM5LiN5ZCd6LWQ5pWZ44CCBw
  10. AaDAAbABwBAARNYWluAQAQamF2YS9sYW5n
  11. L09iamVjdAEAEGphdmEvbGFuZy9TeXN0ZW0BAANvdX
  12. QBABVMamF2YS9pby9QcmludFN0cmVhbTsB
  13. ABNqYXZhL2lvL1ByaW50U3RyZWFtAQAHcHJpbnRsbgE
  14. AFShMamF2YS9sYW5nL1N0cmluZzspVgAh
  15. AAUABgAAAAAAAgABAAcACAABAAkAAAAdAAEAAQA
  16. AAAUqtwABsQAAAAEACgAAAAYAAQAAAAEACQAL
  17. AAwAAQAJAAAAJQACAAEAAAAJsgACEgO2AASxAAAA
  18. AQAKAAAACgACAAAAAwAIAAQAAQANAAAAAgAO
  20. 715 1.984 s（猎豹）
  21. 772 15.52 s（Chrome）

（递归次数谷歌只比猎豹多几十，耗时却对了十几秒，看来猎豹真的比Chrome快？）


非递归实现


其实非递归实现只是递归实现前做的一点小尝试，只在猎豹下调试完成，因为不舍得删，所以顺便贴出来了，使用Chrome的各位就不要跑了（我真的不是在给猎豹做广告= =||）。

  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>文字识别</title>
  6. </head>
  7. <body>
  8.         <canvas id="canvas" width="880" height="1500"></canvas>
  9.         <script type="text/javascript">
  10.         var image = new Image();
  11.         image.onload = recognition;
  12.         image.src = 'image.jpg';
  13.         function recognition(){
  14.                 // 开始时间，用于计算耗时
  15.                 var beginTime = new Date().getTime();
  16.                 // 获取画布
  17.                 var canvas = document.getElementById('canvas');
  18.                 // 字符库
  19.                 var letters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+';
  20.                 // 字型数据
  21.                 var letterData = {};
  22.                 // 获取context
  23.                 var context = canvas.getContext('2d');
  24.                 // 设置字体、字号
  25.                 context.font = '16px 微软雅黑';
  26.                 // 设置文字绘制基线为文字顶端
  27.                 context.textBaseline = 'top';
  28.                 // 一个循环获取字符库对应的字型数据
  29.                 for(var i = 0; i < letters.length; ++i){
  30.                         var letter = letters[i];
  31.                         // 获取字符绘制宽度
  32.                         var width = context.measureText(letter).width;
  33.                         // 绘制白色背景，与图片背景对应
  34.                         context.fillStyle = '#fff';
  35.                         context.fillRect(0, 0, width, 22);
  36.                         // 绘制文字，以获取字型数据
  37.                         context.fillStyle = '#000';
  38.                         context.fillText(letter, 0, 0);
  39.                         // 缓存字型灰度化0-1数据
  40.                         letterData[letter] = {
  41.                                 width : width,
  42.                                 data : getBinary(context.getImageData(0, 0, width, 22).data)
  43.                         }
  44.                         // 清空该区域以获取下个字符字型数据
  45.                         context.clearRect(0, 0, width, 22);
  46.                 }
  47.                 // console.log(letterData);
  48.                 
  49.                 // 绘制图片
  50.                 context.drawImage(this, 0, 0);
  51.                 // 要识别的文字开始坐标
  52.                 var x = beginX = 8;
  53.                 var y = beginY = 161;
  54.                 // 行高
  55.                 var lineHeight = 24;
  56.                 // 结果文本
  57.                 var result = '';
  59.                 // 非递归开始 
  60.                 var count = 0;
  61.                 while(y <= 569 && ++count < 1000){
  62.                         // 当前最匹配的字符
  63.                         var trueLetter = {letter: null, width : null, deviation: 100};
  64.                         // 循环匹配字符
  65.                         for(var letter in letterData){
  66.                                 // 获取当前字符宽度
  67.                                 var width = letterData[letter].width;
  68.                                 // 获取该矩形区域下的灰度化0-1数据
  69.                                 var data = getBinary(context.getImageData(x, y, width, 22).data);
  70.                                 // 当前字符灰度化数据与当前矩形区域下灰度化数据的偏差量
  71.                                 var deviation = 0;
  72.                                 // 一个临时变量以确定是否到了行末
  73.                                 var isEmpty = true;
  74.                                 // 如果当前矩形区域已经超出图片宽度，则进行下一个字符匹配
  75.                                 if(x + width > this.width){
  76.                                         continue;
  77.                                 }
  78.                                 // 计算偏差
  79.                                 for(var i = 0, l = data.length; i < l; ++i){
  80.                                         // 如果发现存在的有效像素点，则确定未到行末
  81.                                         if(isEmpty && data[i]){
  82.                                                 isEmpty = false;
  83.                                         }
  84.                                         // 不匹配的像素点，偏差量自增1
  85.                                         if(data[i] != letterData[letter].data[i]){
  86.                                                 ++deviation;
  87.                                         }
  88.                                 }
  89.                                 // 非递归无法遍历所有情况，因此针对某些字符进行一些微调（这里只针对猎豹，Chrome的没做）
  90.                                 // 因为其实非递归实现只是在递归实现前做的一点小尝试，因为不舍得删，就顺便贴出来了
  91.                                 if(letter == 'M'){
  92.                                         deviation -= 6;
  93.                                 }
  94.                                 // 如果偏差量与宽度的比值小于3，则视为匹配成功
  95.                                 if(deviation / width < 3){
  96.                                         // 将偏差量与宽度比值最小的作为当前最匹配的字符
  97.                                         if(deviation / width < trueLetter.deviation / trueLetter.width){
  98.                                                 trueLetter.letter = letter;
  99.                                                 trueLetter.width = width;
  100.                                                 trueLetter.deviation = deviation;
  101.                                         }
  102.                                 }
  103.                         }
  104.                         // 如果已经到了行末，重置匹配坐标，进行下一轮匹配
  105.                         if(isEmpty){
  106.                                 x = beginX;
  107.                                 y += lineHeight;
  108.                                 result += '\n';
  109.                                 continue;
  110.                         }
  111.                         // 如果匹配到的字符不为空，则加入结果字符串，否则输出匹配结果
  112.                         if(trueLetter.letter){
  113.                                 result += trueLetter.letter;
  114.                                 // console.log(x, y, trueLetter.letter);
  115.                         }else{
  116.                                 console.log(x, y, result.length);
  117.                                 break;
  118.                         }
  119.                         // 调整坐标至下一个字符匹配位置
  120.                         x += trueLetter.width;
  121.                 }
  122.                 // 非递归结束
  124.                 // 图像数据的灰度化及0-1化
  125.                 function getBinary(data){
  126.                         var binaryData = [];
  127.                         for(var i = 0, l = data.length; i < l; i += 4){
  128.                                 // 尝试过三种方式
  129.                                 // 一种是正常的灰度化公式，无论系数如何调整都无法与绘制的文字字型数据很好地匹配
  130.                                 // binaryData[i / 4] = (data[i] * 0.3 + data[i + 1] * 0.59 + data[i + 2] * 0.11) < 90;
  131.                                 // 一种是自己是通过自己手动调整系数，结果虽然接近但总是不尽人意
  132.                                 // binaryData[i / 4] = data[i] < 250 && data[i + 1] < 203 && data[i + 2] < 203;
  133.                                 // 最后使用了平均值，结果比较理想
  134.                                 binaryData[i / 4] = (data[i] + data[i + 1] + data[i + 2]) / 3 < 200;
  135.                         }
  136.                         return binaryData;
  137.                 }
  138.                 console.log(result);
  139.                 // 输出耗时
  140.                 console.log(count, (new Date().getTime() - beginTime) / 1000 + ' s');
  142.                 // 将文字绘制到图片对应位置上，以方便查看提取是否正确
  143.                 context.drawImage(this, this.width, 0);
  144.                 var textArray = result.split('\n');
  145.                 for(var i = 0; i < textArray.length; ++i){
  146.                         context.fillText(textArray[i], this.width + beginX, beginY + lineHeight * i);
  147.                 }
  148.         }
  149.         </script>
  150. </body>
  151. </html>


运行结果


  1. yv66vgAAADIAHQoABgAPCQAQABEIABIKABMAFAcAF
  2. QcAFgEABjxpbml0PgEAAygpVgEABENvZGUB
  3. AA9MaW5lTnVtYmVyVGFibGUBAARtYWluAQAWKFtMa
  4. mF2YS9sYW5nL1N0cmluZzspVgEAClNvdXJj
  5. ZUZpbGUBAAlNYWluLmphdmEMAAcACAcAFwwAGAA
  6. ZAQBv5paw5rWq6Laz55CD6Zif5a6e5Yqb6LaF
  7. 576k77yM6Zi15a656LGq5Y2O44CC5LmF5Luw5aSn5ZC
  8. N77yM5ZGo5pel5LiA5oiY77yM6L+Y5pyb
  9. 5LiN6YGX5L2Z5Yqb77yM5LiN5ZCd6LWQ5pWZ44CCBw
  10. AaDAAbABwBAARNYWluAQAQamF2YS9sYW5n
  11. L09iamVjdAEAEGphdmEvbGFuZy9TeXN0ZW0BAANvdX
  12. QBABVMamF2YS9pby9QcmludFN0cmVhbTsB
  13. ABNqYXZhL2lvL1ByaW50U3RyZWFtAQAHcHJpbnRsbgE
  14. AFShMamF2YS9sYW5nL1N0cmluZzspVgAh
  15. AAUABgAAAAAAAgABAAcACAABAAkAAAAdAAEAAQA
  16. AAAUqtwABsQAAAAEACgAAAAYAAQAAAAEACQAL
  17. AAwAAQAJAAAAJQACAAEAAAAJsgACEgO2AASxAAAA
  18. AQAKAAAACgACAAAAAwAIAAQAAQANAAAAAgAO
  20. 702 1.931 s（猎豹）

 

真正的结果


找了个在线的Base64解码工具将上面的提取结果进行了一下解码，发现是一个Java编译后的.class文件，大概内容是：“新浪足球队实力超群，阵容豪华。久仰大名，周日一战，还望不遗余力，不吝赐教。”


写在最后


这个只是一个最浅层次的文字识别提取算法，不够通用，性能也一般，权当兴趣研究之用，不过我想，勇于实践、敢于尝试的精神才是最重要的。。

因为最近实习工作略忙，再加上学校开学事情也多，拖了两个星期才把这边文章写出来，除此之外还有不少计划都落下了，还得继续努力啊>_<

还有最近的一些思考的结果和感触也要找个时间写下来。

PS：写这篇博客的时候精神略差，之后有想到什么再作补充吧，如果写的不好还请多多指教！

 


 


=======================签 名 档=======================
原文地址（我的博客）：http://www.clanfei.com/2013/09/1723.html
欢迎访问交流，至于我为什么要多弄一个博客，因为我热爱前端，热爱网页，我更希望有一个更加自由、真正属于我自己的小站，或许并不是那么有名气，但至少能够让我为了它而加倍努力。。
=======================签 名 档=======================




你可能感兴趣的:(JavaScript)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
    点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 2019-05-29 vue-router的两种模式的区别 Kason晨
    1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
  • electron多标签页模式更像客户端 diygwcom electronjavascript前端
    Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
  • 外卖霸王餐返利外卖会员卡小程序开发 闹小艾 good506070微信小程序小程序
    外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账
  • Axure设计之全屏与退出全屏交互实现 招风的黑耳 Axureaxure交互
    在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure
  • 全面指南：用户行为从前端数据采集到实时处理的最佳实践 数字沉思 营销流量运营系统架构前端内容运营大数据
    引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信
  • EcmaScript和JavaScript的区别 每天吃八顿 前端ecmascript
    ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，
  • javascript添加p元素，html添加文字，appendChild 游勇一 javascripthtml添加pappendChild
    javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}
  • CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制 SteveJi666 WebGLcesiumEarthSDKSuperMap3djavascript前端arcgis
    版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap
  • html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示 睿理
    html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以
  • 如何在 Python 中声明一个静态属性? 潮易 python开发语言
    在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla
  • 数据格式：什么是JSON和XML isNotNullX jsonxml
    JSON和XML都是数据交换的一种格式，用于在不同的系统和应用程序之间传输和存储数据。本文将解释JSON和XML的基础内容，并探讨两者的不同。一·什么是JSON？1.JSON（JavaScriptObjectNotation）即JavaScript对象标记法：-JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。-JSON基于JavaScript的一个子集，但JSON是
  • HighCharts图表自动化简介 知识的宝藏 Selenium高级篇Selenium图表自动化测试highcharts图表自动化Selenium图表自动化图表自动化测试highchartsSelenium
    什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互
  • 基本数据类型和引用类型的初始值 3213213333332132 java基础
    package com.array; /** * @Description 测试初始值 * @author FuJianyong * 2015-1-22上午10:31:53 */ public class ArrayTest { ArrayTest at; String str; byte bt; short s; int i; long
  • 摘抄笔记--《编写高质量代码：改善Java程序的151个建议》 白糖_ 高质量代码
            记得3年前刚到公司，同桌同事见我无事可做就借我看《编写高质量代码：改善Java程序的151个建议》这本书，当时看了几页没上心就没研究了。到上个月在公司偶然看到，于是乎又找来看看，我的天，真是非常多的干货，对于我这种静不下心的人真是帮助莫大呀。           看完整本书，也记了不少笔记
  • 【备忘】Django 常用命令及最佳实践 dongwei_6688 django
    注意：本文基于 Django 1.8.2 版本   生成数据库迁移脚本（python 脚本） python manage.py makemigrations polls  说明：polls 是你的应用名字，运行该命令时需要根据你的应用名字进行调整   查看该次迁移需要执行的 SQL 语句（只查看语句，并不应用到数据库上）： python manage.p
  • 阶乘算法之一N! 末尾有多少个零 周凡杨 java算法阶乘面试效率
                                     &n
  • spring注入servlet g21121 Spring注入
    传统的配置方法是无法将bean或属性直接注入到servlet中的，配置代理servlet亦比较麻烦，这里其实有比较简单的方法，其实就是在servlet的init()方法中加入要注入的内容： ServletContext application = getServletContext(); WebApplicationContext wac = WebApplicationContextUtil
  • Jenkins 命令行操作说明文档 510888780 centos
    假设Jenkins的URL为http://22.11.140.38:9080/jenkins/ 基本的格式为 java 基本的格式为 java -jar jenkins-cli.jar [-s JENKINS_URL] command [options][args] 下面具体介绍各个命令的作用及基本使用方法 1. &nb
  • UnicodeBlock检测中文用法 布衣凌宇 UnicodeBlock
    /**  * 判断输入的是汉字  */ public static boolean isChinese(char c) {        Character.UnicodeBlock ub = Character.UnicodeBlock.of(c);    
  • java下实现调用oracle的存储过程和函数 aijuans javaorale
    1.创建表：STOCK_PRICES     2.插入测试数据：     3.建立一个返回游标：  PKG_PUB_UTILS   4.创建和存储过程：P_GET_PRICE     5.创建函数：   6.JAVA调用存储过程返回结果集 JDBCoracle10G_INVO
  • Velocity Toolbox antlove 模板toolboxvelocity
    velocity.VelocityUtil package velocity; import org.apache.velocity.Template; import org.apache.velocity.app.Velocity; import org.apache.velocity.app.VelocityEngine; import org.apache.velocity.c
  • JAVA正则表达式匹配基础 百合不是茶 java正则表达式的匹配
      正则表达式;提高程序的性能,简化代码,提高代码的可读性,简化对字符串的操作   正则表达式的用途; 字符串的匹配 字符串的分割 字符串的查找 字符串的替换       正则表达式的验证语法     [a] //[]表示这个字符只出现一次 ,[a] 表示a只出现一
  • 是否使用EL表达式的配置 bijian1013 jspweb.xmlELEasyTemplate
            今天在开发过程中发现一个细节问题，由于前端采用EasyTemplate模板方法实现数据展示，但老是不能正常显示出来。后来发现竟是EL将我的EasyTemplate的${...}解释执行了，导致我的模板不能正常展示后台数据。         网
  • 精通Oracle10编程SQL(1-3)PLSQL基础 bijian1013 oracle数据库plsql
    --只包含执行部分的PL/SQL块 --set serveroutput off begin dbms_output.put_line('Hello,everyone!'); end; select * from emp; --包含定义部分和执行部分的PL/SQL块 declare v_ename varchar2(5); begin select
  • 【Nginx三】Nginx作为反向代理服务器 bit1129 nginx
    Nginx一个常用的功能是作为代理服务器。代理服务器通常完成如下的功能：   接受客户端请求 将请求转发给被代理的服务器 从被代理的服务器获得响应结果 把响应结果返回给客户端 实例 本文把Nginx配置成一个简单的代理服务器 对于静态的html和图片，直接从Nginx获取 对于动态的页面，例如JSP或者Servlet，Nginx则将请求转发给Res
  • Plugin execution not covered by lifecycle configuration: org.apache.maven.plugin blackproof maven报错
    转：http://stackoverflow.com/questions/6352208/how-to-solve-plugin-execution-not-covered-by-lifecycle-configuration-for-sprin   maven报错： Plugin execution not covered by lifecycle configuration:
  • 发布docker程序到marathon ronin47 docker 发布应用
    1 发布docker程序到marathon 1.1 搭建私有docker registry 1.1.1 安装docker regisry docker pull docker-registry docker run -t -p 5000:5000 docker-registry 下载docker镜像并发布到私有registry docker pull consol/tomcat-8.0
  • java-57-用两个栈实现队列&&用两个队列实现一个栈 bylijinnan java
    import java.util.ArrayList; import java.util.List; import java.util.Stack; /* * Q 57 用两个栈实现队列 */ public class QueueImplementByTwoStacks { private Stack<Integer> stack1; pr
  • Nginx配置性能优化 cfyme nginx
    转载地址：http://blog.csdn.net/xifeijian/article/details/20956605   大多数的Nginx安装指南告诉你如下基础知识——通过apt-get安装，修改这里或那里的几行配置，好了，你已经有了一个Web服务器了。而且，在大多数情况下，一个常规安装的nginx对你的网站来说已经能很好地工作了。然而，如果你真的想挤压出Nginx的性能，你必
  • [JAVA图形图像]JAVA体系需要稳扎稳打,逐步推进图像图形处理技术 comsci java
         对图形图像进行精确处理，需要大量的数学工具，即使是从底层硬件模拟层开始设计，也离不开大量的数学工具包，因为我认为，JAVA语言体系在图形图像处理模块上面的研发工作，需要从开发一些基础的，类似实时数学函数构造器和解析器的软件包入手，而不是急于利用第三方代码工具来实现一个不严格的图形图像处理软件......   &nb
  • MonkeyRunner的使用 dai_lm androidMonkeyRunner
    要使用MonkeyRunner，就要学习使用Python，哎 先抄一段官方doc里的代码 作用是启动一个程序（应该是启动程序默认的Activity），然后按MENU键，并截屏 # Imports the monkeyrunner modules used by this program from com.android.monkeyrunner import MonkeyRun
  • Hadoop-- 海量文件的分布式计算处理方案 datamachine mapreducehadoop分布式计算
    csdn的一个关于hadoop的分布式处理方案，存档。 原帖：http://blog.csdn.net/calvinxiu/article/details/1506112。     Hadoop 是Google MapReduce的一个Java实现。MapReduce是一种简化的分布式编程模式，让程序自动分布到一个由普通机器组成的超大集群上并发执行。就如同ja
  • 以資料庫驗證登入 dcj3sjt126com yii
    以資料庫驗證登入 由於 Yii 內定的原始框架程式, 採用綁定在UserIdentity.php 的 demo 與 admin 帳號密碼:    public function authenticate()    {        $users=array( &nbs
  • github做webhooks：[2]php版本自动触发更新 dcj3sjt126com githubgitwebhooks
    上次已经说过了如何在github控制面板做查看url的返回信息了。这次就到了直接贴钩子代码的时候了。 工具/原料 git github 方法/步骤   在github的setting里面的webhooks里把我们的url地址填进去。   钩子更新的代码如下： error_reportin
  • Eos开发常用表达式 蕃薯耀 Eos开发Eos入门Eos开发常用表达式
    Eos开发常用表达式 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2014年8月18日 15:03:35 星期一     &
  • SpringSecurity3.X--SpEL 表达式 hanqunfeng SpringSecurity
    使用 Spring 表达式语言配置访问控制，要实现这一功能的直接方式是在<http>配置元素上添加 use-expressions 属性：   <http auto-config="true" use-expressions="true"> 这样就会在投票器中自动增加一个投票器：org.springframework
  • Redis vs Memcache IXHONG redis
    1. Redis中，并不是所有的数据都一直存储在内存中的，这是和Memcached相比一个最大的区别。 2. Redis不仅仅支持简单的k/v类型的数据，同时还提供list，set，hash等数据结构的存储。 3. Redis支持数据的备份，即master-slave模式的数据备份。 4. Redis支持数据的持久化，可以将内存中的数据保持在磁盘中，重启的时候可以再次加载进行使用。 Red
  • Python - 装饰器使用过程中的误区解读 kvhur JavaScriptjqueryhtml5css
    大家都知道装饰器是一个很著名的设计模式，经常被用于AOP(面向切面编程)的场景，较为经典的有插入日志，性能测试，事务处理，Web权限校验， Cache等。 原文链接：http://www.gbtags.com/gb/share/5563.htm Python语言本身提供了装饰器语法（@），典型的装饰器实现如下：   @function_wrapper de
  • 架构师之mybatis-----update 带case when 针对多种情况更新 nannan408 case when
    1.前言.    如题. 2. 代码.   <update id="batchUpdate" parameterType="java.util.List"> <foreach collection="list" item="list" index=&
  • Algorithm算法视频教程 栏目记者 Algorithm算法
    课程：Algorithm算法视频教程 百度网盘下载地址： http://pan.baidu.com/s/1qWFjjQW 密码: 2mji 程序写的好不好,还得看算法屌不屌！Algorithm算法博大精深。 一、课程内容： 课时1、算法的基本概念 + Sequential search 课时2、Binary search 课时3、Hash table 课时4、Algor
  • C语言算法之冒泡排序 qiufeihu c算法
    任意输入10个数字由小到大进行排序。 代码： #include <stdio.h> int main() { int i,j,t,a[11]; /*定义变量及数组为基本类型*/ for(i = 1;i < 11;i++){ scanf("%d",&a[i]); /*从键盘中输入10个数*/ } for
  • JSP异常处理 wyzuomumu Webjsp
    1.在可能发生异常的网页中通过指令将HTTP请求转发给另一个专门处理异常的网页中: <%@ page errorPage="errors.jsp"%>   2.在处理异常的网页中做如下声明： errors.jsp: <%@ page isErrorPage="true"%>，这样设置完后就可以在网页中直接访问exc
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他