在页面中使用点阵显示汉字

上篇文章提到用数字点阵显示奥运倒计时，这里扩展一下，不仅可以用点阵显示数字，还可以用点阵显示汉字。先看演示效果。Javascript脚本部分还是使用原来DigitDisplay对象，只是在bitArray新增了两个成员。

  1. var kaka = new DigitDisplay();
  2. kaka.bitArray.fa = '0000000100000...';
  3. kaka.bitArray.cai = '000001000001...';
  4. kaka.holder = $("hanzi").getElementsByTagName('TABLE')[0];
  5. kaka.init('fa');
  6. kaka.holder = $("hanzi").getElementsByTagName('TABLE')[1];
  7. kaka.init('cai');

那怎么动态获取汉字的点阵呢，这里提供一个例程，其实是《C#实现读取点阵汉字》这篇文章所附代码的短小精悍压缩版。代码如下，注释部分是我自己的理解，可能有错误，请自行甄别，也欢迎跟我探讨。完整代码下载(包含HZK16点阵字库文件)：http://panweizeng.com/download/lattice_display.rar
另外，如果你使用的是php，可以看看这篇文章《读取汉字点阵数据》。

  1. public static string CharacterToCoding(string character)
  2. {
  3.     try
  4.     {
  5.         string _string = "";
  6.         for (int i = 0; i < character.Length; i++)
  7.         {
  8.             //取出二进制编码内容
  9.             byte[] array = System.Text.Encoding.Default.GetBytes(character.Substring(i, 1));
  10.  
  11.             //16*16汉字字模:在HZK16中偏移地址的计算方法, 设其内码为ABCD(AB为区码，CD为位码)
  12.             //array[0]为内码高位=区码+A0H=区码+160
  13.             //array[1]为内码低位=位码+A0H=位码+160
  14.             //横向读取时，偏移地址=[(AB-0xa1)*94(十进制)+(CD-0xa1)]*32(十进制)
  15.             int offset = (94 * (array[0] - 161) + (array[1] - 161)) * 32;
  16.  
  17.             //载入字库文件
  18.             FileStream fs = new FileStream(AppDomain.CurrentDomain.BaseDirectory+"HZK16",
  19.                 FileMode.Open,
  20.                 FileAccess.Read
  21.             );
  22.             byte[] libBytes = new byte[fs.Length];
  23.             fs.Read(libBytes, 0, libBytes.Length);
  24.             fs.Close();
  25.            
  26.             //读取字模信息，转化为二进制的字符串
  27.             //16*16=256个点，一个字节(char)为8bit，则需要256/8=32个字节
  28.             //一次位移为2，即一次读两个字节，共16个点
  29.             for (int j = offset, k = 0; j < offset + 32; k++, j = j + 2)
  30.                 _string += Convert.ToString(libBytes[j], 2).PadLeft(8, '0') 
  31.                     + Convert.ToString(libBytes[j + 1], 2).PadLeft(8, '0');
  32.         }
  33.         return _string;
  34.     }
  35.     catch (Exception e)
  36.     {
  37.         return e.Message;
  38.     }
  39. }

如果只是想获取汉字的点阵，这里推荐一个非常不错的字模提取工具，是由电子工程师阿哲同学提供的PCtoLCD2002完美版。
>> 点击这里阅读全文

[ 分类: 学习 Learning ] 由 Pan 发表于 March 8, 2008 10:12 pm  固定链接  评论( 0 )

倒计时代码

由于脚本的当前时间由服务器提供，所以即使用户修改了自己机器的本地时间，在网页上显示的倒计时时间仍然是正确的。在服务端需要输出一个当前时间戳变量，类似于

  1. var timestamp = 12049781335468750;

倒计时代码和大部分人写的代码都差不多，这里主要是一个start函数。

  1. start:function(timeFix){
  2.     var _fix = timeFix == null ? 0 : timeFix, _ = this;
  3.     this.correctTime = this.timeDiff - _fix;
  4.     if(this.correctTime <=  0){
  5.         this.show(0,0,0,0); return;
  6.     }
  7.     //parseInt not Math.floor
  8.     var _day =  parseInt(this.correctTime/(1000*60*60*24));
  9.     var _hour = parseInt((this.correctTime/(1000*60*60))%24);
  10.     var _minute = parseInt((this.correctTime/(1000*60))%60);
  11.     var _second = parseInt((this.correctTime/1000)%60);
  12.     this.show(_day,_hour,_minute,_second);
  13.     this.timeDiff -= 1000;
  14.     clearTimeout(this.timeoutId);
  15.     //第二次以后timeFix为0
  16.     this.timeoutId = setTimeout(function(){_.start.apply(_);},1000);
  17. }

第一次执行时，需要传递一个时间差(timeFix)给start函数。这个时间差为浏览器解析HTML页面到该脚本开始位置的时间与倒计时代码开始执行的时间之差，示意如下。

  1. <script>
  2. //脚本开始位置
  3. var beginTime = new Date();
  4. </script>
  5. <script src="http://adman.ifeng.com/time/time.aspx?type=js"></script>
  6. <..网页代码部分..>
  7. <script>
  8. //倒计时开始执行位置
  9. js.start(new Date().getTime()-beginTime.getTime());
  10. </script>

脚本使用的时候只用修改show函数即可，这里我做了一个使用数字点阵显示的奥运倒计时。

  1. function DigitDisplay(){
  2.     this.holder = "digit";
  3.     this.tdList = null;
  4.     this.bitArray = {
  5.         '0':'111101101101111',
  6.         '1':'001001001001001',
  7.         '2':'111001111100111',
  8.         '3':'111001111001111',
  9.         '4':'101101111001001',
  10.         '5':'111100111001111',
  11.         '6':'111100111101111',
  12.         '7':'111001001001001',
  13.         '8':'111101111101111',
  14.         '9':'111101111001111',
  15.         'dot':'000010000010000'
  16.     }
  17. }
  18. DigitDisplay.prototype = {
  19.     clear:function(){
  20.         for(var i = 0 ; i < this.tdList.length; i++)
  21.             this.tdList[i].className = "blank";
  22.     },
  23.     preInit:function(){
  24.         this.tdList = $(this.holder).getElementsByTagName('TD');
  25.         this.clear();
  26.     },
  27.     init:function(digit){
  28.         this.preInit();
  29.         var _arr = this.bitArray[digit];
  30.         for(var i = 0 ; i < this.tdList.length; i++){
  31.             if(_arr.charAt(i) == '1') this.tdList[i].className = "filled";
  32.         }
  33.     }
  34. }
  35. //倒计时的show函数，可随意定制需要的功能
  36. CountDown.prototype.show = function(day,hour,minute,second){
  37.     var _timeStr = this.digitFix(day,3)+':'+this.digitFix(hour,2)+':'+this.digitFix(minute,2)+':'+this.digitFix(second,2);
  38.     for(var i = 0, _o = null; i < this.tableList.length; i++){
  39.         _o =  new DigitDisplay();
  40.         _o.holder = this.tableList[i];
  41.         if(isNaN(parseInt(_timeStr.charAt(i)))) 
  42.             _o.init('dot');
  43.         else 
  44.             _o.init(_timeStr.charAt(i));
  45.     }
  46. }

演示地址：http://panweizeng.com/others/countdown.html

[ 分类: 学习 Learning ] 由 Pan 发表于 8:38 pm  固定链接  评论( 1 )

可怜的孩子

好可怜的Jonathan，这样的父母实在是太过分了，怎么能对孩子开这种玩笑。

[ 分类: 动态 News ] 由 Pan 发表于 March 3, 2008 8:10 pm  固定链接  评论( 1 )