#每日一记#为HW行动开发个小工具-前端开发篇

为HW行动开发个小工具-环境准备篇

为HW行动开发个小工具-项目构建篇

为HW行动开发个小工具-前端配置篇

• 前端开发

  
  
  
  

       前端采用html、css、jquery进行开发，jquery是javascript的一个封装，使用方法比较简单。

       第一步：页面规划-IP地址比较与检查功能

       页面中有两个文件上传窗口，一个比较按钮，一个检查按钮，两个文本域，用来显示比较结果和检查结果，使用文本域也方便复制粘贴使用。

       第二步：在view.html页面引入jquery文件。

       <script type="text/javascript" src="../view/jquery.min.js"></script>

      

       第三步：进行页面布局。画两个文件上传窗口。由于文件需要上传至后台进行处理，所以需要一个form表单，对文件进行提交。提交方式使用post。

1. <div id="form1" style="text-align: left">
   
2.     <form id="checkForm" method="post" enctype="multipart/form-data">
   
3.         <label for="file1">文件一：</label>
   
4.         <input type="file" id="file1">
   
5.         <br>
   
6.         <label for="file2">文件二：</label>
   
7.         <input type="file" id="file2">
   
8.     </form>
   
9. </div>

复制代码

      打开页面进行测试，可以在IDEA中点击view.html页面右上角的浏览器标签打开当前html页面。

      

       显示效果如图所示。

      

       第四步：简单增加一些效果，让两个控件不至于太拥挤了，在style标签内部对input标签进行修饰。

1.     <style type="text/css">
   
2.         #file1 {
   
3.             margin-top: 10px;
   
4.             margin-bottom: 10px;
   
5.         }
   
6.         #file2 {
   
7.             margin-bottom: 10px;
   
8.         }
   
9.     </style>

复制代码

     

      效果如下图所示。

      

       第五步：添加两个按钮。一个比较，一个检查。

1. <div>
   
2.     <input id="compare" type="button" value="比较"/>
   
3.     <input id="check" type="button" value="检查"/>
   
4. </div>

复制代码

      

       效果如下图所示。

      

       第六步：添加两个文本域，用来显示比较和检查信息。

1.     <div>
   
2.         <textarea id="textarea1" name="textName"></textarea>
   
3.         <textarea id="textarea2" name="textName"></textarea>
   
4.     </div>

复制代码

      

       效果如下图所示。

      

       第七步：给文本域添加简单效果。

1.         #textarea1 {
   
2.             margin-top: 10px;
   
3.             width: 500px;
   
4.             height: 500px;
   
5.         }
   
6.         #textarea2 {
   
7.             margin-top: 10px;
   
8.             margin-left: 50px;
   
9.             width: 500px;
   
10.             height: 500px;
    
11.         }

复制代码

      

       效果如下图所示。

      

      第八步：为了使比较和检查信息输出到对应的文本域，需要在form表单中添加一个target属性。

1. <form id="checkForm" target="textName" method="post" enctype="multipart/form-data">

复制代码

      

      第九步：页面规划-IP文件拆分

      需要一个文本上传窗口，一个可以输入数值的输入框，一个按钮，一个文本域输出信息框。

      同样在view.html文件中进行布局

1. <div id="form2" style="text-align: left">
   
2.         <form id="formSplit" target="formSplit" method="post" enctype="multipart/form-data">
   
3.             <label for="file3">需要拆分的文件：</label>
   
4.             <input type="file" id="file3">
   
5.             <label for="numb">拆分界限：</label>
   
6.             <input type="number" id="numb" name="numb">
   
7.             <input id="fileSplit" type="button" value="拆分"/>
   
8.         </form>
   
9.         <div>
   
10.             <textarea id="textarea3" name="formSplit"></textarea>
    
11.         </div>
    
12.     </div>

复制代码

      

       效果如下图所示

      

       第十步：给文本域添加效果

1.         #textarea3 {
   
2.             margin-top: 10px;
   
3.             width: 500px;
   
4.             height: 500px;
   
5.         }
   
6.         #form2 {
   
7.             margin-top: 10px;
   
8.             margin-bottom: -70px;
   
9.         }
   
10.         #fileSplit {
    
11.             margin-left: 100px;
    
12.         }

复制代码

      

       效果如下图所示。

      

       至此，前端页面展示效果已完成。

      

感谢分享

坚持每天登陆论坛学习

坚持每天登陆论坛学习

坚持每天登陆论坛学习

谢谢分享，看起来很高大上。。

谢谢分享，有助于学习。

感谢分享，有助于工作，学习学习

坚持每天登陆论坛学习