2012-06-07

谈谈HTML5中的服务器发送事件Server-Sent Events

HTML5加了许多新功能，其中服务器发送事件Server-Sent Events是一个亮点，以下直接贴上代码示例

index.html

<!DOCTYPE html> 
<html> 
  <head>
    <meta charset="utf-8" />
    <title>服务器推送SSE</title>
    <script type="text/javascript"> 
      $(document).ready(function(){ 
        //检查浏览器支持情况
        if(typeof(EventSource)!=="undefined") { 
          //定义个对象，用于初始化事件源，这里用c.php这个页面实现 
          var eSource = new EventSource("c.php"); 
          //detect message receipt 
          eSource.onmessage = function(event) { 
            //将收到的数据展示到页面的ID=content元素中 
            document.getElementById("content").innerHTML += event.data+'<br />'; 
          }; 
        }else { 
          document.getElementById("content").innerHTML="没有收到服务端Server-Sent数据."; 
        }
      });
    </script>
  </head>
  <body> 
    <div id="content"></div>
  </body> 
</html>

...

READ ALL

2012-06-07

JavaScript清除Cookie

使用JavaScript能写Cookie当然也就能清除Cookie

代码

// 琼台博客 www.qttc.net

function deleteAllCookies() {
  var cookies = document.cookie.split(";");

  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i];
    var eqPos = cookie.indexOf("=");
    var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
    document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
  }
}

...

READ ALL

2012-06-06
CSS3实现阴影效果原来那么简单
在CSS2中，要弄阴影效果几乎要靠图片完成
在CSS3中，阴影只需要一句话，并且文字也可以加上阴影
box-shadow
语法
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
Code
```
div {
  box-shadow:5px 6px 3px #999;
}
```
以上代码即可给页面所有div加上阴影效果。现在来解析下各个参数的使用
- 第一个参数5px，代表上下偏移，正数往下，负数往上，值越大偏移距离越大
- 第二个参数6px，代表左右偏移，正数往右，负数往左，值越大偏移距离越大
- 第三个参数3px，代表模糊程度，值越大，越模糊
- 第四个参数#999，代表阴影颜色
...
READ ALL
2012-06-06
HTML5给搜索框中加一个放大镜
小站刚加上搜索功能，由于懒惰就没有给搜索框加上样式，直接input标签了事。
昨天看HTML5相关介绍的时候发现在HTML5中的input标签有search类型，于是赶紧试用了一下
```
<input type="search"  />
```
把type中的text类型改成search值后，其实也没有多大改变，只不过在搜索框右侧多了一个删除按钮，点击删除可以清楚搜索框里的内容
于是又是根据资料加了一个results属性
```
<input results="s" type="search" />
```
...
READ ALL

2012-06-06

一个自己写的PHP验证码生成类

此验证码类直接拿去就可以用，也可以参考！

此验证码特性：

可以定义宽高
可以定义字数
可以定义画布类型

其中类成员codestr是生成的验证码字符串，默认每一个子的宽度为20像素，依赖GD图像库，请先安装

<?php
/**
 * 验证码
 * 琼台博客 www.qttc.net
 */
class Code{

  // 1. 定义各个成员 有宽、高、画布、字数、类型、画类型
  private $width; //宽度
  private $height; //高度
  private $num;  //验证码字数
  private $imgType; //生成图片类型
  private $Type; //字串类型 1,2,3 三个选项  1 纯数字  2 纯小写字母 3 大小写数字混合
  private $hb; //画布
  public $codestr; // 验证码字串

  public function __construct($height=20,$num=4,$imgType="jpeg",$Type=1){
    $this->width = $num*20;
    $this->height = $height;
    $this->num = $num;
    $this->imgType = $imgType;   
    $this->Type = $Type; 
    $this->codestr = $this->codestr();
    $this->zuhe();
  }

  // 2. 定义随机获取字符串函数
  private function codestr(){
    switch($this->Type){
      
      case 1:     // 类型为1  获取1-9随机数
        $str = implode("",array_rand(range(0,9),$this->num));
        break;
      case 2:     // 类型为2  获取a-z随机小写字母
        $str = implode("",array_rand(array_flip(range(a,z)),$this->num));
        break;
      case 3:     // 类型为3  获取数字,小写字母,大写字母 混合
        for($i=0;$i<$this->num;$i++){
          $m = rand(0,2);
          switch($m){
            case 0:
              $o = rand(48,57);
              break;
            case 1:
              $o = rand(65,90);
              break;
            case 2:
              $o = rand(97,122);
              break;  
          }
          $str .= sprintf("%c",$o);
        }
        break;          
    }

      
    return $str;    
  }


  // 3. 初始化画布图像资源
  private function Hb(){
    $this->hb = imagecreatetruecolor($this->width,$this->height);  
  }

  // 4. 生成背景颜色
  private function Bg(){
    return imagecolorallocate($this->hb,rand(130,250),rand(130,250),rand(130,250));  
  }

  // 5. 生成字体颜色
  private function Font(){
    return imagecolorallocate($this->hb,rand(0,100),rand(0,100),rand(0,100));    
  }

  // 6. 填充背景颜色
  private function BgColor(){
    imagefilledrectangle($this->hb,0,0,$this->width,$this->height,$this->Bg()); 
  }

  // 7. 干扰点
  private function ganrao(){
    $sum=floor(($this->width)*($this->height)/3);
    for($i=0;$i<$sum;$i++){
      imagesetpixel($this->hb,rand(0,$this->width),rand(0,$this->height),$this->Bg());    
    }
  }

