作者归档：月夜

页面客户端简易柱状图的实现

对于统计的的结果很多时候会采用一些图表进行显示，这样一方面给人的视觉上有很直观的表现，另一方面比起数字来说有很强的对比性及友好性，其中柱状图是常用到的一种图表。

在页面客户端展现柱状图目前多采用图片，其实现方式包括直接由服务器的脚本生成、一些类库、Flash等，对于简单的柱状图其实也可以使用CSS结合Javascript来完成.

1、最终效果

柱状图（效果中颜色跟高度随机）

2、页面代码

<!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>Histogram</title>
  <style type="text/css">
    #Histogram{
      width:300px;
      height:150px;
      position:relative;
      border-left:1px solid #000;
      border-bottom:1px solid #000;
    }
    #Histogram ul {
      width:300px;
      height:150px;
      margin:0;
      padding:0;
    }
    #Histogram ul li {
      position:absolute;
      width:12px;
      height:120px;
      bottom:0px;
      padding:0 !important;
      margin:0 !important;
      text-align:center;
      font-weight:bold;
      color:#fff;
      line-height:2.5em;
    }
  </style>
  <script language="javascript" type="text/javascript">
    function getRandomColor() {
      var str = "0123456789abcdef";
      var sColor = "#";
      for(var i=0;i<6;i++) {
        sColor = sColor + str.charAt(Math.random()*str.length);
      }
      return sColor;
    }
    function setResults() {
      var oRes = document.getElementById("Histogram");
      var tmpString = "";
      tmpString += "<ul>";
      for (var i=0; i<10; i++) {
        tmpString+="<li style=\"left:"+(30+(20*i))+"px;background:"+getRandomColor()+";height:"+Math.random()*120+"px;\">"+i+"</li>";
      }
      tmpString+="</ul>";
      oRes.innerHTML = tmpString;
      oRes.style.display="block";
    }
  </script>
</head>
<body onload="setResults();">
  <div id="Histogram"></div>
</body>
</html>

一个简单的AJAX+PHP+Mysql的应用

33条回复

最近开始PHP语言及Ajax的学习，做个小小的练习记录下来，类似于学习其他语言的”Hello World！“。

1、任务描述

学习XMLHttpRequest对象，通过XMLHttpRequest对象向服务器发出请求，通过服务器端脚本（PHP）获取返回的MySQL中的数据。

2、结构描述

服务器端

请求处理页（SimpleResponse.php)、解析页(parser.php)、模版页(template\template1.html)、数据处理页(sql.php)，请求处理页根据选择的模版使用解析页提供的功能对数据进行处理，返回需要的数据。

客户端

测试页(SimpleResponse.html)

3、部分程序代码

3.1 sql.php

<?
  /* 帐号密码等设定 请使用自己的数据库处理代码*/
  $host = "localhost";
  $user = "root";
  $pass = "";
  $database = "test";
  
  function sql_query($query) {
    global $host,$user,$pass,$database;
    $conn=@mysql_connect( $host, $user, $pass );
    $result=@mysql_db_query( $database, $query, $conn);
    @mysql_data_seek($result,0);
    while($row=@mysql_fetch_row($result)) {
      $output[] = $row;
    }
    @mysql_free_result($result);
    @mysql_close($conn);
    return $output;
  }
......

3.2 parser.php

<?
  /*************************************
  功能说明：解析网页模板，并替换标记输出 
  $filename  文件名及位置
  $parser_array  格式为  $array['key']=value
  ***********************************/
 
  function flag_parser($filename,$parser_array) {
    $handle = fopen ($filename, "r");
    $buffer = fread ($handle, filesize ($filename));
    fclose ($handle);
    while(list($key,$value)=each($parser_array)) {
      $buffer = str_replace($key,$value,$buffer);
    }
    return $buffer;
  } 
?>

3.3 template\template1.html

<table width="100%" border="0" cellpadding="0" cellspacing="2" bgcolor="#FFEAFF">
 <tr>
 <td width="10%" bgcolor="#CCCCCC">{ID}</td>
 <td width="30%" bgcolor="#CCCCCC">{Title}</td>
 <td width="40%" bgcolor="#CCCCCC">{Des}</td>
 <td width="20%" bgcolor="#CCCCCC">{Date}</td>
 </tr>
</table>

3.4 simpleResponse.php

<?
 $page = "template/template1.html";
 include(‘sql.php’);
 include(‘parser.php’);
 $sql = "SELECT * FROM `ajaxdatas`";
 $data = sql_query($sql);
 for($i=0;$i<count($data);$i++)
 {
 $array['{ID}'] = $data[$i][0];
 $array['{Title}'] = $data[$i][1];
 $array['{Des}'] = $data[$i][2];
 $array['{Date}'] = $data[$i][3];
 $result .= flag_parser($page,$array);
 }
 echo $result;
