Hot For Coding

分享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中的冒泡排序法使用
 * Nicholas Lee 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

Linux中查看可用内存

前几天,发现VPS速度有点缓慢,于是就想看看内存占用情况。直接敲free -hm回车发现可用内存只有76M

[nicholas@ ~]$ free -hm
             total       used       free     shared    buffers     cached
Mem:          994M       918M        76M       176K         4K       671M
-/+ buffers/cache:       246M       747M
Swap:         478M        47M       431M

...

READ ALL

PHP制作多彩标签效果

目前,大家的博客左侧通常加上一个漂亮的多彩标记,也想给自己的小站加一下这个小功能。

可惜已经再不再是使用WordPress的时候那么方便了,使用WordPress的朋友们直接使用现成的插件,鼠标点点就可以加上这个炫彩的功能。小站程序是自己写的,要加这么一个功能还是得自己动手,就当学习吧!

首先,我分析了一下目前多彩标签的主要表现形式,主要有两点:

  • 颜色多样
  • 大小不一

这个是多彩标签的特性,于是想到了PHP中的随机函数rand()。直接给大小,颜色用rand()随机取值就可以。

大小的随机值容易搞定,直接生成后连接单位即可

// Nicholas Lee www.qttc.net

// 随机大小实例
$m = rand(20,30);
echo '<span style="font-size:'.$m.'px">随机大小</span>';

...

READ ALL

PHP中利用sleep函数实现定时执行功能

在某些程序中,有一些特殊的功能需要用到定时执行,如果熟悉Linux的朋友肯定会说这不是容易吗,直接来个计划任务crontab不就实现了吗?这的确是可以实现,但必须是提前知道具体的执行时间,然后才能写到计划任务里去。比如凌晨两点,上午七点,或者每天上午六点三十分等等。

然而有时候,这个时间我们无法预知,而执行时间是程序动态生成的。然后在动态生成的时间后执行某些程序片段,这里就不能用Linux的crontab计划任务了,因为每次执行的时间都是动态生成,而计划任务需要知道一个固定的时间。既然无法使用计划任务,那么就只能从程序本身寻找实现方法。

...

READ ALL

jQuery滚动效果

新浪微博的滚动效果,通过JavaScript也能实现,但感觉用JavaScript写这个效果极其麻烦。使用jQuery只需要几行代码就能轻松实现。

首先我们分析下动画原理,微博上的滚动效果主要有两步:滑出,渐变。

首先是滑出

在jQuery中,要使某个标签滑入滑出可以使用slideDown()sildeUp()函数,分别是向下向上滑动。我们先来实现滑动效果

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>jQuery滚动效果</title>
    <style type="text/css">
      .list {background:#f6f6f6; width:700px;border:1px solid #e2e2e2;height:200px;}
      .list .tit {   border-bottom:1px solid #ddd;text-indent:20px;background:#c3c3b3;height:40px; line-height:40px;color:#b5c;}
      ul {display:block;   padding:10px 10px 0; overflow:hidden; position:relative; top:10px;}    
      ul li {display:block; height:50px; border-bottom:1px dashed #808080; background:#f6f6f6 left top no-repeat; padding-top:3px; margin-bottom:10px; *margin-bottom:5px;}
      .con {margin:20px;}
      .con .list {margin:10px 0px;}
    </style>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script type="text/javascript">
      var arr = new Array();
      arr['0'] = '【小猪】:大家好!欢迎来到琼台博客';
      arr['1'] = '【小牛】:在这里大家可以互相分享技术心得。';
      arr['2'] = '【小狗】:认识大家很高兴啊!';

      var qu = arr.length-1;
        
      window.onload = function(){     
        put();
      }

      function put(){
        var str = '' ;
        for(var i=qu;i<arr.length;i++){
          str += '<li>'+arr[i]+'</li>';
        }
        $('#k').html(str);
        qu--;
        setInterval('show()',3000); 
      }

      function calculate(){
        if(qu<=0){
          qu = arr.length-1;
        }else{
          qu --;  
        }
      }
        
      // 动画主函数
      function show(){
        $('#k li:first').before('<li style="display:none;">'+arr[qu]+'</li>');  
        $('#k li:first').slideDown(500);
        $('#k li:last').animate({ opacity:"0",marginTop:"0"},500,'',function(){$('#k li:last').remove();});
        calculate(); 
      }
    </script>
  </head>
  <body>
    <div class="con">
      <div class="info">
        <h1>jQuery滚动效果</h1>
      </div>
      <div class='list'>
        <div class='tit'><h3>最新动态</h3></div>
        <ul id="k">
          加载中...
        </ul>
      </div>
    </div>
  </body>
</html>

...

READ ALL

jQuery中ready与JavaScript中window.onload区别

在JavaScript中,window.onload()函数是最经常使用的。这个函数的作用就是等待网页完全装载完了以后再去执行代码块内的语句,因为按照文档流的执行顺序,通常用于头部加载JavaScript的时候需要用到。

window.onload = function(){
  // 当网页加载完成后执行这里的代码块
};

而在jQuery中也有一个对应的函数,即等待网页加载完后执行代码块

$(document).ready(function(){
  // 当网页加载完成后执行这里的代码块     
});

...

READ ALL

Ckeditor在源码状态下获取内容报错解决

一直都喜欢用Ckeditor做网站后台编辑器,近期由于高亮代码的使用所以经常需要在源码状态下编辑,但奇怪的是在源码状态下获取textarea值js出错,但在所见所得状态下却正常,很是郁闷!

报错截图

full

一开始以为是自己代码哪里写错了

因为我的Ckeditor对象就是cke

// 定义ckeditor 初始化
var cke = CKEDITOR.replace('content');

可是为何提示null

开始行行检查也没发现有什么问题

...

READ ALL