• 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

  • HTML5给搜索框中加一个放大镜

    小站刚加上搜索功能,由于懒惰就没有给搜索框加上样式,直接input标签了事。

    昨天看HTML5相关介绍的时候发现在HTML5中的input标签有search类型,于是赶紧试用了一下

    <input type="search"  />
    

    type中的text类型改成search值后,其实也没有多大改变,只不过在搜索框右侧多了一个删除按钮,点击删除可以清楚搜索框里的内容

    于是又是根据资料加了一个results属性

    <input results="s" type="search" />
    

    ...

    READ ALL

  • 一个自己写的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

  • 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

  • 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

  • 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

  • 分享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

  • 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

  • Linux中df命令查看磁盘使用情况

    几乎只要建站用的VPS都以Linux居多,免费又好用。

    虽不能把全部Liunx命令记住,但必要的命令还是要记下为好,今天介绍的命令是df磁盘空间占用情况查看命令

    看看帮助文档:

    [nicholas@qttc ~]$ df --help
    Usage: df [OPTION]... [FILE]...
    Show information about the file system on which each FILE resides,
    or all file systems by default.
    
    Mandatory arguments to long options are mandatory for short options too.
      -a, --all             include dummy file systems
      -B, --block-size=SIZE  use SIZE-byte blocks
          --direct          show statistics for a file instead of mount point
          --total           produce a grand total
      -h, --human-readable  print sizes in human readable format (e.g., 1K 234M 2G)
      -H, --si              likewise, but use powers of 1000 not 1024
      -i, --inodes          list inode information instead of block usage
      -k                    like --block-size=1K
      -l, --local           limit listing to local file systems
          --no-sync         do not invoke sync before getting usage info (default)
      -P, --portability     use the POSIX output format
          --sync            invoke sync before getting usage info
      -t, --type=TYPE       limit listing to file systems of type TYPE
      -T, --print-type      print file system type
      -x, --exclude-type=TYPE   limit listing to file systems not of type TYPE
      -v                    (ignored)
          --help     display this help and exit
          --version  output version information and exit
    
    Display values are in units of the first available SIZE from --block-size,
    and the DF_BLOCK_SIZE, BLOCK_SIZE and BLOCKSIZE environment variables.
    Otherwise, units default to 1024 bytes (or 512 if POSIXLY_CORRECT is set).
    
    SIZE may be (or may be an integer optionally followed by) one of following:
    KB 1000, K 1024, MB 1000*1000, M 1024*1024, and so on for G, T, P, E, Z, Y.
    
    Report df bugs to bug-coreutils@gnu.org
    GNU coreutils home page: <http://www.gnu.org/software/coreutils/>
    General help using GNU software: <http://www.gnu.org/gethelp/>
    For complete documentation, run: info coreutils 'df invocation'
    

    ...

    READ ALL

  • jQuery图片懒加载lazyload插件的一点看法

    小站建成之初,就想试试基于jQuery的图片懒加载插件lazyload。看到别的站点实现懒加载看着很炫,虽不知道是否也使用的是jQuery的lazyload插件,但感觉jQuery的lazyload会更方便。按照jQuery的风格,以更少的代码去实现更多的功能想必lazyload也是一样,用法

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
    <script type="text/javascript">
      $('img').lazyload();    
    </script>
    

    ...

    READ ALL

1 2 3 4 5