?>

3.5 测试页(SimpleResponse.html)

<?xml version="1.0" encoding="gb2312"?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Simple XMLHttpRequest</title>
 <script language="JavaScript" type="text/JavaScript">
 var xmlHttp;
 
 function createXMLHttpRequest()
 {
 if (window.ActiveXObject)
 {
 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 else if (window.XMLHttpRequest)
 {
 xmlHttp = new XMLHttpRequest();
 }
 }
 function startRequest()
 {
 createXMLHttpRequest();
 xmlHttp.onreadystatechange = handleStateChange;
 xmlHttp.open("POST","SimpleResponse.php",true);
 xmlHttp.send(null);
 }
 function handleStateChange()
 {
 if (xmlHttp.readyState == 4)
 {
 if (xmlHttp.status == 200)
 {
 document.getElementById("results").innerHTML = xmlHttp.responseText;
 }
 }
 }
 </script>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="2" bgcolor="#FF9900">
 <tr> 
 <td bgcolor="#FFFFFF"> 
 <div id="results">Click Button Get Datas </div></td>
 </tr>
 <tr> 
 <td bgcolor="#99FF00"> 
 <form action="#">
 <div align="center"> 
 <input type="button" value="Get MySQL Datas" onclick="startRequest();" />
 </div>
 </form></td>
 </tr>
</table>
</body>
</html>

网页布局与设计

10条回复

制作网页缘于制作自己的Homepage，如果追朔起来要到1999年了，当时一个在一家公司专职做网页的朋友告诉我，做网页的第一步是要会用表格，于是从表格开始了Web Page的制作，整个页需要用表格来进行布局加上表嵌套完成页布局，跟PS或者其他设计工具展现的效果达到一致，从而完成整个Web Page的设计跟制作，中间像各种字体的展现风格（e.g.： font size、color…）以及其他的风格（e.g. ：margin、padding），总之整个Web Page包罗万象，从整体页面的布局到内容及内容表现风格全部都体现在整个页中，看起来让人头晕眼花，随着计算机软件开发及基于Web Page开发语言的的发展，逐渐出现了新的Web标准，逐渐的将结构、表现、动作加以分离，形成了新的网页设计布局方法（Div＋CSS）。

一直以来从事的工作并不是职业网页开发人员，陆续也听到这种新的设计方法，也大体上了解怎么使用，但一直没有好好钻研一下，昨天抽出一天时间好好看了看这部分的内容，记录下来加以总结。

理解新的Web标准首先要理解的应该就是将表现跟结构分离了，以一个例子来说明：

Example：制作一个页面来说明Delphi中循环语句While的应用说明。

While 语法 while Expression do Statement

说明

while语句的作用跟标准的pascal中一样，当Expression表达式为True时，Delphi便会重复执行Statement语句。一旦Expression为False，Statement就不再执行了。相关信息：Boolean类型、Continue、Break、Do、For。

采用Table进行布局代码如下

<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><h1><font color="#660000">While</font></h1></td>
 </tr>
 </table>
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td height="1" bgcolor="#000066"></td>
 </tr>
 </table>
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr> 
 <td><font color="#000099">语法</font></td>
 </tr>
 <tr> 
 <td><font color="#FF6600">while Expression do Statement</font> </td>
 </tr>
 <tr> 
 <td><font color="#000099">说明</font></td>
 </tr>
 <tr> 
 <td><font color="#FF6600">while语句的作用跟标准的pascal中一样，当Expression表达式为True时，Delphi便会重复执行Statement语句。一旦Expression为False，Statement就不再执行了。</font></td>
 </tr>
 <tr> 
 <td><font color="#000099">相关信息</font></td>
 </tr>
 <tr>
 <td><font color="#FF6600">Boolean类型、Continue、Break、Do、For</font></td>
 </tr>
 </table>

而采用Div＋CSS的方法达到与使用Table同样效果，首先分析整个内容的结构

1级标题： While

2级标题1：语法

语法正文：while Expression do Statement

2级标题2：说明

说明正文：while语句的作用跟标准的pascal中一样……

2级标题3：相关信息

相关信息正文：Boolean类型、Continue、Break、Do、For…

分析最终展现界面得到Web页内容

<h1>While</h1>
 <h2>语法</h2>
 <div id="content">while Expression do Statement</div>
 <h2>说明</h2>
 <div id="content">while语句的作用跟标准的pascal中一样……</div>
 <h2>相关信息</h2>
 <div id="content">Boolean类型、Continue、Break、Do、For</div>

针对该Web页面定义CSS样式

h1{
 font:16px Arial;
 color:#660000;
 border-bottom:1px solid #000066
 }
 h2{
 font:14px Arial;
 color:#000099;
 }
 #content{
 width:auto;
 font-size:12px Arial;
 color:#FF6600;
 }

