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

2021-06-28 18:25:31

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一、卷宗考评实现

先上图：

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

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

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

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

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

无标题页

</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>

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>

<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>

</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>

</td>

简单说明：<br />

这个是个简单模拟，看看是否满足要求。<br />

1 点击左边你认为错的位置，将会出现一个矩形，<br />

2然后你可以改变矩形位置，拖动矩形大小，到你满意的位置后在右边输入错误原因点击保存即可<br />

<br />

<br />

考评扣分项：

<div>

</tr><tr>

<td>

发大幅度发

</td><td>

<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>

的方法的

</td><td>

<a id="GridView1_ctl03_lkUpdate" href="javascript:__doPostBack('GridView1$ctl03$lkUpdate','')"

style="text-decoration:none">删除</a></center>

</td>

</tr><tr>

<td>

是得分得分

</td><td>

<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>

标记错误

</td><td>

<a id="GridView1_ctl05_lkUpdate" href="javascript:__doPostBack('GridView1$ctl05$lkUpdate','')"

style="text-decoration:none">删除</a></center>

</td>

</tr><tr>

<td>

dzzdfc

</td><td>

<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>

</td><td>

<a id="GridView1_ctl07_lkUpdate" href="javascript:__doPostBack('GridView1$ctl07$lkUpdate','')"

style="text-decoration:none">删除</a></center>

</td>

</tr><tr>

<td>

dfddd

</td><td>

<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>

sddfd

</td><td>

<a id="GridView1_ctl09_lkUpdate" href="javascript:__doPostBack('GridView1$ctl09$lkUpdate','')"

style="text-decoration:none">删除</a></center>

</td>

</tr>

</table>

</div>

<br />

</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">

<head>

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>

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>

</head>

<div>

<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>

cvi_map.add(document.getElementById('image'),{opacity: 50, areacolor: '#cd5c5c', noborder:true});

</script>

</html>

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

经过这两个例子后，我发现web前段技术真的很不错，特别Ajax的加入，某一天是不是桌面软件会大幅度削减呢？

哎，暂时如此，马上要找工作了，好有压力啊！！！

本文转自叶小钗博客园博客，原文链接http://www.cnblogs.com/yexiaochai/archive/2011/10/07/2200551.html，如需转载请自行联系原作者

码农公寓

相关文章