只言碎语总结，今后发展web前端，并分享两个项目难点解决方案。

忘了一件事情！有经验的大哥，我想专研Web前端，请问前景如何呢？我查了下，还是有点迷糊。有经验的大哥请指点下！

咳咳！恩，首先说一句，前段时间准备的招聘失败了，准备了一个多月.net以及数据库，结果大公司很少招.net不说，考的全部是数据结构，结果还没来得及复习。

其实就算是复习也不一定来得及，现在确实是有点悲剧。但是人总是要向前看，总是要活下去，确实没法便进小公司吧，照样会有一片天地的。

就职业规划来说，准备在工作之余慢慢提高。

1 首先研究下设计模式（2个月），因为学完后应用才是重点，初步学习便2个月内吧，期间会写学习笔记，请各位大哥指正。

2 其次重新学习数据结构（2个月），好吧，大一以后我就没有看过数据结构，我知道我错了，我会重新学习。

3 上面学习结束后，工作之余开始专研web前端，这个和.net也不背道而驰，而且前景好似不错的！

上面一些和今天的内容扯远了，今天主要说下前段时间遇到的两个技术点实现，请大家拍砖.

具体项目就不说明了，需求是这个样子的，我前段时间负责了一个公安局的执法考评系统，里面有两个功能，一个是卷宗考评，一个是四色预警。

卷宗便是根据扫描真实卷宗导入数据库（不错，图片他们是存于数据库的）然后我们考评卷宗时候，需要一张张看哪里有问题，有问题就直接在线勾画出来，

并进行记录，以后进入查看或者修改皆要有据可循。

四色预警便是给我一张当地的地图，每个区域会发生一定的案件，我们要做的便是根据地区发案数量对其着色，已达到预警的作用。

这两个当时是用java实现的，现在那个内网数据库不能访问，我便简单用.net实现一下，在我看来还是算难点了，当时用了2天时间才做出来，若是您认为很简单，

便提出解决方案吧，项目具有一定密度，分享后若是觉得有用的兄弟不要忘记顶下。

一、卷宗考评实现

先上图：

相信看到效果图的大哥都知道是怎么做的了。其实现在得出容易，当时还是思考了一会才想到这个，当时甚至想到了在线绘图了，

但是考虑到卷宗不能撤销的缘故便最后采用了此方法。

1 用一div（背景为我们的卷宗）

2 在div上面画div，并记录其相对div的边界位置，最后写入数据库

3 编辑修改便直接操作div即可，我附上源代码，有思路后便不复杂了，我只写关键代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>
    无标题页
</title><link href="../css/style_xb.css" type="text/css" rel="stylesheet" />
        
   <style>
         .wl{
     filter: alpha(opacity=60); 
     border: red 1px solid; 
     position: absolute;
     overflow: hidden; 
     background-color:#FF6666;
         }
     </style>
    <script type="text/javascript" >
function md(){
  
 var d=document.getElementById("d");
 var hjs=document.getElementById("hjs");
 d.style.display="";
 d.setCapture();
  
 d.onmouseup=d.onlosecapture=mu;
 d.onmousemove=mv;
 d.startX=event.x-document.body.scrollLeft;
 d.startY=event.y-document.body.scrollTop;
 d.style.left=event.x-document.body.scrollLeft;
 d.style.top=event.y-document.body.scrollTop;
 d.style.width=0;
 d.style.height=0;
 hjs.style.display="none";
   
}
  
function mu(){
 var d=document.getElementById("d");
 var hjs=document.getElementById("hjs");
 d.releaseCapture();
 d.style.display="none";
 hjs.style.display="";
 var x2=event.x-document.body.scrollLeft;
 var y2=event.y-document.body.scrollTop;
 x=Math.min(d.startX,x2);
 y=Math.min(d.startY,y2);
 x1=Math.max(d.startX,x2);
 y1=Math.max(d.startY,y2);
 with(hjs.style){
  left=x;
  top=y;
  width=x1-x;
  height=y1-y;
 }
   var obj = document.getElementById("tb");
   document.getElementById("l").value=x-obj.offsetLeft ;
   document.getElementById("t").value= y-obj.offsetTop ;
   document.getElementById("w").value= (hjs.style.width.toString()).replace("px","") ;
   document.getElementById("h").value=(hjs.style.height.toString()).replace("px","") ;
}
  