同样的道理，对于设计比较复杂的呈现风格，进行分析逐渐层层分离，最终都可以采用Div＋CSS或者Div嵌套＋CSS来完成结构跟表现的分离，这样的好处是当页面的表现发生改变的时候而内容不变的情况下可以轻松调整表现风格，同时也使得整个页面的结构比较清晰。

CSS语言有专门的教程跟讨论帖子，具体深入使用可参考相应的教材。

一个小小小小工具的总结

25条回复

经常会因为重新做系统忘记备份Favorites目录中的链接，新做完系统后链接就丢失了，昨天晚上闲来就写了个很小小小的工具用于记录Favorites目录中的链接，保存在Xml文件中，并显示在TreeView中，并可打开TreeView中的链接节点。

1、当前用户的Favorites目录搜索获取链接信息

采用递归搜索，使用几个API函数就能完成，主要涉及的API函数为FindFirst、FindNext、GetPrivateProfilestring、ShGetSpecialFolderLocation、ShGetPathfromIDList等，具体使用可参照MSDN。

2、将链接信息保存在xml文件，可以将链接的信息保存在字符串中，直接保存成xml文件，注意保存的时候字符编码采用UTF8格式，否则TXMLDocument处理时会出错，默认的为Ansi，将String转换为UTF8保存即可。

<urls>
 <urlCategory Name="Category Name">
 <urlCategory Name="Category Name">
 <url Name="Url Title">urlPath(e.g. http://www.google.com)</url>
 …
 </urlCategory>
 <url Name="Url Title">urlPath(e.g. http://www.google.com)</url>
 …
 </urlCategory>
 …
 </urls>

3、读取xml文件显示在TreeView中，节点urlCategory为TreeView目录节点，只需获取其Name属性，url为TreeView超链接节点，需要获取Name属性及其节点的value，这里在TreeView显示的是Name属性。需要针对TTreeView进行小小的改造，针对TTreeNode定义TTreeHintNode如下。

TTreeHintNode=class(TTreeNode)
 public:
 constructor Create(AOwner: TTreeNodes);
 procedure Assign(Source: TPersistent); override;
 function GetNodeHint(Node:TTreeNode):string;
 procedure SetNodeHint(Node:TTreeNode;value:string);
 ……

华为面试亲身的经历

31条回复

此面试亲身经历文章的出现源于早上接的一个电话“询问我是否愿意到华为工作，让我感到有些意外跟有些困惑，这让我想起一个月前的华为面试经历。”

一个月前接到同样的电话，拿着简历，按照约定的时间来到上地（在北京几年了，第一次去上地），找到华为公司，联系给我打电话的人，进入了华为，开始了面试。在华为食堂拿到笔试题（C＋＋相关）后找个桌子开始答题，为时一小时的时间后见到第一个面试官，主要侧重技术工程方面，结合我以前从事的项目询问一些问题，大约40分钟时间后，见到第二个面试官，同样侧重技术方面，主要是编程方面的知识，基础、设计、数据库等等很多方面以具体问题的方式进行询问，同样40分钟的时间后填写了一份表后结束了当天的面试。负责HR的工作人员告诉说今天的面试到此结束，让回去等下次面试时间。

大约2天后接到再次面试的通知，第二天早上跑到上地，这次的面试地点是上地大厦多功能厅，来到这里发现好多人已经到达，看来这次招聘的人挺多的，完成类似会议签到后，拿了份报纸找了个座位等待第二论的面试，大约10点左右，被叫到面试，加上前两个面试官，这是第三面试，这个就与技术无关了，主要问一些个人情况同时也是检查学历的地方（需要学历原件跟复印件，留下复印件，检查原件的真假），很快完成面试后继续等待，这之间跟来应聘的进行了交流，发现好多都是华为子公司（慧通）在招人。

大约11点来到第四个面试官这里，也是最后一个面试官，主要针对所应聘部门介绍情况，同时也是个人待遇福利洽谈跟部门说明这方面的，并根据个人经历询问一些问题，很快最后一个面试结束了。

结束最后一个面试后会将简历加每个面试官的评定的一份文档交给HR工作人员，到HR工作人员处询问会知道结果，HR会告诉你是否通过面试，当时HR告诉我“通过了面试，会交由总部审批，如果不出意外大概三周后通知办理入职手续”。至此，整个面试就基本结束了，剩下的也就是等待一个结果，按照最后HR说的一般很少出意外，三周后的结果却出了意外，通知说总部审批没通过，究其原因无从所知。

我的整个华为面试经过就是这样了，不知道去华为应聘的没通过总部审批的是否很多，感到最后的结果有些意外。