自学js编程 实操举例 图片搜索

      js编程中，大多数功能的实现都需要多个控件进行联动，此处做一个小举例。

      如果我要做一个图片的查询系统。

      那么，首先我们要思考的是图片是如何被检索到的：

     1.图片总是被放在电脑的文件夹里的，文件夹的地址就是图片的第一重定位，而图片的名字本身则是图片的第二重定位。那么，文件夹名称的索引可以被写入后台，文件名称的索引则可以使用从界面输入的方法，最终的实现效果就是当你输入文件名称时，图片被显示。

     2.当第一步的方法被确定可行时，我们思考界面上需要哪些控件。为了显示图片，我们需要一个img框；为了有输入的位置，我们需要一个input框；为了避免输入误触发，我们需要一个button控件手动触发搜索，当然最重要的是，我们需要一个图片文件夹，当这个文件夹与程序位置同级时，可以用./显示。故最终结果是这样的

   <input type="text" id="text" value=""/>

    <button id="搜索" onclick="sousuo()" >搜索</button>

     <img id="图片显示" src="./img/1.JPG" style="width:800px; height:600px;top: 50px;position:absolute;right: 400px;">

注:scr=及以后的意思是导入图片的文件位置

  具体方法为   

     function sousuo(){

           n=text.value

           m= "./img/"+n+".jpg" 

           图片显示.src=m; 

       }

就此，程序完成可以使用。