function mv(){
 var d=document.getElementById("d");
 var hjs=document.getElementById("hjs");
 var x2=event.x-document.body.scrollLeft;
 var y2=event.y-document.body.scrollTop;
 x=Math.min(d.startX,x2);
 y=Math.min(d.startY,y2);
 x1=Math.max(d.startX,x2);
 y1=Math.max(d.startY,y2);
 with(d.style){
  left=x;
  top=y;
  width=x1-x;
  height=y1-y;
 }
}
    </script>
     
</head>
<body style="margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;">
    <form name="form1" method="post" action="demoOK2.aspx" id="form1">
      <div style="filter: alpha(opacity=60); border: red 1px solid; position: absolute;
                    overflow: hidden; background-color: #FF6666; display: none;" id="d">
                </div>
                <div style="filter: alpha(opacity=60); border: red 1px solid; position: absolute;
                    overflow: hidden; background-color: #FF6666; display: none;" id="hjs">
                </div>
     
    <table width="900px" cellpadding="0" cellspacing="0" id="tb" style="height: 530px;
        border: 1px; border-color: Black; border-style: dashed;" align="center">
        <tr>
            <td width="670px" valign="top"  onmousedown="md()">
                 
                <div id="divimage"  style="background-image: url(1.jpg); height: 530px;"   onclick="CreateDiv(this)"  >
                    <div title='发大幅度发' class='wl'  style=" margin-left:58px  ; margin-top :181px ; width :43px  ; height : 27px ;  " >  </div><div title='的方法的' class='wl'  style=" margin-left:232px  ; margin-top :177px ; width :78px  ; height : 27px ;  " >  </div><div title='是得分得分' class='wl'  style=" margin-left:58px  ; margin-top :242px ; width :49px  ; height : 26px ;  " >  </div><div title='标记错误' class='wl'  style=" margin-left:241px  ; margin-top :246px ; width :77px  ; height : 25px ;  " >  </div><div title='dzzdfc ' class='wl'  style=" margin-left:356px  ; margin-top :117px ; width :63px  ; height : 33px ;  " >  </div><div title='' class='wl'  style=" margin-left:437px  ; margin-top :217px ; width :130px  ; height : 17px ;  " >  </div><div title='dfddd' class='wl'  style=" margin-left:131px  ; margin-top :473px ; width :401px  ; height : 0px ;  " >  </div><div title='sddfd' class='wl'  style=" margin-left:342px  ; margin-top :371px ; width :85px  ; height : 27px ;  " >  </div>
                   
                </div>
            </td>
            <td valign="top">
                简单说明：<br />
                这个是个简单模拟，看看是否满足要求。<br />
                1 点击左边你认为错的位置，将会出现一个矩形，<br />
                2然后你可以改变矩形位置，拖动矩形大小，到你满意的位置后在右边输入错误原因点击保存即可<br />
 <input type="submit" name="Button1" value="保存" id="Button1" />
                <input type="submit" name="Button2" value="删除所有标志" id="Button2" />
                <br />
                <textarea name="TextBox1" rows="2" cols="20" id="TextBox1" style="height:71px;width:197px;"></textarea>
                <br />
                考评扣分项：
                <div>
    <table cellspacing="0" cellpadding="2" border="0" id="GridView1" style="color:Black;background-color:LightGoldenrodYellow;border-color:Tan;border-width:1px;border-style:solid;width:100%;border-collapse:collapse;">
        <tr style="background-color:Tan;font-weight:bold;">
            <th scope="col"> </th><th scope="col"> </th>
        </tr><tr>
            <td>
                                         
                                          
                                           1-
                                                发大幅度发 
                                                 
                                        </td><td>
                                        <center>
                                            <a id="GridView1_ctl02_lkUpdate" href="javascript:__doPostBack('GridView1$ctl02$lkUpdate','')" style="text-decoration:none">删除</a></center>
                                        </td>
        </tr><tr style="background-color:PaleGoldenrod;">
            <td>
                                         
                                          
                                           2-
                                                的方法的 
                                                 
                                        </td><td>
                                        <center>
                                            <a id="GridView1_ctl03_lkUpdate" href="javascript:__doPostBack('GridView1$ctl03$lkUpdate','')" style="text-decoration:none">删除</a></center>
                                        </td>
        </tr><tr>
            <td>
                                         
                                          
                                           3-
                                                是得分得分 
                                                 
                                        </td><td>
                                        <center>
                                            <a id="GridView1_ctl04_lkUpdate" href="javascript:__doPostBack('GridView1$ctl04$lkUpdate','')" style="text-decoration:none">删除</a></center>
                                        </td>
        </tr><tr style="background-color:PaleGoldenrod;">
            <td>
                                         
                                          
                                           4-
                                                标记错误 
                                                 
                                        </td><td>
                                        <center>
                                            <a id="GridView1_ctl05_lkUpdate" href="javascript:__doPostBack('GridView1$ctl05$lkUpdate','')" style="text-decoration:none">删除</a></center>
                                        </td>
        </tr><tr>
            <td>
                                         
                                          
                                           5-
                                                dzzdfc  
                                                 
                                        </td><td>
                                        <center>
                                            <a id="GridView1_ctl06_lkUpdate" href="javascript:__doPostBack('GridView1$ctl06$lkUpdate','')" style="text-decoration:none">删除</a></center>
                                        </td>
        </tr><tr style="background-color:PaleGoldenrod;">
            <td>
                                         
                                          
                                           6-
                                                  
                                                 
                                        </td><td>
                                        <center>
                                            <a id="GridView1_ctl07_lkUpdate" href="javascript:__doPostBack('GridView1$ctl07$lkUpdate','')" style="text-decoration:none">删除</a></center>
                                        </td>
        </tr><tr>
            <td>
                                         
                                          
                                           7-
                                                dfddd 
                                                 
                                        </td><td>
                                        <center>
                                            <a id="GridView1_ctl08_lkUpdate" href="javascript:__doPostBack('GridView1$ctl08$lkUpdate','')" style="text-decoration:none">删除</a></center>
                                        </td>
        </tr><tr style="background-color:PaleGoldenrod;">
            <td>
                                         
                                          
                                           8-
                                                sddfd 
                                                 
                                        </td><td>
                                        <center>
                                            <a id="GridView1_ctl09_lkUpdate" href="javascript:__doPostBack('GridView1$ctl09$lkUpdate','')" style="text-decoration:none">删除</a></center>
                                        </td>
        </tr>
    </table>