  // 8. 随机直线 弧线
  private function huxian(){
    for($i=0;$i<$this->num;$i++){
      imageArc($this->hb,rand(0,$this->width),rand(0,$this->height),rand(0,$this->width),rand(0,$this->height),rand(0,360),rand(0,360),$this->Bg());        
    }   
  }

  // 9. 写字
  private function xiezi(){
    for($i=0;$i<$this->num;$i++){
      $x=ceil($this->width/$this->num)*$i;  
      $y=rand(1,$this->height-15);
      imagechar($this->hb,5,$x+4,$y,$this->codestr[$i],$this->Font());
    }   
  }

  // 10. 输出
  private function OutImg(){
    $shuchu="image".$this->imgType;  
    $header="Content-type:image/".$this->imgType;
    if(function_exists($shuchu)){
      header($header);
      $shuchu($this->hb);
    }else{
      exit("GD库没有此类图像");  
    }
  }

  // 11. 拼装
  private function zuhe(){
    $this->Hb();
    $this->BgColor();
    $this->ganrao();
    $this->huxian();
    $this->xiezi();
    $this->OutImg(); 
  }   

  public function getCodeStr(){
    return $this->codestr;       
  }
}

...

READ ALL

2012-06-05
JavaScript判断一个变量是不是数组
JavaScript里使用typeof判断不了一个变量是不是数组
```
typeof []
"object"

typeof {}
"object"

typeof null
"object"
```
其实默认提供了一个判断是不是数组的函数Array.isArray()
```
Array.isArray([])
true

Array.isArray({})
false
```
还有其它一种方式可以判断，使用instanceof关键字
```
[] instanceof Array
true
```
当然，它也属于Object
```
[] instanceof Object
true
```
...
READ ALL

2012-06-04

CSS样式的透明效果实现

早之前，要实现透明效果是非常麻烦的一件事，要用gif图片代替。

现在，只需要在CSS里声明一段话即可实现透明效果

还可以修改值来实现透明程度

img {
  opacity: .5; /* 兼容 Standard: 火狐 1.5 以上, Opera, Safari */
  filter: alpha(opacity=5); /* 兼容 IE8 以下 */
  -ms-filter: "alpha(opacity=5)"; /* 兼容 IE 8 */
  -khtml-opacity: .5; /* Safari 1.x */
  -moz-opacity: .5; /* 火狐 1.5 以下, Netscape */
}

...

READ ALL

2012-06-04

PHP提升效率的几个示例

直接看代码示例

遍历数组

在遍历数组中注意count的使用次数，不要每次都去计算数组长度

// 琼台博客 www.qttc.net

// Bad
$array = array(1,2,3,4,5,6,7,8,9,10,....);
for($i=0;$k<count($array);$i++){
  echo $array[$i];
}

// Good
$array = array(1,2,3,4,5,6,7,8,9,10,....);
for($i=0,$k<count($array);$i<$k;$i++){
  echo $array[$i];
}

...

READ ALL

2012-06-03
分享CSS中等比例缩放图片
CSS原来只能给图片定义一个固定值，很难做到等比例缩放。因为这里边涉及到运算，而CSS语言中一直都不存在运算的写法。
由于建站中有几块地方需要CSS控制图片等比例缩放，想到今日CSS3高调宣传，感觉CSS3应该能完成此功能。于是上网搜了搜，果然有CSS等比例缩放图片的方法，可惜它并不是CSS3的新特性，但也能用。
```
img {
  max-width: 600px;
  max-height: 600px;
  scale: expression((this.offsetWidth > this.offsetHeight)?(this.style.width = this.offsetWidth >= 600 ? "600px" : "auto"):(this.style.height = this.offsetHeight >= 600 ? "600px" : "auto")); 
  display:inline;
}
```
...
READ ALL

2012-06-03

PHP中实现冒泡排序算法

经典的冒泡排序法一直是许多程序沿用的其中一种排序法，话说冒泡排序法在效率上比PHP系统函数sort()更高效。这里不讨论性能，所以就不拿它来跟系统性能做对比了。

冒泡排序大概的意思是依次比较相邻的两个数，然后根据大小做出排序，直至最后两位数。由于在排序过程中总是小数往前放，大数往后放，相当于气泡往上升，所以称作冒泡排序。但其实在实际过程中也可以根据自己需要反过来用，大树往前放，小数往后放。

/**
 * PHP中的冒泡排序法使用
 * 琼台博客 www.qttc.net
 */
 
// 预先声明一个数组
$arr = array (12,45,28,30,88,67);
echo "原数组";
print_r($arr);
echo "<br/>";

//冒泡排序
function bubbleSort ($arr) {
  // 进行第一层遍历
  for($i=0,$k=count($arr);$i<$k;$i++) {
    // 进行第二层遍历 将数组中每一个元素都与外层元素比较
    // 这里的i+1意思是外层遍历当前元素往后的
    for ($j=$i+1;$j<$k;$j++) {
      // 内外层两个数比较
      if($arr[$i]<$arr[$j]){
        // 先把其中一个数组赋值给临时变量
        $temp = $arr[$j];
        // 交换位置
        $arr[$j] = $arr[$i];
        // 再从临时变量中赋值回来
        $arr[$i] = $temp;
      }
    }
  }
  // 返回排序后的数组
  return $arr;
}
 
// 直接打印排序后的数组
echo '排序后';
print_r(bubbleSort($arr));

...

READ ALL

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

box-shadow

遍历数组