</div>
                             
                <br />
                <input name="l" type="text" id="l" value="0" style=" visibility:hidden;" />
                <input name="t" type="text" id="t" value="0" style=" visibility:hidden;" />
                <input name="w" type="text" id="w" value="200" style=" visibility:hidden;" />
                <input name="h" type="text" id="h" value="80" style=" visibility:hidden;" />
                
            </td>
        </tr>
    </table>
  
  
  
  
    </form>
</body>
</html>

二、四色预警（测试时候自己弄的图，有点粗糙，见谅）

先上图吧：

说下最终效果吧：

1 点击四川便出现整个四川的地图

2 每个区域便是一个地图热点

3 根据热点使用js着色

4 颜色根据ajax由数据库分析取出

5 每次加载页面便使用js着色，鼠标划上便ajax读出对应信息

6 点击对应区域便出现对应大图，每个大图也有对应区域小图，并可根据设置点击

7 可后台更新（后台更新有点复杂，我便不说明了）

附上简单代码：数据库也不提供了，提供前台代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
 
    <script type="text/javascript"> 
    var xmlhttprequest_wl  //XMLHttp对象
   
    function createXmlHttpRequest()
    {
       //IE7,FireFox and others;
        if(window.XMLHttpRequest)
         {
            xmlhttprequest_wl=new XMLHttpRequest();
         }
        else if(window.ActiveXObject)//IE其它的版本
         {
            xmlhttprequest_wl=new ActiveXObject("Microsoft.XMLHTTP");
         }
        else
         {
            alert("Your browser cannt support XMLHttpRequest!")
         }
    }
     
    function getDes(id)  //自动提交发送Ajax请求 ，完成的业务逻辑为，将当前剩余时间，与当前考试时间读入，并将考试状态读出。
     {
        
        var RequestURL="../Ajax.aspx?id="+id+"&rand="+new Date().getTime().toString(36)+"";
         
        createXmlHttpRequest();
       
        if(xmlhttprequest_wl)
         {
          xmlhttprequest_wl.onreadystatechange=callBack;
          xmlhttprequest_wl.open("GET",RequestURL,true) ;
          xmlhttprequest_wl.send(null);
  
         }
     }
      
     function callBack()
     {
        if(xmlhttprequest_wl.readyState==4)
          {
            var moreNodes=xmlhttprequest_wl.responseXML.documentElement.getElementsByTagName("more");
            var numNodes=xmlhttprequest_wl.responseXML.documentElement.getElementsByTagName("num");
            var idNodes=xmlhttprequest_wl.responseXML.documentElement.getElementsByTagName("id");
             
            var num=numNodes[0].text;
            var more=moreNodes[0].text;
            var id=idNodes[0].text;
            
             
            var areas=document.getElementById(id);
            if(areas!=null)
            {
               areas.title=more;
            }
                
          }
     }
  
    </script>
     
    <script type="text/javascript"> 
    var xmlhttprequest_wl1  //XMLHttp对象
   
    function createXmlHttpRequest1()
    {
       //IE7,FireFox and others;
        if(window.XMLHttpRequest)
         {
            xmlhttprequest_wl1=new XMLHttpRequest();
         }
        else if(window.ActiveXObject)//IE其它的版本
         {
            xmlhttprequest_wl1=new ActiveXObject("Microsoft.XMLHTTP");
         }
        else
         {
            alert("Your browser cannt support XMLHttpRequest!")
         }
    }
     
    function getColor(id)  //自动提交发送Ajax请求 ，完成的业务逻辑为，将当前剩余时间，与当前考试时间读入，并将考试状态读出。
     {
         
        var RequestURL="../AjaxServer.aspx?id="+id+"&rand="+new Date().getTime().toString(36)+"";
         
        createXmlHttpRequest1();
       
        if(xmlhttprequest_wl1)
         {
          xmlhttprequest_wl1.onreadystatechange=callBack1;
          xmlhttprequest_wl1.open("GET",RequestURL,true) ;
          xmlhttprequest_wl1.send(null);
  
         }
     }
      
     function callBack1()
     {
        if(xmlhttprequest_wl1.readyState==4)
          {
            var moreNodes=xmlhttprequest_wl1.responseXML.documentElement.getElementsByTagName("more");
            var numNodes=xmlhttprequest_wl1.responseXML.documentElement.getElementsByTagName("num");
            var idNodes=xmlhttprequest_wl1.responseXML.documentElement.getElementsByTagName("id");
            var colorNodes=xmlhttprequest_wl1.responseXML.documentElement.getElementsByTagName("color");
               
            for(var i=0;i<idNodes.length;i++)
            {
               var num=numNodes[i].text;
               var more=moreNodes[i].text;
               var id=idNodes[i].text;
               var color=colorNodes[i].text;
               
               extAreaOver('image',id,color);
            }
           
          }
     }
      
     
      
    </script>
     
 
    <script language="javascript" type="text/javascript" src="pic_map.js"></script>
 
</head>
<body   onload="getColor('17');" >
   
    <div>
     
         
        <img src="17.jpg"  name="map_pic" width="1000" border="0" usemap="#hotmap"  id="map_pic"/>
 
  <map name="hotmap" id="hotmap">
   
  <area shape="poly"    id="23"  onmousemove="getDes(23)"
          coords="398, 273, 396, 264, 392, 259, 400, 253, 406, 249, 420, 245, 433, 243, 445, 242, 456, 241, 471, 241, 479, 243, 480, 251, 483, 262, 487, 268, 500, 269, 517, 268, 527, 261, 539, 252, 536, 249, 552, 262, 553, 272, 554, 280, 561, 282, 562, 292, 560, 300, 558, 309, 551, 316, 540, 316, 527, 316, 517, 315, 506, 312, 502, 315, 502, 322, 500, 331, 500, 342, 500, 350, 499, 358, 489, 356, 480, 358, 472, 359, 465, 361, 458, 360, 444, 361, 440, 353, 436, 348, 430, 348, 422, 347, 415, 346, 416, 342, 415, 336, 408, 327, 404, 322, 400, 318, 398, 312, 398, 302, 396, 289, 395, 281"
          href="#">
     
      <area shape="poly"  id="18"  onmousemove="getDes(18)"
          coords="212, 84, 223, 83, 233, 80, 244, 81, 257, 81, 263, 75, 270, 70, 280, 70, 287, 68, 288, 59, 290, 51, 294, 45, 300, 40, 300, 33, 306, 27, 316, 27, 319, 34, 323, 39, 334, 41, 340, 43, 340, 49, 347, 51, 357, 53, 365, 56, 373, 59, 383, 58, 386, 52, 389, 45, 393, 40, 401, 38, 412, 37, 423, 40, 429, 46, 437, 50, 444, 58, 443, 68, 443, 76, 447, 86, 452, 92, 458, 96, 466, 99, 476, 99, 478, 106, 478, 114, 479, 122, 478, 130, 482, 138, 481, 144, 476, 147, 468, 148, 463, 152, 459, 157, 460, 164, 454, 170, 454, 179, 454, 186, 447, 187, 440, 187, 433, 183, 428, 182, 422, 180, 414, 177, 408, 173, 401, 169, 394, 166, 389, 162, 383, 157, 376, 158, 372, 160, 367, 160, 363, 157, 361, 162, 357, 170, 350, 174, 346, 179, 340, 178, 339, 186, 333, 191, 328, 196, 321, 200, 316, 204, 312, 207, 305, 205, 300, 205, 294, 205, 289, 199, 289, 195, 291, 191, 295, 186, 295, 180, 296, 175, 295, 167, 293, 160, 289, 154, 285, 152, 279, 152, 277, 150, 271, 148, 271, 143, 268, 141, 263, 141, 261, 141, 258, 135, 260, 127, 257, 125, 246, 126, 237, 128, 232, 128, 227, 128, 220, 128, 213, 127, 208, 123, 205, 121, 204, 116, 204, 111, 205, 105, 203, 100, 205, 95, 206, 89, 212, 86"
          href="#">
</map>
 
    </div>
     
   
 
</body>
 
<script type="text/javascript">
    cvi_map.add(document.getElementById('image'),{opacity: 50, areacolor: '#cd5c5c', noborder:true});
      
</script>
 
 
 
</html>

完成，当然有点残缺，但是项目确实有一定密度，我也不敢上传源代码。加之原来是java做的，现在我用了几个小时转成net代码也很乱便不弄上来了。

经过这两个例子后，我发现web前段技术真的很不错，特别Ajax的加入，某一天是不是桌面软件会大幅度削减呢？
哎，暂时如此，马上要找工作了，好有压力啊！！！

posted on 2011-10-07 14:25 叶小钗阅读(8632) 评论(46) 编辑收藏举报

只言碎语总结，今后发展web前端，并分享两个项目难点解决方案。

我的微信

个人信息

搜索

最新随笔

我的标签

积分与排名

阅读排行榜

评论排行榜

推荐排行榜

最新评论